株式会社火燵(こたつ)は、成果や売上にこだわる方のための動画マーケティング会社です。動画コンサルティング・動画制作・WEBマーケティング・動画制作内製化支援ならお任せください。

WordPressでの見出しとリストの挿入・編集方法【初心者向け/WordPressの使い方】

その他

みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。

今回は、WordPressのエディター「Gutenberg(グーテンベルグ)」でよく使う「見出し」と「リスト」ブロックを紹介しましょう。

見出しブロック

見出しアイコン

見出しで内容を区切ることで、ユーザーにもSEO的にも読みやすい記事になります。
長くなる時は、必ず入れましょう。

見出しブロックも段落ブロックと同じく、フォントサイズや色の変更、文字の装飾が可能です。

見出しブロックで段落ブロックと同じ編集メニュー(ピンクの太枠)

追加方法

見出しボタンを追加(アニメーション)
  1. 空白のブロックに表示されるプラスボタン(ブロックの追加)をクリックします。
  2. 見出し」のブロックを検索して、クリックします。
  3. 追加されました。
画面左上からの見出しブロック追加(アニメーション)
画面左上のプラスボタンからでも可能です。

ブロックの変換方法

入力した文字を、見出しに変換する方法もご紹介しましょう。

  1. 文章を入力した段落ブロックの右上にある「¶」マークをクリックします。
    「ブロックタイプまたはスタイルを変更」ボタンをクリック
    これは「ブロックタイプまたはスタイルを変更」というボタンです。
    選択しているブロックを、別のブロックタイプに変換します。
  2. 見出し」を選択しましょう。
    ブロックの変換で「見出し」を選択する
  3. 見出しに変わりました。
    見出し変換後のブロック
    「¶段落」マークが「見出しアイコン見出し」マークになっています。
見出しブロックへの変換方法(アニメーション)
見出しブロックへの変換をアニメーションで確認

見出しレベル

見出しレベル

ブロックツールバーの「H2」とは「見出しレベル」というものです。

見出しレベルの選び方(アニメーション)

「H1」から「H6」まで選べるようになっています。

見出しレベルは、SEOを意識して記事を書くなら、大事なところです。
詳しく解説いたします。

H1(タイトル)がいちばん見出しレベルが高く、H6まで下がるといちばん低い。

「見出しレベル」とは、階層段階のことです。

Hの後ろについている数字が小さければ小さいほど、見出しレベルが高くなります。

基本的に、H1はページタイトルです。あとは内容に合わせて、2〜6の昇順で見出しレベルを設定します。

Wordを使用している方なら「アウトラインレベルと同じ」といえば、ピンとくるかもしれません。

見出しレベルの付け方

誰でも簡単!プロレベル!動画広告のデザイン作成方法の記事を元に、例を作成しました。

見出しレベルがないバージョン

見出しレベルをつけていないバージョン

見出しレベルをつけたバージョン

見出しレベルをつけたバージョン
実際のページでは、見出しレベルはこのようにつけています。

目次のリストにすると、構造がわかりやすいでしょう。

  • H1:動画広告を作成するコツ
    • H2:サンプル動画
      • H3:シーン1の「構図」
      • H3:シーン1の「デザイン」
      • H3:全シーン完成!
    • H2:著作権違反は厳禁!
  • H1は記事のタイトルに使用しているため、H2から始めます。
  • 「サンプル動画」は記事タイトルの下にある見出しであるため、H2に設定しました。
  • 「サンプル動画」の下にある、『シーン1の「構図」』と『シーン1の「デザイン」』「全シーン完成!」は、「サンプル動画」に掛かる内容であるため、H2の下のH3にします。
  • 「著作権違反は厳禁!」は、「サンプル動画」とは別の話であるため、同レベルのH2になります。

このように、見出しレベルを文章の構造に合わせて適切に使用すれば、SEO的にもユーザーにも読みやすくわかりやすい記事になります。

文章を書き終えてからでも良いので、見出しはつけておきましょう。

素早く見出しブロックを追加する

おまけとして、もう一つ見出しを追加する方法をお教えします。

