WordPress「Gutenberg」の使い方【記事投稿方法を解説】

469view

WordPress「Gutenberg」の使い方【記事投稿方法を解説】

WordPressの大型アップデートで新しく採用されたエディター「Gutenberg(グーテンベルク)」。
Gutenbergはより初心者でも簡単に操作できるように開発されたエディターですが、
初めてWordPressを触る方の場合、最先端過ぎてしまい操作方法がわからないと言った感想が多いです。
また、旧エディターで慣れている方は、使い勝手がかなり変わってしまい、使いにくいという意見も多くあります。

自分の場合も、旧エディターで長年慣れてしまっていてGutenbergに切り替えるのはかなり躊躇しましたが、
一度Gutenbergを触ってみるとかなり使いやすく、今では旧エディターに戻ることが出来なくなりました。

今回はそんな初めてWordPressを触る方やGutenbergに抵抗がある方にわかりやすく使い方【投稿方法】を解説していきます。

WordPressの記事の書き方

下記の9つの項目を順に解説していきます。

記事を書く流れ

  1. 記事の新規作成
  2. タイトルをつける
  3. 見出しをつける
  4. 本文を書く
  5. 画像を挿入する
  6. カテゴリーを設定する
  7. タグをつける
  8. アイキャッチ画像を設定する
  9. パーマリンクを設定する

1.記事の新規作成

新しく記事を書く場合は左のサイドバーの[投稿]→[新規追加]をクリックで作成できます。

または一番上のヘッダーにある[+新規]をクリックでも可能です。

2.タイトルをつける

タイトルは上記の「タイトルを追加」と書かれている部分にカーソルを合わせると入力できます。
タイトルはあまり長くなってしまうと検索画面に表示しきれないので32文字前後にするように心がけましょう。

3.見出しをつける

ここからがGutenbergの新しい機能の登場です。
Gutenbergの場合、すべての要素(見出し、段落、画像、リストなど)がブロックで構成されていきます。
下記のイメージような感じに記事をブロックで構成していきます。

一つ一つがブロックになっているので、ブロックの間にブロックを追加したり、ブロックごとに移動したりすることが簡単にできるのがGutenbergの特徴です。

ブロックの追加方法は下記の[+]ボタンをクリックします。

すると見出し、段落、画像、リストなどが追加できます。

上記の項目から見出しを選択すれば見出しブロックを追加することができます。

見出しのレベルはH1〜H6まで設定することができます。

4.本文を書く

見出し同様、[+]ボタンをクリックしてブロックの追加します。
本文は[一般ブロック]→[段落]のブロックになります。
ブロックが追加できたら下記のようにブロック内に文字を入力していけばOKです。

5.画像を挿入する

画像も同様に、[+]ボタンをクリックして[一般ブロック]→[画像]をクリックします。
追加すると下記のような画面になります。

画像の挿入方法は下記の青い部分に挿入したい画像をドラック&ドロップする方法が一番簡単です。

6.カテゴリーを設定する

カテゴリーを設定する際は右のサイドバーからまず[文章]をクリックし、[カテゴリー]をクリックします。
既存のカテゴリーをクリックするか、[新規カテゴリーを追加]をクリックしてカテゴリーを追加しましょう。
当サイトの場合、LIFE、CODE、DESIGNのカテゴリーを追加しています。

7.タグをつける

タグを設定する際も右のサイドバーからまず[文章]をクリックし、[タグ]をクリックします。
タグはカテゴリーが違う記事などでも横断的にまとめることができます。
カテゴリーが縦軸ならタグは横軸といった感じで色々なタグを自由につけることができます。
当サイトでも設定していますが、使っても使わなくてもどちらでも大丈夫です。

8.アイキャッチ画像を設定する

アイキャッチ画像の設定も右のサイドバーからまず[文章]をクリックし、[アイキャッチ画像]をクリックします。

アイキャッチ画像の挿入方法も下記の青い部分に挿入したい画像をドラック&ドロップする方法か、メディアライブラリから選択して挿入しましょう。

9.パーマリンクを設定する

最後にパーマリンクの設定をします。
パーマリンクの基本設定は下記の[設定]→[パーマリンク設定]から投稿名に設定しておきましょう。

