ワードプレスのコンテンツで「余白」と「区切り」を追加！。当記事では、ブロックエディターを用いて解説します。今回は、ワードプレスのコンテンツで「余白」と「区切り」を追加！について書いていきます。
小説やレポートなどで長文記事を書く場合、見出しが複数入る場合があります。そのような時に、次の見出しの間と最後に「余白」や「区切り」を入れると、まとまりが分かりやすくなるのでやってみて下さい。
| 結論を先に話ししておきます |
| ワードプレスで文章を書いていると、改行を入れたつもりなのに文章と文章の間の空白が「広すぎる」もしくは「狭すぎる」と感じたことはないでしょうか。文章の区切り次第では、コンテンツの見やすさは大きく変わります。
ユーザーにとってコンテンツは、見やすい方が良いに決まっています。これらは、ユーザビリティの向上にも繋がってきます。文章を書いたら一度自分でページを開いてみて、文章と文章の間をチェックしてみるのも良いかも知れません。
当記事では、ブロックエディターの「スペーサー」と「区切り」のブロックを用いて、余白と区切りを設定していきます。余白と区切りを設定することで、文書自体も読みやすくなります。一度真似してやってみて下さい。
以前投稿した下記の記事にも目を通して貰えると幸いです。 |
目次はコチラ
【ブロックエディターとは(動画付き)】
ブロックエディターは、ブロックシステムを採用し、コンテンツ同士を組み合わせ、整形しながら組んでいきます。ブロックエディターは、別の名を「Gutenberg/グーテンベルグ」と言います。
ブロックエディターは、Webサイトやブログなどにリッチでフレキシブルなレイアウトを作成できるようデザインされているのが特徴と言えるでしょう。コンテンツは、ブロックユニットとして作成します。
| ブロックエディターのブロックは「段落」「見出し」「メディア」「埋め込みオブジェクト」など、全てをコンポーネントとして扱い、双方に於いて、コンテンツを作成し、ワードプレスのデータベース内に保存します。 |
ではここで動画を視聴してみて下さい。題して「【2021年版】WordPressブロックエディターの使い方 基本編」です。
ブロックエディターの設定
この章では、ブロックの「スペーサー」と「区切り」を用いて作成していきますが、その前に、ブロックエディターとして設定されていない方は、下記の図解を参考に設定していきましょう。
では初めに、現在に於いて、クラシックエディターで記事を書いている場合、ブロックエディターに切り替える必要があります。まずは、ブロックエディターに設定する為のやり方を解説していきます。
- 「黄色枠」で囲まれている「設定」にマウスを移動するとプルダウンが表示されます。次に「桃色枠」で囲まれている「投稿設定」を開きましょう。
- 次の画面で「オレンジ色枠」で囲まれている「ブロックエディター」を選択し、左下にある変更を保存を押します。
- ブロックエディターを選択後「投稿」もしくは「固定ページ」の新規追加を開くと、下記のような画面が表示されます。
| ブロックエディターの新規画面を見ると、クラシックエディターの新規画面とは違って見えると思います。 |
【ブロックのスペーサーを追加(動画付き)】
この章から、上記同様、図解を用いながらブロックの「スペーサー」を使って、文章と文章の間に余白を設ける設定をしていきます。やり方は至って簡単なので誰でも直ぐに覚えられるはずです。
では先に、動画を視聴してみて下さい。題して「【WordPressスペーサーブロックの使い方】ブロック間・行間の余白の高さの設定」です。
- まず初めに「投稿」「固定ページ」のどちらでも構わないので新規追加を開きます。次に「桃色枠」で囲まれているように「見出し」となる文章を書きましょう。ここでは「アフィリエイト」としています。
- では、見出しとなる文章を「赤色枠」で囲まれているように選択した状態にし「緑色枠」で囲まれている「36」にしてみました。すると、次の図解を参照。
- 上記の図解で36に設定すると「黄色枠」で囲まれている見出しの文章が大きくなりました。
- では次に、見出しの文章から数えて2回キーボードの「Enter/エンター」を押し「オレンジ色枠」で囲まれている箇所に文章を入れていきます。ここでは「テストテストテスト・・・」としています。
文章を書いたら、見出しと文章の間の「水色」で表示されている「縦線」の箇所にカーソルを表示させ「紫色枠」で囲まれている「+」を押して下さい。
- +を押すと、ブロックの一覧が表示されます。その中の「水色枠」で囲まれている「スペーサー」を押しましょう。
- スペーサーを開くと、カーソルを表示させていた位置に「赤色枠」で囲まれているように「余白」を表示させることができました。
- では一度「黄色枠」で囲まれている「プレビュー」を開いてみましょう。すると「紫色枠」で囲まれているようにプルダウンが開くので、その中の「オレンジ色枠」で囲まれている「新しいタブでプレビュー」を開きます。
- トップページから見た画面です。見出しの文章と文章の間の「水色枠」で囲まれている箇所が設定した「余白」です。
- 今度は、余白をもう少し広げたいので「水色枠」で囲まれている「丸いボッチ」を下に移動もしくは「黄色枠」で囲まれている「数値」を大きくしてみましょう。図解では「300」と設定してみました。
次に「オレンジ色枠」で囲まれている「プレビュー」を開いてみましょう。すると「赤色枠」で囲まれているようにプルダウンが開くので、その中の「緑色枠」で囲まれている「新しいタブでプレビュー」を開きます。
- トップページから見た画面です。見出しの文章と文章の間の「桃色枠」で囲まれている箇所が設定した「余白」です。
| 注意 |
| キーボードの「Enter/エンター」を複数回押しても余白は広がりません。その為、このような「スペーサー」と言うブロックを使って余白を広げていく訳です。 |
【ブロックの区切りを追加(動画付き)】
区切りの使い方に関しても、同じブロックエディターを使用します。区切りは、文章と文章の間に線を引くと言うものです。スペーサーは、余白を入れると言うものでしたが、区切りは、線を引くものです。
では先に、動画を視聴してみて下さい。題して「WordPressで余白や区切りの挿入方法【WordPressの使い方/初心者向け】」です。「1分34秒辺り」から「区切り」に関する動画が始まります。
- まず初めに「投稿」「固定ページ」のどちらでも構わないので新規追加を開きます。開いたら先に「オレンジ色枠」で囲まれているように予め改行を入れ、次の文章を書いておきましょう。
- 次に「緑色」で表示されている「縦線」のところにカーソルを表示させましょう。表示させたら「赤色枠」で囲まれている「+」を開いて下さい。
- すると、ブロックの一覧が表示されます。ブロックの中の「紫色枠」で囲まれている「区切り」を押しましょう。
- 区切りを押すと「桃色枠」で囲まれているように「横長の棒線」が表示されたかと思います。この棒線は、デフォルトの線です。
- では一度「水色枠」で囲まれている「プレビュー」を開いてみましょう。すると「黄色枠」で囲まれているようにプルダウンが開くので、その中の「オレンジ色枠」で囲まれている「新しいタブでプレビュー」を開きます。
- トップページから見た画面です。文章と文章の間に「紫色枠」で囲まれているように短い横棒が表示されましたが、編集画面では長かったはずなのに、トップページから見たら短くなっています。
これは冒頭でも書いているようにデフォルトだからです。では次の図解で、横棒を長く編集してみましょう。
- では、デフォルトとして表示されていた横線を選択し「水色枠」で囲まれている「幅広線」を押してみましょう。すると「赤色枠」で囲まれているようにデフォルトと同じ横線が表示されています。
- トップページから見た画面です。「桃色枠」で囲まれているように横線が文章と同じ幅で表示されていることが分かります。幅広線は、明確に区切りたい場合に用いると良いかも知れません。
- 次に「緑色枠」で囲まれている「ドット」を選択してみて下さい。すると「黄色枠」で囲まれているように「・・・」が表示されました。
- トップページから見た画面です。「オレンジ色枠」で囲まれているように線と言うより、一つの「・」が表示されているだけです。ドットは、控えめに区切りたい場合に用いると良いかも知れません。
| 区切りでは「デフォルト」「幅広線」「ドット」の3つしかないことが分かります。幅広線は「明確に区切りたい」、ドットは「控えめに区切りたい」など、分けて表示させるのも良いかと思います。 |
今回は以上となります。ワードプレスのコンテンツで「余白」と「区切り」を追加！については理解して頂けたでしょうか。余白も区切りもそれほど難しく感じなかったかも知れません。いろいろ触ってみて下さい。
以前投稿した下記の記事にも目を通して貰えると幸いです。