マークダウン記法で見出しを挿入する(アニメーション)
シャープ(#)と半角スペースを入力して見出しに変換する様子

挿入したい見出しレベルと同じ数の半角シャープ(#)を入力した後、半角スペースを入れれば、見出しブロックを簡単に追加できます。

これは「Markdown(マークダウン)記法」といい、文章の構造を簡単に表記するものです。

記述入力内容挿入されるブロック
半角シャープ+半角スペース「H1」レベルの見出し
## 半角シャープ2つ+半角スペース「H2」レベルの見出し
### 半角シャープ3つ+半角スペース「H3」レベルの見出し
#### 半角シャープ4つ+半角スペース「H4」レベルの見出し
##### 半角シャープ5つ+半角スペース「H5」レベルの見出し
##### 半角シャープ6つ+半角スペース「H6」レベルの見出し
Markdown記法で挿入される見出しブロック

Gutenbergはこれに対応しており、見出しの他にリストなども自動的に変換してくれます。

これなら、ブロックをわざわざメニューから選択する必要がなく、素早く執筆できます。覚えておいて損はないでしょう。

他のテキストエディタソフトで、予めMarkdown記法を使って執筆しておけば、コピーペーストしたときに自動的に変換してくれて便利です。

テキストエディタソフトをコピーしてWordPressにペースト(アニメーション)

WordやGoogleドキュメントなどに原稿を書く際も、予め見出しを設定しておきましょう。

GoogleドキュメントからWordPressにコピーペースト(アニメーション)
GoogleドキュメントからWordPressにコピーペーストすると、見出しブロックに自動変換されました。

そうすれば、コピーペーストしたとき、自動的に見出しブロックへ変換してくれます。
便利ですから、原稿を依頼する際は、見出しを設定するよう伝えておきましょう。

リストブロック

リストブロックアイコン

リストブロックは、箇条書きに使うブロックです。

見出しや段落ブロックと同じく、文字装飾が可能です。

リストブロックで編集できる部分

追加方法

リストブロックの追加方法(アニメーション)
  1. 空白のブロックに表示される、右下のプラスボタンをクリックします。
  2. リスト」を検索して選びます。
  3. 追加されました。
画面左上のプラスボタンからリストブロックを追加(アニメーション)
画面左上のプラスボタンからでも可能です。
リストの改行と追加(アニメーション)
  • Enterキーでリストの項目を追加します。
  • Shift+Enterで項目内を改行します。

ブロックの変換方法

記述済みの段落ブロックを、リストに変換する方法もあります。

1つの段落ブロックに複数行ある場合

1つのブロックに複数行ある場合
1つの段落ブロックをリストブロックに変換(アニメーション)
  1. 何行も記述している一つのブロックをクリックして選択します。
  2. 左上の「¶」マーク(ブロックタイプまたはスタイルを変更)をクリックします。
  3. リスト」をクリックします。
  4. 1行が1項目のリストになります。

複数ブロックの場合

複数のブロックを、一つのリストブロックへ変換もできます。

複数の段落ブロック
複数の段落ブロックをリストブロックに変換(アニメーション)
  1. リストにしたいブロックを複数選択します。
  2. 左上の「¶」マーク(ブロックタイプまたはスタイルを変更)をクリックします。
  3. リスト」をクリックします。
  4. 1ブロックが1項目のリストに変換されます。

番号付きリスト

番号付きリストへの変換(アニメーション)
番号付きリストに変換するボタン

現在選択中の黒丸リストアイコンの右にある、番号が入ったリスト(番号付きリストに変換)をクリックで、番号リストになりました。
黒丸リストアイコン(箇条書きリストに変換)をクリックすれば、箇条書きに戻せます。

番号付きリスト設定

右メニューバーの設定で、連番を任意の番号から開始したり、昇順から降順へ変更できます。

番号付きリストの設定変更(アニメーション)
実際の番号付きリスト設定の表示

入れ子

左から5番目にあるアイコン(リスト項目をインデント)をクリックで、入れ子になります。

リスト項目をインデント
リスト項目をインデントボタン

左から4番目にあるアイコン(リスト項目のインデントを戻す)をクリックすれば、入れ子を解除します。

リスト項目のインデントを解除
リスト項目のインデントを戻す
インデントと一部のみ番号リストへの変換(アニメーション)

番号付きリストでもできます。
特定のインデント階層だけを、番号付きか箇条書きに変換できます。

素早くリストブロックを追加する

リストもMarkdown記法が使用できます。

Markdown記法でリストを追加(アニメーション)
記述入力内容挿入されるブロック
半角アスタリスク+半角スペース箇条書きリスト
– 半角ハイフン+半角スペース箇条書きリスト
1. 半角1+半角ピリオド+半角スペース番号付きリスト
リストのMarkdown記法

開始番号が「1」以外の数字だと、番号付きリストブロックには変換されません。
「1」以外が開始番号の番号付きリストをMarkdown記法で作成するなら、他のテキストエディターソフトで入力したものをコピーペーストしましょう。

「5. 」や「9. 」を入力しても番号付きリストにならない(アニメーション)
試しに「5. 」や「9. 」から開始しても、段落ブロックのままです。番号付きリストになりません。
他のテキストエディターを使えば、開始番号が「1」以外でも番号付きリストブロックに変換される(アニメーション)
他のテキストエディターでMarkdown記法を記述しコピーペーストすれば、開始番号が「1」以外でも番号付きリストのブロックに変換されます。

見出しと同じく、WordやGoogleドキュメント等からのコピーペーストでの自動変換にも対応しています。

Googleドキュメントで記述したリストをWordPressにコピーペーストすれば、リストブロックに変換される(アニメーション)
WordやGoogleドキュメント等でリストを設定しておけば、見出しと同じくコピーペーストで自動変換されます。

以上、Gutenbergでよく使う「見出し」や「リスト」ブロックの使い方を解説しました。

次回は、「画像」ブロックを紹介しましょう。

WordPressレクチャーシリーズ一覧

「その他」の関連記事


新着記事