設定

【結構簡単】Gutenberg(ワードプレス)の使い方を分かりやすく解説!

2018年にWordpressのメジャーアップデートが行われ、Wordpress5.0がスタートしました。

大きな変更点は記事投稿画面です。

従来のクラシックエディターからGutenbergという新しいブロックエディターが導入され、記事投稿画面がこれまでと大きく変わってしまい戸惑っている方も多いのではないでしょうか?

Classic Editorというプラグインをインストールする事で従来通りの記事編集方法でも記事を投稿できるのですが、それも2022年までの話。

将来的には新しいGutenbergに慣れていかないといけないのです。

だったら、少しでも早い段階でGutenbergに慣れた方が良い。というのが僕の結論です。

ここでは「これだけは抑えておきたい!」というGutenbergの使い方をなるべく分かりやすく説明していきたいと思います。

Gutenbergの使い方 ~まずこれだけ抑えよう~

Gutenbergの使い方 準備編

Gutenbergの使い方を解説!

僕が思うにGutenbergを使い始める前に以下の事を確認しておくと記事が書きやすいです。

  1. トップツールバーの設定。
  2. TinyMCE Advancedの設定。
  3. エンターを押すと新しくブロックが出来るという事。
  4. 再利用ブロックの設定。

以下、簡単に説明していきますね!

トップツールバーの設定。

Gutenbergではブロック毎に詳細な設定をしていきますが、その設定を行うツールバーは常に一番上に出しておいた方が使いやすいです。

トップツールバーを設定する。
トップツールバーを出しておいた方が分かりやすいと思います。

記事編集画面(もちろんGutenbergです。旧エディターではないですよ。)の右上で「トップツールバー」の部分にチェックを入れておくと、常にトップツールバーが出ている状態になります。

同じ場所で「スポットライトモード」「フルスクリーンモード」という設定も出来ますが、これらは僕はあまり使いやすいとは思いませんでした。(好みの問題も大きいと思います。)

TinyMCE Advancedの設定。

TinyMCE AdvancedはGutenbergでも有効です。

Gutenbergの設定画面では新しいブロックエディターと従来のクラシックエディターの両方の設定が出来ますが、ブロックエディターの方で使いたいボタンなどをしっかりと設定しておきましょう。

田村カツオ
田村カツオ
これを忘れるとかなり混乱してしまいますので要注意。

エンターを押すと新しくブロックが出来る。

これは何かの設定とかそういう事じゃないのですが、Gutenbergで記事を書いていて

  • エンターキーを押すと下に新しく空白のブロックが出来る。
  • カーソルもその新しく出来たブロックに移動する。

という事は押さえておくべきですね。

イッヌ
イッヌ
意味も分からずにエンターキーを連打してしまうと物凄く沢山のブロックが出来てしまってちょっと厄介になるからね。

再利用ブロックの設定。

多くのテンプレートやプラグインで繰り返し使っていたショートコードなどは「再利用ブロック」として設定して保存しておくといいでしょう。

再利用ブロックとはGutenbergから登場した機能で、よく使う言い回しやショートコード等を再利用ブロックとして保存しておき、後からワンタッチで使えるようにする便利な機能なのです。

以下にて「再利用ブロック」の使い方を簡単に説明しておきますね。

①「再利用ブロック」に設定したいブロックを選択している状態で、ツールバーの三点リーダー(縦)をクリックし表示されたメニュー一覧から「再利用ブロックに追加」を選択する。

この時、「再利用ブロック」に名前を付けて管理していく。

再利用可能ブロックに設定するには?

 

②再利用ブロックを使用する時は、記事編集画面左上の「ブロックの追加」を選択し表示されたメニュー一覧から「再利用可能」をクリックし、その中から使用したい「再利用ブロック」を選択する。

再利用可能ブロックの使い方。

※再利用ブロックは記事を書いていく中で変更してしまうと、他の記事で使っている同じ再利用ブロックも変更されてしまうので注意が必要です。

田村カツオ
田村カツオ
記事の書き方は人それぞれなので、これ以外にも設定が必要だという人もいるかも知れませんが、それは実際にブロックエディターを使っていく中で徐々に調整していきましょう!

とりあえずはこの4点を確認しておけば大体は大丈夫なはずです。大体は。

Gutenbergの使い方 基礎編

では、これからGutenbergの基本的な使い方を説明していきます。

ブロックエディターという事で多くの人にとって「新しい概念」ではありますが、決して難しいものではなく、まずは「柱となる作業」を覚えてしまいましょう。

それさえ抑えて自分の中でルーティーン化してしまえば後は慣れるだけです。

