株式会社RETVALABOUTSERVICEWORKSNEWSRECRUITBLOGCONTACTご依頼についてABOUTWORKSSERVICENEWSRECRUITBLOGCONTACTご依頼についてHOMEWordPress【gutenberg】ブロックエディターの使い方を徹底解説WordPressSHIROMA2020.04.272023.04.04URLをコピーWordPressのバージョン5.0から記事作成がブロックエディターに変わりました。これまでのビジュアルエディターやテキストエディターに慣れていた人にとって、正直使いづらいと思います。Editor」プラグインを入れて以前のエディターを使っている人の方が多いでしょう。Editor」プラグインは2021年末にはサポートが切れる予定となっているので、早いうちにブロックエディターに慣れる必要があります。今回は、ブロックエディターの使い方を解説しようと思います。表の作成がイマイチHTML編集がイマイチまとめブロックエディターの使い方ブロックエディターには様々なブロックがありますので、それぞれ使い方を紹介していきます。今回は、よく使われるブロックに絞って紹介していきます。段落ブロックを指定せずに文字を打つと、「段落」になります。「段落」はプレーンなテキストです。文字を打ち始めると、ブロックの上部に↓のツールバーが表示されます。このツールバーを使って、他のブロックに変換したり、文字寄せを変更したり、太字にしたりできます。一部の文字色を変えたい時もツールバーを使います。右サイドバーには「設定バー」が表示されます。「設定バー」には「文書」と「ブロック」があり、「ブロック」であれば文字サイズや文字色、背景色などが変更できます。次のブロックに進みたいときは、Enterキーを押せば次のブロックに行きます。ブロック内で改行したい場合は、shift+Enterを押します。見出し見出しを作る時は、普通に文字を入力した後、ツールバーの左端にある「変換」で見出しに変換してください。見出しのツールバーに、見出し2〜4を選択するボタンが出てきます。見出し1及び見出し5〜6は右サイドバーから選択できます。↓このボタンをクリックして見出しブロックを作ることもできますが、探すのが面倒なので上の方法の方が楽です。画像はエディタ内に直接ドロップすると画像ブロックになります。ボタンをクリックして、「一般ブロック」の「画像」を選択します。画像ブロックのツールバーでは、画像の配置やリンクの設定、画像の変更などができます。右サイドバーでは、画像のサイズや代替テキストの設定などができます。個人的には50%サイズにワンクリックでできるのが気に入っています。リスト文字を打って、リストに変換するとリストになります。リストのツールバーでは、番号なしのリスト(ul)と番号ありのリスト(ol)が選べます。リストは以下のように表示されます。リストリストリストリストリストリスト表ボタンをクリックして、「フォーマット」にある「表」をクリックします。クリックすると、以下のような表示が出てきます。列数と行数は後から追加できるので、大体の数を入れて「表を作成」をクリックしてください。ツールバーから列や行の追加、削除ができます。各項目を入力すると、以下のようなテーブルが作成できます。120分これだけだと少々見づらいので、ちょっと設定を変えてみましょう。右サイドバーで、「ヘッダーセクション」をオンにして少し修正すると、以下のように表示できます。120分これで見やすくなりましたね。表のブロックは楽ですが、セル結合やセルの細かい設定ができないので、ちょっと不便です。今後はもっと機能が向上することを願っています。ショートコードボタンを押して、「ウィジェット」の「ショートコード」という項目があるので、ここにショートコードを入れても良いのですが、実は段落内にショートコードを入れても普通に使えます。[shortcode][/shortcode]のような、囲むタイプのショートコードは、このようにブロックを挟んで使うことができます。再利用ブロックブロックエディターには「再利用ブロック」という便利な機能があります。再利用したいブロックのツールバーのをクリックして、「再利用ブロックに追加」を選択します。ブロックに名前をつけて保存をします。保存したら、をクリックして、「再利用ブロック」から同じブロックを使い回すことができます。再利用ブロックの中身は「編集」をクリックして修正することができます。作成済みの再利用ブロックを編集すると、同じ再利用ブロックを使っている全部のブロックに編集内容が反映されます。再利用ブロックを雛形として一部だけ変えて使いたい場合は、「通常のブロックへ変換」をしてから中身を変更してください。段落ブロックの最初に/と打つと、検索機能が出てきます。/見出しと入力すると、すぐに見出しブロックを呼び出すことができるのです。使うブロックの名前を覚えておけば、さくさくブロックを作成することができます。これはかなり便利な機能なので、使いこなせるようにしておきましょう。ブロックエディターの良い点ブロックエディターには旧エディターに比べて良いところがいくつかあります。レイアウトの自由度が高いブロックエディターの最も強力な点が、レイアウトの自由度の高さです。これまでのビジュアルエディターは、縦にコンテンツを積んでいくイメージでした。ブロックエディターは複数のブロックを横並びに並べたり、画像の横にテキストを入れたりなど、様々なレイアウトを簡単に組むことができます。ブログ記事というより、Webサイトを作成するときに威力を発揮するエディターだと思います。エディターと実際の表示が近いブロックエディターは、エディター上での見え方と、サイトでの実際の見え方が近くなるように作られています。ある程度どのように表示されるか把握しながらコンテンツを作成していくことができます。再利用ブロックが便利ブロックエディターの再利用ブロックはかなり便利です。同じようなコンテンツを何度も利用することは頻繁にあります。使いそうなブロックを再利用ブロックとして登録しておけば、何度もブロックを作成する手間が省けます。今現在の個人的に不満に思っている点を書いていきます。表の作成がイマイチブロックエディターには表ブロックがありますが、セルを結合できないのと、セルにクラス名が付けられないのが不便です。複雑なテーブルを組もうとすると、HTML編集をしなくてはいけません。今後はテーブルの開発に力を入れて欲しいと思います。HTML編集がイマイチブロックは「HTMLとして編集」することができます。既存のブロックで複雑なことをしたい場合、HTMLに変換して直に書くこともあります。「HTMLとして編集」をクリックして生成されるHTMLには、改行が全くなくて非常に見づらいです。改行された状態でHTML展開されてくれれば、もっと便利になるのにと思います。まとめブロックエディターはまだ開発段階にあるので、機能が成熟しきったとは言えないのが正直なところです。これまではPHPでWordPress開発できたのが、ブロックエディターがReactというJavaScriptライブラリで作られていることから、頭を抱えている開発者も少なくないでしょう。ブロックエディターのカスタマイズに関する情報はまだまだ少なく、テーマやプラグイン開発者も手探りで開発をしているのが現状です。完璧とは言い難いブロックエディターですが、今後も改良が進んでより便利なエディターになって欲しいと願っています。株式会社RETVALの代表。Webサイト制作、WordPress、SEO、ライティングが得意分野です。