5.0から標準エディターに採用された「Gutenberg」(ブロックエディター)。新しいものへの抵抗は強いようで、あまり評判はよくないですね。今まで旧エディターで慣れてガンガン記事を書いてきた人ほど抵抗感が強いようです。Editorプラグインを入れれば問題なく使えます。Editorのサポートが2021年末までらしいので出来たらGutenbergにも早めに慣れておいた方が良いと思います。P今後でてくる有料テーマもGutenberg対応は必須になりますし、便利なプラグインも増えて旧エディターより使いやすくなると予想されます。何より慣れてしまえば旧エディターに戻りたいとは思えなくなります。最初だけちょっと戸惑いがありますが、食わず嫌いせず一度Gutenbergを使ってみて欲しいと、GIF動画付きの解説記事を書いてみました。カラムブロックGutenbergエディターの基本的な使い方Gutenbergエディターはブロックエディターと言われるように、「ブロック」単位で構成されています。+ボタンからブロックを追加すればOKです。一つのブロックの編集を終えたら「Enter」を押して改行して下さい。次のブロックが追加できます。記事タイトルの付け方まずは普通に投稿を新規追加して下さい。「タイトルを追加」で記事タイトルを入力しEnterを押せばOK。段落・文章の書き方タイトルを書いてEnterを押したら、自動的に段落(pタグに囲まれる)が書ける状態になるので、文章を書きます。+ボタンで「段落ブロック」を追加することでも文章が書けます。Enterで改行と書きましたが、正確には改段落です。画像もブロックで追加します。+ボタン>一般ブロック>「画像」ブロックをクリックします。後は画像をアップロードするか既にアップされたメディアライブラリから選択して画像を挿入します。リンクの貼り方リンクはリンクテキストを選択して「リンクアイコン」をクリックし、URLをペーストすればOKです。表(テーブル)を挿入Gutenbergなら表(テーブル)もHTMLをいじることなく直感的な操作で簡単に挿入できます。ブロックの追加>フォーマットから「テーブル」ブロックを追加します。行数と列数を指定すればOKです。リスト・引用ブロックの挿入リストや引用ブロックも同様に+ボタンから挿入できます。BlocksなどのGutenberg用の便利なカスタムブロックを使えるプラグインを利用すれば、記事執筆に便利なボックス挿入が簡単にできます。これらのプラグインの詳しい使い方は下記記事もご参照下さい。BlocksをSANGOで使ってみたクラシックブロックでAddQuicktagを使うGutenbergにはクラシックブロックという旧エディターの仕様に近いブロックが用意されています。クラシックブロックを使えばAddQuickプラグインに入れた有料テーマの装飾が簡単に使えます。ここではSANGOの装飾「注意書き」を使ってみます。有料テーマJINではGutenbergのクラシックブロックでもAddQuickTagが使えません。他の主要な有料テーマ(公式無料テーマはもちろん対応しています)ではクラシックブロックでAddQuickTagが使えますが、JINのみ使えないという状況のようです(2019/5/26時点)以下、私が上の方法で試して「AddQuicktag」の窓が出たテーマ、出てこなかったテーマです。何かテーマ内で干渉を起こしていると考えられます。JIN側が対応するまではJINでは旧エディターを使わざるを得ません。5.0以降の標準エディターです。2018年12月以降に新規でWordPressをインストールしたユーザーはデフォルトではGutenbergエディターを使うことになります。特別にGutenbergに対応したテーマでなくても特に不具合は起きていません。私がGutenberg以前に練習用に作ったテーマでも普通にクラシックブロックでAddQuickTagは使えました。JINでのこの不具合の原因はGutenberg側にあるとは考えにくいです。JINユーザーの方は不具合報告を作者さんに送り、今後の対応を待ちましょう。アフィリエイトコードを入れるアフィリエイト広告のコードなど記事中にHTMLを挿入したいときは「カスタムHTML」ブロックが使えます。ブロックをHTMLとして編集ブロックを選択して右上のメニューボタン(縦に3点並んでるの)をクリックすると「HTMLとして編集」という項目があります。ブロック単位で「ビジュアル編集」と「HTML編集」が切り替えられます。記事全体をHTMLとして編集したい場合はエディター右上のメニューボタン(縦3点)をクリックしてコードエディターに切り替えることできます。私は記事内の複数のアフィリエイトコードを書き換えたいときはコードエディターを使っています。ブロックの背景に色を付けるブロックを選択した状態で右メニューの「ブロック」>「色設定」という項目でブロックの背景に色を付けたり文字色を変更したりできます。高度な設定では追加のCSSクラスを付与することができ、様々な装飾がブロック単位でできます。ブロックの順番を入れ替える/削除するブロックは上下に移動して順番を入れ替えたり、削除や複製することができます。文書の概要で全体の構成を把握するGutenbergエディターの好きなところです。左上のiアイコンをクリックすると文書の概要で全体の見出しの構成が一目で把握することができます。Gutenbergなどのプラグインの他にもGutenberg用に便利な機能やカスタムブロックを追加できるプラグインをまとめて紹介します。R2はブロックとして商品リンクが簡単に挿入できるので重宝しています。WordPress.org公式のプラグインではないですが豊富なカスタマイズができる「Rinker」もGutenberg対応されています。ショートカットキーを使うとめちゃ便利これ知らなかったのですが、ショートカットキーを使うと劇的に速くGutenbergの執筆ができます。WordPressエディタの使えるショートカットキーおすすめ関連リンクマサオカブログさんがとてもわかりやすいGutenbergの使い方解説記事を書かれています。Gutenbergの何が良いのか、爽快感をリアルに追体験できる記事です。https://oldno07.com/startup-gutenberg/カラムブロックカラムブロックを使うと、グリッドデザインが簡単に出来ます。2列、2列、4列自在に変更できます。以上Gutenbergエディターの基本的な使い方をまとめてみました。効率よく書ける方法があるかと思います。実際にGutenbergエディターを触って最適な使い方を見つけるのも面白いですね。WordPressを始める方向けProfileみにまる@うれしデザインweb制作やデザイン、その他好きなことを書いていきます。当サイトの記事に関するご質問はお問い合せフォームでは受け付けません。Twitterから公開リプライに限りご質問いただけます。(全部に回答できる訳ではありません。)引用について☆引用の範囲内でしたらこのブログの画像・文章・コード転載OKです。引用元をリンク付きでご明記下さい。reserved.ホーム制作例ブログカスタマイズお問い合わせTwitterFeedlySHAREツイートシェアはてブLINEPocket。