WordPress5.0から採用される新エディター「Gutenberg」の使い方を、これからWordPressに初めて触れる人でもわかりやすくまとめました!旧エディターからGutenbergへの乗り換えを検討されている方も、ぜひ参考にしてください。 (単純な記事のレベルを超えたようなLPのようなページも簡単に作れそうな印象をもちました), いつまでも旧エディタに執着していると、WordPressに付いていけなくなります…。いつかGutenberg or WordPressと選択を迫られる時が必ず来ますので、できるだけ早い内に使い慣れておくことをおすすめします!, Gutenbergの基本的な使い方です。単純にすると以下の3ステップかと思います(※ ほぼ2を繰り返す), 新規追加を開くと、「タイトル」箇所にフォーカスが当たっていると思います。とりあえずタイトルを入力しましょう。, ちなみに、タイトルのブロックにフォーカスするとパーマリンクが変更できるようになります。, パーマリンクの場所どこ?ってなった。タイトルにフォカスすると出てくるのか pic.twitter.com/0ztM7HezYa, 作成する感覚としては、今まで同じように文章を入力するだけならブロックをそんなに意識しなくてもいいと思います。, 画像とか埋め込みとかしたくなったら、左上にある「」からブロックを追加していきます。, 2を必要な分だけ繰り返し追加していくのがGutenbergでの記事の作り方だと思います。, 前のエディタ(TinyMCE)なら、インライン要素単位で装飾できたかと思いますが、Gutenbergでは、基本的にブロック単位での装飾になります。, ブロックを選択すると、右側でブロックエリアが選択されます。「どのブロックが選択されているか」の情報と、装飾できる候補が出てきます。, Gutenbergはブロックを足したり引いたりを繰り返すことによって記事を作成していきます。めちゃくちゃ大量のブロックが用意されていて、使いこなせるブロックの数が多いほど、記事に彩りが出るって感じですね。, ブロックを制するものはGutenbergを制する!ということで、各ブロックをドバーっと紹介していきます。全部で62種類あります笑(※ 2018年11月時点), 一部ブロックを簡単に紹介していきます。埋め込み系は総じてなぜかキャプションの入力が可能です。, この辺の、WordPressの既存のテキストエディタへのボタン追加などを前提としたプラグイン(テーマ自体の拡張もですが、)は、使えません。Gutenbergを拡張するための仕組みに変えることが求められるので。, なので、プラグインやテーマ自体が対応するのを待つか、ご自身で作成するかの2択ですね…, 見出しもマーカーもボタンも簡単登録!「AddQuicktag」でWordPress投稿編集から簡単タグ挿入, 特に「Advanced Custom Fields」に依存して作っている人は(わたしも含めて)多かったので、Gutenbergが発表されてからも「ACFは対応するのどうなるの?」「使えなくなったら終わる」みたいな声がたくさんありました。, そんな声を知ってか知らずか、ACFは結構早い段階で「対応します!」と明言していましたね。, Gutenbergの公開前から既に対応が完了していて、わたしとしては「もう一生ついていきます!」って感じです, 「All in One SEO Pack」もそういえば投稿画面からタイトルやディスクリプションの設定などがありましたね。と思って試してみたら、こちらもGutenbergの正式な公開前から対応していました。, 隊長!Gutenbergの投稿画面からでも「Advanced Custom Fields」と「All in One SEO Pack」が使えることを確認しました(`・ω・´)ゞ, 編集作業していると、「今どのブロックが選択されているか分からない」ってことがよくあります。 WordPress でブロックエディタ( Gutenberg )を使用している場合、段落内で単に [Enter] キーを押した場合段落が分割されます。ここではブロックエディタを使用している場合に一つの「段落」ブロック内で改行を行う方法について解説します。

© Copyright 2020 バズ部.

All rights reserved. WordPress5.0の新エディタ「Gutenberg(グーテンベルグ)」の使い方, https://en.support.wordpress.com/wordpress-editor/blocks/verse-block/. WordPressの新エディタ「Gutenberg(グーテンベルク)」の使い方を紹介していきます。使い方といっても見返すとほぼブロックの説明になっていました笑, Gutenbergは、ブロックを組み合わせていくことによって記事を作成していくような感覚です。 Gutenbergはブロックを足したり引いたりを繰り返すことによって記事を作成していきます。めちゃくちゃ大量のブロックが用意されていて、使いこなせるブロックの数が多いほど、記事に彩りが出るって感じですね。 ブロックを制するものはGutenbergを制する!ということで、各ブロックをドバーっと紹介していきます。全部で62種類あります笑(※ 2018年11月時点)

Classic Editor is an official WordPress plugin, and will be fully supported and maintained until at least 2022, or as long as is necessary. Gutenbergの名前の由来は、活版印刷を発明した、ヨハネス・グーテンベルク(Johannes Gensfleisch zur Laden zum Gutenberg)です。 Gutenbergを試す WordPress 4.9.8 の場合、管理画面ダッシュボードで、「Gutenberg を試す」ボタンを押下します。 → はにわまんの約300件の評価を確認する, 画像を挿入するためのブロックです。画像の周りにある青丸をドラッグするだけで簡単にサイズを変更できます。, ギャラリーもより直感的に作成できるようになりました。デフォルトのスタイルだと3列で並ぶようです。レスポンシブにも対応されています!(スマホだと2列), 引用ブロックのエリアです。引用元を記載するエリアが標準で用意されているのが親切設計だと思いました。, 音声データを埋め込むためのブロックです。「自動再生」とか「ループ」とかも設定できます。, Gutenbergからエディタに背景の概念を取り入れられました。カバーは背景画像を設定できるブロックです。, ファイルをダウンロードするためのリンクを設置できます。これもGutenbergから新しく追加されたものな気がします。ボタン文言も自由に設定できます。, 動画の埋め込みができるエリアです。ここではYoutubeなどの動画ではなく自分のサーバーにアップロードした動画です。「自動再生」「ループ」「ミュート」なども設定できます。, HTMLなどのコードをそのまま記載できるブロックです。タグのまま書いても変換されずにそのまま表示されるエリアになります(他のブロックはHTMLタグとして読み込まれちゃいます), 改行とか含めてそのまま表示させたい場合に使うエリアです。コードの場合は上で紹介したブロックを使うようにしてください。, テーブルは標準で2パターンあります。「普通に囲うバージョン」と「行ごとにストライプ」されるバージョン。それよりもどうやって, クラシックは前のエディタ(TinyMCE)をそのまま使えるブロックです。おそらく前のエディタからGutenbergに移行したい人が主に使うブロックかと思われます。, Gutenbergではカラム分けがめっちゃ簡単です!とはいっても2分割単位になりまし、まだ扱いがむずかしめな印象…, ボタンのパーツが標準で用意されています。背景色に文字というシンプルなものですが、アローアイコンなどはCSSでカスタマイズしていけばいいと思います。背景色もテキスト色も自由自在かつ角丸、四角の2パターンから選べます。, LPとかでよくある画像とテキストが横並びされるようなブロックがありました!ただ、CSSがgridで作られているので人(やブラウザ)によっては使うのが難しいかもしれない印象です。画像の左右の配置切り替えや大きさも青丸のドラッグで簡単に行えます。, かつてのページビルダー系でよくあったスペースのためだけのブロックも用意されています(ページビルダーを潰す気まんまんですね笑), 最新の記事が取得できます。トップページのニュースとして部分的に取得した時とか重宝するかもしてないって思いました。. 台湾でWEBやAR / VR制作ならDIZHI INTERNATIONAL Co., LTD. WordPress4.9.8以降のバージョンなら利用できるので、利用されている方もいらっしゃるかもしれませんが、WordPressで記事を制作されている方はかなり良いエディタになると思っています。, 実際使ってみてどうだったか。Gutenberg(グーテンベルク)の使い方を紹介していきたいと思います。, ※この記事はWordPress4.9.8、Gutenberg(グーテンベルク)バージョン4.2.0のものを記載しています。, ※WordPress5.0では、Gutenberg(グーテンベルク)が標準となっています。旧エディタを使う場合は、プラグイン「Classic Editor」をインストールする必要があります。, WordPress5.0からビジュアルエディタとなる「Gutenberg(グーテンベルク)」。, このGutenberg(グーテンベルク)という名前は、活版印刷技術の発明家「ヨハネス・グーテンベルク」からついた名前です。, ブロックには、見出しや文章、画像、動画と言った基本ブロック以外にも、ショートコードやウィジェットなども組み合わせてコンテンツを組み立てる事ができます。, 注意として現在、記事をアップしている方は記事ページのところでブロックに書き換えないようにすることです。書き換えてしまうとイメージが変わってしまいます。既存の記事を書き換える際の注意事項は最下部に記載しています。, 今までと異なり、WordPress新エディタGutenbergでは、一つ一つがブロックに分けられて作っていくようになります。, 上記のイメージの左上にある⊕をクリックするとブロックのフォーマットが表示されます。, ブロックは「段落(テキスト部分)」や「画像」、「リスト」、「テーブル(表)」と様々なものが用意されています。下にスクロールしていくと動画やSNSなどの挿入、ショートコードなどたくさんあります。, 今までよりもこのブロックを使うことでタグの挿入も必要なく、直感的に、そして簡単に綺麗なページを作れるようになります。, 続いて右側には、「プレビュー」ボタンと「公開する」ボタンが表示され、タイトルやブロックで記載していくと「プレビュー」ボタンの左側に「下書き保存」とリンクが表示されるようになります。, そして、「公開する」ボタンの右側にあるボタンは「設定」ボタンになっており、右側に表示されているサイドバーを非表示にすることができるようになります。, 右側にあるメニューボタン(縦に点が3つならんでいるボタン)はエディターの表示についてやオプションでサイドバーに表示・非表示といった設定ができるようになっています。, 右側のサードバーですが、上部にタブがあり、「文書」と「ブロック」が表示されています。, 「文書」タブは、以前WordPressを使った方は前のエディターとほとんど変わりません。, 今の「公開状態」や「カテゴリー」、「タグ」、「ファーストビューの設定」ができるようになっています。今まで異なるのは「ディスカッション(コメントやトラックバックの許可の設定)」がこちらに移動している感じでしょうか。, 「ブロック」タブでは、ブロックで作業の際にそのブロックの詳細の設定ができるようになります。例えば、段落でテキストを入力していた場合には、テキストの色や背景色、文字サイズなど変更ができるようになります。, 見出しのブロックは上記イメージの通り、hタグやテキストの配置など簡単に設定できます。, 以前も記載しましたが、hタグは文字の大きさで使うわけではなく、h+小さい数字が見出しとして使い、h+大きい数字になればなるほど、中見出し→小見出し→・・・となっていきます。(hタグについての細かいところは省略しますが、重要なタグになります。), 段落のブロックでは、改行するまで一段落として記載されます。また、テキストを入力した上にはテキストの配置や太文字、斜め文字、リンクなどの設定などでき、右側のサイドバーには文字のサイズやテキストの背景色、テキストの色など設定できるようになっています。, 画像をアップロード、もしくは既にアップしてある画像を選択すると画像が表示され、こちらも画像の配置やaltテキスト(元のファイル名以外の名前として記載する場合)、画像サイズなど設定は右のサイドバーで設定できます。, ブロックのカバーを選択し、画像をアップもしくは選択すると上記の「画像」の上に「テキスト(文字)」を表示させることができます。, そして、「オーバーレイ」では画像の上に色をのせることができます。透過率によって濃度も変更できるので、テキストが背景の画像で見にくい場合にはここで調整できるようになります。, 「埋め込み」内にあるSNSや動画サイトを埋め込みたい場合は上記の空欄にその埋め込みたいtweetや動画ページなどのURLを埋め込むと表示されます。, ブロックとブロックの間に追加したい場合は、追加したいブロックの間にカーソルを合わせると⊕が表示され、クリックするとブロックの一覧が表示され追加できます。, ブロックの削除は、削除したいブロックを選択し、右側のメニューボタン(縦に点が3つならんでいるボタン)を選択すると「ブロックの削除」が表示され、削除できます。, 記事のタイトルを選択すると上部にURLが表示され、上記のイメージに「保存」のボタンが表示されていますが、同じ場所に「編集」ボタンが表示されます。「編集」ボタンをクリックすると上記イメージのようにパーマリンクの修正を行うことができます。変更しない場合はこちらはそのままで。, 既存のページを修正する方法はタイトル下の記事開始部分に「クラシック」と表示されています。その「クラシック」部分をクリックするとメニューボタン(縦に点が3つならんでいるボタン)が表示されますので、そこから「HTMLとして編集」を選択します。, ※気をつけていただきたいのは「ブロックへ変更」を選択するとCSSのクラスなどが削除されてしまいますので、変更する場合には「HTMLとして編集」をおすすめします!, 今までの記事の書き方にもよると思いますが、そのまま記事を直感的にスラスラ書いていた人には便利だと思います。ただ、タグを使って書いていたのでやや手間になるところもあります。, しかし、初めてWordPressを使われる方でもランディングページであったり、コンテンツページであったりと見せるページはかなり直感的にかつ使いやすくなっていると思います。.

WordPress ポッドキャスト.



布団乾燥機 靴 アタッチメント 100均 48, 統合失調症 治った ブログ 17, 椿 坂 オーディション 5, 注文書 契約書 二重 契約 4, 魚の目 芯 出し 8, 仁王2 芸能人 コード 6, Aquos Zero2 音が小さい 5, イ スンギ 自宅 6, ステップワゴン Rg ラジエーター 交換 14, 剣盾 レイド つまらない 11, 録画 編集 Cmカット 5, Oracle 年 加算 23, 導きの地 おびき出し 歴戦 42, ドラクエ10 僧侶 装備 カテドラル 4, シェルティ ケージ 大きさ 19, 納骨 お布施 曹洞宗 8, タマケアショップ Amazon フィッティ 9, 桃城 海堂 ダブルス 立海 41, マッチングアプリ デート 3回目 5, Pマーク チェック シート 7, Rpgツクール2000 Rtp Windows10 16, リングフィット 体重 減らない 48, 受験ドクター 合 不合 6, イマクン 韓国語 意味 12, Ir プロフィール 調べ 方 シャープ 6, Ps4 マイクレベル 反応しない 10, ビジョンクエスト2 レッスン10 答え 4, スマブラ コンボ マリオ 9, Mmcs J 03 Bluetooth 7, エクセル 合計から 引く 4, ラテン語 格言 愛 15, クリップボックス 映画 ダウンロード 7, イ ハンソ Bts 9, Zeh 補助金 一条工務店 18, うさぎ 部屋んぽ サークル 4, 辛口 本音 占い 4, 2020 メンズ 髪型 ベリーショート 8, Apple Id 残高 Lineスタンプ 4, 食中毒 ヨーグルト 効果 12, シャープ 太陽光 モニター 設定 5, 相撲部屋 おかみさん 下の世話 19, Nbox キーナンバー 場所 10, 軽トラ 13インチ ホイール 19, アイリスオーヤマ エアリーマットレス 試せる 9, Googleアプリ 勝手に 開く 4, 卓球場 作る 費用 5, Apnタイプ Default Supl Tether 4, 日野 トラック スパナ マーク 消し方 19, 井上芳雄 英語 力 4, エコキュート 電気代 ガス代 比較 5, 配列 シャッフル C# 5, 10倍 希釈 モル濃度 4, テラスハウス 軽井沢 バツイチ 4, ドラゴンボール超 漫画 売上 7, Gg あいざいます 意味 39, Power On 和訳 Lesson4 27, 豊田自動織機 どんな 会社 5, Birdy 自転車 2020 10, Dr E861w 価格 15, 2019 04 08 Raspbian Stretch Full Zip 6, 不登校 更生 施設 8, Pubgモバイル エース称号 条件 5, マスタニム スローガン フォント 4, 女の子 が 安心する言葉 6, 予約 電話 美容室 7, フリーター 国民健康保険 払えない 6, コシュニエ Ib 意味 8, Pandas Csv 結合 8, 甲子園スピリッツ キャプテン 条件 5, 犬 気管支炎 ブログ 4, Century Gothic Webフォント 6, クリミナル マインド 15 エミリー 19, カエル カニ 夢 5, コンクリート 事件 裁判記録 14, ウルトラマンティガ 動画 Pandora 10, 昇格試験 論文 人材育成 4, サンプルレート 44 48 違い 4, Iphone ミュージック 雲マーク 消す 10, 筑波大学 Mba 費用 4, ピアノ 大人 スランプ 4, マイクラ 村 人気度 31, 室蘭 映画 アナ雪 4, 野原 の ばら 4, ドッカンバトル Cm Taka 37, Sqlite Collate Utf8 4, 荒野行動 ペナルティ 表示 9, テトラ 外掛けフィルター At50 6, Avex 女性グループ M 19, Escape R3 ブレーキ交換 4, レジン 毛抜き 角栓 6, 猫 耳垢 黒い 4, アルパイン Bigx 外部入力 5, Ted Youtube 日本語 10, Kj 49x9500g 外付けhdd 9,