なぜ投稿名にするかは後ほどご説明します。

記事に戻ります。パーマリンクの設定方法は、右のサイドバーからまず[文章]をクリックし、[パーマリンク]をクリックします。
※ここで注意してほしいのが、新規作成した場合、右のサイドバーには[パーマリンク]は表示されません。
記事を[下書き保存]することによって[パーマリンク]が表示される仕様になっております。

クリックするとURLスラッグというものが表示されます。ここに投稿名を入力します。
なぜ投稿名にしたかというと、投稿名で日本語ではなく英語で記事の内容にそった名前にするとSEO的に有利になるからです。
例)〜の始め方 = how-to-○○○○○○○○ など

詳しい説明はこちらがとても参考になります。

WordPressの記事の書き方【応用編】

続いて文字を太字にしたり、文字サイズ・色を変えたり記事を装飾する方法をご紹介します。

  1. 太字・斜体・リンクを入れる
  2. 文字色・背景色を変える
  3. 文字の大きさを変える
  4. 余白を入れる
  5. リスト化する

1.太字・斜体・リンクを入れる

下記の画面から

・Bが太字
・Iが斜体
・鎖アイコンがリンクです。
当サイトで実際に設定すると、こんな感じになります。

太字

斜体

リンク

2.文字色・背景色を変える

文字色・背景色を変える3ステップ

  1. 色を変更したい段落ブロックを選択します。
  2. 右のサイドバーのColorSettingsまたは色設定をクリック
  3. 背景色、文字色を設定

下記のような感じで設定できます。

ちなみにカスタムカラーを選択すると好きな色が設定できます。

3.文字の大きさを変える

文字の大きさを変える3ステップ

  1. 文字の大きさを変更したい段落ブロックを選択します。
  2. 右のサイドバーのText Settingsまたはテキスト設定をクリック
  3. プリセットサイズから小〜特大を選択

基本的にはあまり使用しないですが、どうしても目立たせたい時などに使うと効果的です。

4.余白を入れる

Gutenbergからは自由に余白が入れられるようになりました。
デザインなどの観点から余白(ホワイトスペース)を入れることにより記事が読みやすくなるメリットがあります。
余白の追加方法は[+]ボタンをクリックして[レイアウト要素]→[スペーサー]をクリックします。

下記記の青い点をクリックしながら上下に移動させて余白を調整することができます。

5.リスト化する

リスト化する場合は、[+]ボタンをクリックして[一般ブロック]→[リスト]をクリックします。
テキストを入力してEnterキーを押すと下に追加することができます。

通常のリストと番号付きリストが選択できます。

  • 通常リスト
  • 通常リスト
  • 通常リスト
  1. 番号付リスト
  2. 番号付リスト
  3. 番号付リスト

WordPressの記事の投稿方法

最後に記事の投稿方法です。

投稿方法

記事が書き終わったら、まずプレビューで確認してみましょう。
プレビューは下記画面の右上の[プレビュー]をクリックします。

内容が確認できたらいよいよ公開です。
公開方法は下記画面の[公開する]ボタンをクリックします。

「公開してもよいですか?」と聞かれるので、「公開」をクリックすると投稿完了です。

投稿方法(予約投稿の仕方)

予約投稿の場合は、[公開する]ボタンをクリックしたあと、
「公開してもよいですか?」と聞かれたとに下記の[公開:今すぐ]をクリックします。

すると日時とカレンダーができてきますので希望の時間や日付に設定します。
日付を現在よりも未来に設定すると[公開]ボタンが[予約投稿]ボタンにかわりますので、[予約投稿]ボタンをクリックして予約投稿完了です。

まとめ

WordPressを初めて触る方やGutenbergに抵抗がある方向けに使い方と記事の投稿方法をご紹介しました。
Gutenbergは最初は抵抗があるかもしれませんが、使ってみるとかなり便利なのが実感できるかと思います。

まだまだここでは紹介しきれないほど他にもたくさん機能があり、今後もより使いやすくアップデートしていくのではと思っています。
Gutenbergを使って、みなさんがより効率的に記事を書けたら幸いです。

この記事をシェアする