みなさまこんにちは。弊社でもウェブサイト制作によく使用しているCMS、WordPressの使い方を何回かに分けてお伝えしております。
今回は、WordPressのエディター「Gutenberg(グーテンベルグ)」でよく使う「見出し」と「リスト」ブロックを紹介しましょう。
見出しブロック
![見出しアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon_headline.png)
見出しで内容を区切ることで、ユーザーにもSEO的にも読みやすい記事になります。
長くなる時は、必ず入れましょう。
見出しブロックも段落ブロックと同じく、フォントサイズや色の変更、文字の装飾が可能です。
![見出しブロックで段落ブロックと同じ編集メニュー(ピンクの太枠)](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-edlit.png)
追加方法
![見出しボタンを追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/SWZYgl5vOS-min.gif)
- 空白のブロックに表示されるプラスボタン(ブロックの追加)をクリックします。
- 「見出し」のブロックを検索して、クリックします。
- 追加されました。
![画面左上からの見出しブロック追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/0AeVURhTiC-min.gif)
ブロックの変換方法
入力した文字を、見出しに変換する方法もご紹介しましょう。
![「ブロックタイプまたはスタイルを変更」ボタンをクリック](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-chane-btn.png)
選択しているブロックを、別のブロックタイプに変換します。
![ブロックの変換で「見出し」を選択する](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-chane-choice-1024x736.png)
![見出し変換後のブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-change-block.png)
![見出しアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/icon-headline.png)
![見出しブロックへの変換方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/OnTAEr8PH4-min.gif)
見出しレベル
![見出しレベル](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-level-icon.png)
ブロックツールバーの「H2」とは「見出しレベル」というものです。
![見出しレベルの選び方(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/o99euHb2uQ-min.gif)
「H1」から「H6」まで選べるようになっています。
見出しレベルは、SEOを意識して記事を書くなら、大事なところです。
詳しく解説いたします。
![H1(タイトル)がいちばん見出しレベルが高く、H6まで下がるといちばん低い。](https://kotatsu.info/blog/wp-content/uploads/2021/08/headline-level-explanation.png)
「見出しレベル」とは、階層段階のことです。
Hの後ろについている数字が小さければ小さいほど、見出しレベルが高くなります。
基本的に、H1はページタイトルです。あとは内容に合わせて、2〜6の昇順で見出しレベルを設定します。
Wordを使用している方なら「アウトラインレベルと同じ」といえば、ピンとくるかもしれません。
見出しレベルの付け方
誰でも簡単!プロレベル!動画広告のデザイン作成方法の記事を元に、例を作成しました。
見出しレベルがないバージョン
![見出しレベルをつけていないバージョン](https://kotatsu.info/blog/wp-content/uploads/2021/08/ex-headline-article-290x1024.png)
見出しレベルをつけたバージョン
![見出しレベルをつけたバージョン](https://kotatsu.info/blog/wp-content/uploads/2021/08/ex-headline-article-after-402x1024.png)
目次のリストにすると、構造がわかりやすいでしょう。
- H1:動画広告を作成するコツ
- H2:サンプル動画
- H3:シーン1の「構図」
- H3:シーン1の「デザイン」
- H3:全シーン完成!
- H2:著作権違反は厳禁!
- H2:サンプル動画
- H1は記事のタイトルに使用しているため、H2から始めます。
- 「サンプル動画」は記事タイトルの下にある見出しであるため、H2に設定しました。
- 「サンプル動画」の下にある、『シーン1の「構図」』と『シーン1の「デザイン」』「全シーン完成!」は、「サンプル動画」に掛かる内容であるため、H2の下のH3にします。
- 「著作権違反は厳禁!」は、「サンプル動画」とは別の話であるため、同レベルのH2になります。
このように、見出しレベルを文章の構造に合わせて適切に使用すれば、SEO的にもユーザーにも読みやすくわかりやすい記事になります。
文章を書き終えてからでも良いので、見出しはつけておきましょう。
素早く見出しブロックを追加する
おまけとして、もう一つ見出しを追加する方法をお教えします。
![マークダウン記法で見出しを挿入する(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/JJMgJ4M7KW-min.gif)
挿入したい見出しレベルと同じ数の半角シャープ(#)を入力した後、半角スペースを入れれば、見出しブロックを簡単に追加できます。
これは「Markdown(マークダウン)記法」といい、文章の構造を簡単に表記するものです。
記述 | 入力内容 | 挿入されるブロック |
---|---|---|
# | 半角シャープ+半角スペース | 「H1」レベルの見出し |
## | 半角シャープ2つ+半角スペース | 「H2」レベルの見出し |
### | 半角シャープ3つ+半角スペース | 「H3」レベルの見出し |
#### | 半角シャープ4つ+半角スペース | 「H4」レベルの見出し |
##### | 半角シャープ5つ+半角スペース | 「H5」レベルの見出し |
##### | 半角シャープ6つ+半角スペース | 「H6」レベルの見出し |
Gutenbergはこれに対応しており、見出しの他にリストなども自動的に変換してくれます。
これなら、ブロックをわざわざメニューから選択する必要がなく、素早く執筆できます。覚えておいて損はないでしょう。
他のテキストエディタソフトで、予めMarkdown記法を使って執筆しておけば、コピーペーストしたときに自動的に変換してくれて便利です。
![テキストエディタソフトをコピーしてWordPressにペースト(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/6jlV0tKPUV-min.gif)
WordやGoogleドキュメントなどに原稿を書く際も、予め見出しを設定しておきましょう。
![GoogleドキュメントからWordPressにコピーペースト(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/yBdYX8nrBX-min-1023x471.gif)
そうすれば、コピーペーストしたとき、自動的に見出しブロックへ変換してくれます。
便利ですから、原稿を依頼する際は、見出しを設定するよう伝えておきましょう。
リストブロック
![リストブロックアイコン](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-icon.png)
リストブロックは、箇条書きに使うブロックです。
見出しや段落ブロックと同じく、文字装飾が可能です。
![リストブロックで編集できる部分](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-edlit.png)
追加方法
![リストブロックの追加方法(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/xg8o5OHeAp-min.gif)
- 空白のブロックに表示される、右下のプラスボタンをクリックします。
- 「リスト」を検索して選びます。
- 追加されました。
![画面左上のプラスボタンからリストブロックを追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/1otEAcAhBa-min.gif)
![リストの改行と追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Ms7eAqio9c-min.gif)
- Enterキーでリストの項目を追加します。
- Shift+Enterで項目内を改行します。
ブロックの変換方法
記述済みの段落ブロックを、リストに変換する方法もあります。
1つの段落ブロックに複数行ある場合
![1つのブロックに複数行ある場合](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-change-1block.png)
![1つの段落ブロックをリストブロックに変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/hI8xkz6lpg-min.gif)
- 何行も記述している一つのブロックをクリックして選択します。
- 左上の「¶」マーク(ブロックタイプまたはスタイルを変更)をクリックします。
- 「リスト」をクリックします。
- 1行が1項目のリストになります。
複数ブロックの場合
複数のブロックを、一つのリストブロックへ変換もできます。
![複数の段落ブロック](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-change-blocks.png)
![複数の段落ブロックをリストブロックに変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/znHWTKhoeM-min.gif)
- リストにしたいブロックを複数選択します。
- 左上の「¶」マーク(ブロックタイプまたはスタイルを変更)をクリックします。
- 「リスト」をクリックします。
- 1ブロックが1項目のリストに変換されます。
番号付きリスト
![番号付きリストへの変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/VSGOR9ZKxU-min.gif)
![番号付きリストに変換するボタン](https://kotatsu.info/blog/wp-content/uploads/2021/08/ordered-list-btn.png)
現在選択中の黒丸リストアイコンの右にある、番号が入ったリスト(番号付きリストに変換)をクリックで、番号リストになりました。
黒丸リストアイコン(箇条書きリストに変換)をクリックすれば、箇条書きに戻せます。
![番号付きリスト設定](https://kotatsu.info/blog/wp-content/uploads/2021/08/ordered-list-setting.png)
右メニューバーの設定で、連番を任意の番号から開始したり、昇順から降順へ変更できます。
![番号付きリストの設定変更(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/QNuY8sZfxk-min.gif)
入れ子
左から5番目にあるアイコン(リスト項目をインデント)をクリックで、入れ子になります。
![リスト項目をインデント](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-indent.png)
左から4番目にあるアイコン(リスト項目のインデントを戻す)をクリックすれば、入れ子を解除します。
![リスト項目のインデントを解除](https://kotatsu.info/blog/wp-content/uploads/2021/08/list-indent-clear.png)
![インデントと一部のみ番号リストへの変換(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/PyOzsw64TP-min.gif)
番号付きリストでもできます。
特定のインデント階層だけを、番号付きか箇条書きに変換できます。
素早くリストブロックを追加する
リストもMarkdown記法が使用できます。
![Markdown記法でリストを追加(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/Yw0KUjKK5a-min.gif)
記述 | 入力内容 | 挿入されるブロック |
---|---|---|
* | 半角アスタリスク+半角スペース | 箇条書きリスト |
– | 半角ハイフン+半角スペース | 箇条書きリスト |
1. | 半角1+半角ピリオド+半角スペース | 番号付きリスト |
開始番号が「1」以外の数字だと、番号付きリストブロックには変換されません。
「1」以外が開始番号の番号付きリストをMarkdown記法で作成するなら、他のテキストエディターソフトで入力したものをコピーペーストしましょう。
![「5. 」や「9. 」を入力しても番号付きリストにならない(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/qNqbJqSBBn-min.gif)
![他のテキストエディターを使えば、開始番号が「1」以外でも番号付きリストブロックに変換される(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/p0OW4sVwwj-min.gif)
見出しと同じく、WordやGoogleドキュメント等からのコピーペーストでの自動変換にも対応しています。
![Googleドキュメントで記述したリストをWordPressにコピーペーストすれば、リストブロックに変換される(アニメーション)](https://kotatsu.info/blog/wp-content/uploads/2021/08/7jh1eQ5i8S-min.gif)
以上、Gutenbergでよく使う「見出し」や「リスト」ブロックの使い方を解説しました。
次回は、「画像」ブロックを紹介しましょう。