Day毎日が輝く自分らしいライフスタイルをあなたに。WordPress朝日奈光一WordPress5.0のエディタGutenberg(グーテンベルク)の使い方!記事の書き方を詳しく解説!ツイートシェアはてブ送るPocketこんにちは、朝日奈です。5.0からエディタが新しくなります。その名もGutenberg(グーテンベルク)。去年から少しずつ情報は流れていて、いずれ導入されるよ〜というのを聞いていましたが、ついにその時がやってきましたね。実際に使ってみましたが、これまでのエディタとは全然使い勝手が違うので、Gutenbergを使った記事の書き方をご紹介します。おわりにGutenbergのインストールWordPressのダッシュボードに、Gutenbergの案内が出ていると思いますので、【Gutenbergをインストール】をクリックします。ちなみにGutenbergはプラグインとして用意されているので、プラグインの新規追加画面で『Gutenberg』と検索してもインストールすることができます。インストールが完了したら【Gutenbergを有効化】をクリックします。すると早速デモ記事が書かれた画面に変わります。Gutenbergはブロック単位で記事を作成していきます。タイトル、見出し、本文、画像などがブロックとして扱われ、ブロックを挿入したり並び替えたり削除したりして直感的に記事を作成していくのです。それでは早速新規作成画面を開いて書いていきます。下書き保存したり、記事を書き進めていくと、パーマリンクが設定されますが、このタイトルブロックでパーマリンクを変更することができます。本文はそのまま入力できます。ビジュアルエディタと同じ感覚です。enterを押すとブロック内で改行します。enterを押すと新しいブロックで改行します。エディタ上で書く分には従来と同じ感覚で書けるので、特に問題ありません。コード表記が微妙に変わっています。右上の【More】をクリックすると、エディタを変更することができ、【コードエディター】でHTML編集ができます。実際にコードエディターを見てみると、見慣れないコード表記があります。これがブロックを表しているのです。これはエディタ上だけの表記のようで、投稿してソースコードを見てみたらブロック表記はありませんでした。コメントアウトされている表記なので特に気にする必要はないと思います。最初からコードエディターを使って入力するとどうなるのでしょうか?コードエディターで書いてみます。その後、ビジュアルエディターに戻してみると・・・なんと、クラシックというブロックが出てきました。クラシックブロックは従来のビジュアルエディタになっているので、記事装飾なども従来通りにできます。このままクラシックブロックに書き続けてもよさそうですが、新しいブロックと混在すると気分的に嫌なので、クラシックブロックを新しいブロックに変換します。クラシックブロックの右上の【追加オプション】をクリックします。【ブロックへ変換】をクリックします。新しいブロックに変換されました。普段HTMLで書いている人はまずコードエディターで入力して、その後【ブロックへ変換】するといいですね。ポイントコードエディターで書くとクラシックブロックになるテキストをコピペするときのポイント僕は普段、Evernoteで文章を書き、それをコピーしてWordPressのエディタに貼り付けるというやり方で記事を作成しています。試しに、この文章をコピーして貼り付けてみます。v)で貼り付けると、空白改行が消えてひとつのブロックになりました。空白改行ごとにブロックが作られて貼り付けられます。v)は「書式なしで貼り付け」なので、装飾などの書式情報をまっさらにしてテキストのみを貼り付けるのです。ちなみに、コードエディターの場合は普通に貼り付けても「書式なしで貼り付け」になるので、空白改行込みで貼り付けられます。先ほども解説した通りコードエディターで貼り付けるとクラシックブロックになります。リンク】などがあり、右側のサイドバーに文字の大きさや色を変更する設定があります。本文以外は左側の【+】をクリックしてブロックを挿入します。様々な種類のブロックがあるので、挿入したいものを選びます。ブロックの左側にマウスカーソルを持ってくると上下の矢印が浮かび上がるので、それをクリックすれば順番を入れ替えることができます。右側の【追加オプション】をクリックすれば、ブロック単位でHTML編集をしたり、ブロックを削除したりできます。見出しを入れる見出しを入れる場合は【共通ブロック】⇒【見出し】をクリックします。見出しブロックが出てきます。通常はH2を使い、H2の中にさらに見出しを入れたくなったときのみH3を使いましょう。H4はほぼ使いませんね。左の【H】をクリックすると、ブロックタイプを変更できます。本文にしたくなったときは【段落】をクリックします。本文から見出しにしたり、箇条書きや引用にしたい場合も一番左のマークをクリックすれば変換できるブロックが出てきます。これなら、一通り文章を書いて、あとから見出しにすることもできますね。画像を挿入する場合は、【共通ブロック】⇒【画像】をクリックします。従来通り、画像をアップロードしたり、すでにアップロードされているメディアライブラリの中から画像を選択したりして挿入します。画像は直感的に編集できます。丸印にマウスカーソルを合わせれば画像の拡大縮小が可能です。キャプションもそのまま入力できます。右側のサイドバーには画像情報が出ているので、細かい設定はこちらでできます。ちなみに、画像ブロックを選択しなくても、本文入力状態のときに直接ドラッグ&ドロップすることで挿入もできます。自動で画像ブロックになってくれるのでわざわざブロックを選択する手間が省けて便利です。ポイントドラッグ&ドロップで画像を挿入できるギャラリーの挿入ギャラリーの挿入も可能です。ギャラリーとは、複数の画像を一覧表示する機能です。使用するには画像を複数枚選択します。すると、このようにギャラリーが作成されます。右側のサイドバーでカラムの変更も可能です。個人的にすごいと思ったのがカバー画像です。カバー画像とは、ブログのヘッダーのように画像の上にテキストを表示させるブロックです。画像を選択すると、テキスト入力箇所が現れます。試しにテキストを入れてみるとこんな感じです。これめっちゃよくないですか!?見出し直後のアイキャッチ画像とかに使えそうです。右側のサイドバーで透過率の変更もできますし、ランディングページを作るときとかに便利かもしれませんね。ボタンが使える【レイアウト要素】⇒【ボタン】でリンク付きボタンを挿入することができます。ボタンに表示させるテキストやURLを入力できたり、右側のサイドバーで色を選択できます。ボタンデザインは微妙かもしれません・・・2カラムにできる最近のテンプレートでは当たり前の機能になりつつある2カラム表示ですが、Gutenbergでは標準搭載となりました。【レイアウト要素】⇒【カラム】で2カラムにできます。このように2カラム構成ができます。SNSの埋め込み豊富な埋め込みブロックが用意されていて、TwitterやInstagramなどURLを貼り付けるだけで挿入できます。いちいちブロックを選択しなくても、本文入力状態でSNSのURLを貼り付けると自動で埋め込みブロックになります。ポイントSNSのURLを貼り付けると直接挿入できるアフィリエイトリンクの挿入方法アフィリエイトリンクの挿入方法は2種類あります。カスタムHTMLを使うか、クラシックブロックを使うかです。カスタムHTML【書式設定】⇒【カスタムHTML】をクリックします。すると、HTMLコードを入力できますので、ここにアフィリエイトリンクをコピペします。クラシックブロックコードエディターにしてアフィリエイトリンクを貼り付けると、自動でクラシックブロックになり、HTMLコードが保持されます。Gutenbergを使うなら新しい方に統一したいので、カスタムHTMLの方が良さそうですね。ショートカットキーで効率化Gutenbergはブロックを採用することで直感的に操作ができるので、確かにわかりやすいのですが、わざわざブロックを探して挿入するっていうのは非常に面倒です。効率が悪い!ということでショートカットキーを覚えましょう。テキスト入力状態で【/】を押すと、直近で使用したブロックの一覧が表示されます。ビジュアルエディターのコードエディターの切り替えもショートカットキーがあります。Mで切り替えられます。あとは、画像のドラッグ&ドロップ、SNSのURL貼り付けなどが本文入力状態で直接可能なので、ブロックを選択する手間が省けて効率化できます。ショートカットを可能な限り活用して効率アップを図りましょう。画像の挿入はドラッグ&ドロップSNSの挿入はURL貼り付け旧エディタもインストールしておこうGutenbergは従来のエディタから保存形式が変わっているので、テンプレートによっては対応しきれず不具合を起こす恐れがあります。そのような場合は旧エディタを使うしかないので、あらかじめインストールしておきましょう。旧エディタのインストールはダッシュボードにも案内が出ているので、そこからプラグインとしてインストールできます。editor』と検索しても出てきます。editorを使うといいですね。おわりにGutenbergは直感的な操作が可能となったので、初心者には使いやすそうです。画像も挿入したいところにドラッグ&ドロップしてマウスで大きさを変えたりできるので良いですね。旧エディタを使ってきた人にとっては手間が増えて使いにくく感じるかもしれません。これはもう慣れるしかないですね。今のところGutenbergのプラグインの評価は2.4と微妙なところです。僕ももう少し効率よく使いこなせるように慣れていきたいと思います。WordPressこの記事が気に入ったらいいねしよう!最新記事をお届けします。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Inserterの使い方!ブログ記事の書き方のコツ!テンプレートでアクセスアップを狙おう!RECOMMENDこちらの記事も人気です。朝日奈光一1年半勤めた会社を辞めて独立した起業家。好きなときに好きなようにシゴトをするライフスタイルで自由に楽しんでいます。コンサルタントとしても活動し、個人で稼ぐ力を付けて自分らしい生き方を実現する方法を発信しています。Ins...Author朝日奈光一1年半勤めた会社を辞めて独立した起業家。好きなときに好きなようにシゴトをするライフスタイルで自由に楽しんでいます。コンサルタントとしても活動し、個人で稼ぐ力を付けて自分らしい生き方を実現する方法を発信しています。