ここでは「これだけ押さえておけばとりあえず記事は書ける」というGutenbergの超基礎的な使い方を説明していきます。

僕が思うに下記のステップを抑えておけば大体は大丈夫です。

  1. 記事タイトルを決める。
  2. 導入文を書く。
  3. 見出しを作る。
  4. 見出しの中の文章を書いていく。
  5. コンテンツ構造を確認。
  6. 「文書」を設定する。

記事タイトルを決める。

Gutenbergだけでなく、旧エディターでも同様かとは思いますが、まず記事タイトルを決めます。

Gutenbergの場合、一番最初に表示されているブロックに記事タイトルを入力します。

Gutenbergでもまず記事タイトルを決める。
最初に一番上に表示されているブロックが記事タイトル用のブロック。

※記事タイトルのブロックが見つからなくなる時がありますが、Gutenbergは右側にスクロールバーが2つ出ている事があり、両方とも1番上まで上げておかないと記事タイトルのブロックが見えないので注意。

導入文を書く。

記事タイトルを決めたら導入文を書いていきます。

記事タイトルのブロックの末尾にカーソルがある状態でエンターキーを押すと「段落ブロック」という見出し属性も何もついていない普通に文字を書く用のブロックが下に作られます。

段落ブロックを作ったら、そこに導入文を書いていきます。

※ブロックを作りすぎてしまったら、ツールバーに「ブロックを削除」というメニューがありますので、そこで不要なブロックを削除しましょう。

ブロックはここで削除する。

イッヌ
イッヌ
とりあえずエンターキーを押すと段落ブロックが出来る。これは憶えておこう。

見出しを作る。

導入文を書いたら、見出しを作っていきます。

導入文の末尾にカーソルを合わせてエンターキーを押すと下に段落ブロックが追加されます。

追加されたブロックに見出しの文言を入力し「ブロックタイプを変更」を選択し「見出し」を選択します。

見出しブロックを作ろう。

※記事編集画面左上の「ブロックの追加」で見出しブロックを追加する事も出来ます。

見出しの中の文章を書いていく。

見出しを一通り作ったら、各見出しの下に段落ブロックを作成し、記事本文を書いていきます。

文字を装飾したり、画像を挿入したりしたくなりますが、Gutenbergの大枠の部分での基本的な操作方法を抑えておけば、大体は分かるようになりますよ!

イッヌ
イッヌ
細かい部分の使い方も、極論を言うとボタンの位置を覚えるだけだから、そんなに恐れるような事じゃないよ!

コンテンツ構造を確認。

記事を一通り書き終わったら記事編集画面左上の「コンテンツ構造」をクリックし、見出しの構造の序列が狂っていないか等を確認します。

コンテンツ構造を確認。

「文書」を設定する。

最後に「設定」の「文書」でサムネイル画像やカテゴリー等を設定しておきましょう。

(これは人によっては最初にやる方もいると思いますので、その辺りはうまく調節してみて下さい。)

「設定」で「文書」を設定しよう。

ここでカテゴリーやタグ、ディスクリプション(抜粋)、サムネイル画像等を設定します。慣れるまでは落ちが無いように、一つ一つ上から確認していきましょう。

終わりに。

WordPress5.0から導入された、ブロックエディターのGutenbergの基本的な使い方について説明してきました。

まずは、基本的な部分の大体の使い方を抑えてしまいましょう!

そうすれば細かい部分の操作も出来るようになっていきます。正直「習うより慣れろ」な部分はありますので、やってみて下さい!

カツオ
カツオ
たった一つのブログで僕の人生は激変しました。

ずっと稼ぎ続けてくれるネット上の資産を構築するスキルを身につけた事がきっかけです。(詳しくはプロフィールで!)

今では複数のサイトを運営しアフィリエイト報酬を得たり、法人顧客のSEOコンサル等も行っており、副業の収入がサラリーマン時代の月収を超えています。

メルマガの中でその秘密について話しています。

現在、メルマガ登録者限定で初心者がブログアフィリエイトで月収10万円以上稼ぎ、インターネット上に資産を築く為のノウハウが詰まったテキストを無料でプレゼント中!

※僕のメルマガは無料で読んで頂く事が出来ますし、必要ないと感じたらいつでもボタン1つで解除が出来ます。



ABOUT ME
カツオ
毎日のシゴトを「魂レベル」で楽しむ僧侶×Webマーケター。インターネットを用いた人気メディア運営のハウツーを伝授するオンラインレッスンを行ったり、法人顧客に対してWebマーケティングのアドバイスを行っている。趣味は筋トレ、ムエタイ、英語の勉強。

COMMENT

メールアドレスが公開されることはありません。