専業ブロガー５年目のあずきです🐥
WordPressブログにおける…
「段落間の余白スペース」を個別に調整する方法
について、ブログ初心者さん向けに１からわかりやすく解説していきます
具体的には、例えば…
↑ このような文章を…
↑ このように「段落」間の余白スペースを広げたり、またその余白の「大きさ」を…
↑ 例えばこのように、少しだけ大きく調整するといった「任意のサイズにカスタマイズする方法」です
注意
ご紹介する内容は、いずれもWordPressの編集エディタが…
クラシックエディタ
の前提となります。「グーテンベルグ」をお使いの方はご了承ください
「クラシックエディタとグーテンベルグってなに…？」という場合や、「クラシックエディタに切り替える方法（一瞬です！）」はこちらをどうぞ ↓ ※重要です
-
WordPressクラシックエディタとグーテンベルグとは？プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
続きを見る
補足
ご紹介する手順は、基本的には…
「WordPressテーマ」を問わず活用できる、汎用的なカスタマイズ方法
になります
ただしテーマによっては、「実際の反映などに多少の違いが生じる可能性」もゼロではありませんのでご了承ください
参考までに当ガイドでは、代表的な人気WordPressテーマ「ACTION AFFINGER6」を使用しています
-
【2023年】WordPressテーマ選びのチェック項目７つ＋超重要な「核心」１つ【失敗しない本当におすすめなテーマの選び方】
続きを見る
ということで、さっそく見ていきましょー🐥
【2022年】WordPress「段落間の余白」を個別に調整する方法：クラシックエディタ版【ワードプレスブログ「完全初心者」ガイド／第７章／No.6】
WordPressの投稿編集の画面を開いたら、今回は一例として…
↑ こちらの「段落」間に、お好きなサイズの「余白スペース」を入れていきます
関連
「そもそも段落ってなに…？」という場合は、こちらをどうぞ ↓
-
【2022年】WordPress「段落・改行」の違いとは？作り方＆使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド／第７章／No.5】
続きを見る
まずは（投稿編集の）画面の右上から…
↑「テキスト」タブをクリックすることで、編集モードを「ビジュアル」から「テキスト」モードに切り替えましょう
関連
「ビジュアルモードとテキストモードってなに…？」という場合は、こちらから ↓ ※重要です
-
【2022年】WordPress「ビジュアル・テキスト」の違いとは？使い分けのポイントまとめ【ワードプレスブログ「完全初心者」ガイド／第７章／No.2】
続きを見る
「テキスト」モードに切り替えたら、余白スペースを入れたい「段落」間に…
↑ このように「Enter」キーで「行」を１つ空け、その空いた行に…
<div style="padding-bottom: 2px;"> </div>
というコードを…
↑ このように、丸ごと貼り付けます
なお、このコード内の 2 という数字をお好きな数値（例：1,2,3…）に置き換えることで、「余白のサイズ」を自由にカスタマイズすることも可能です
ということで、プレビュー画面上で見てみると…
↑ このように、「段落」間に余白スペースができていますね🐥
つづいて、さきほど貼りつけたコードを、例えば…
<div style="padding-bottom: 20px;"> </div>
という風に、数値の部分を 2 → 20 へ変更してみると…
↑ このように、「余白のサイズ」が若干広がりました🐣
補足
お手元の画面が、もしも今回の画像例と「微妙に違っている」という場合…
プラグイン「Advanced Editor Tools」
の設定が影響している可能性があります
参考までに、当ガイドで使用している設定例はこちらをどうぞ ↓
-
【2023年】Advanced Editor Toolsのおすすめな設定方法＆使い方を30枚超の画像付きで徹底解説【WordPressのエディタ拡張プラグイン／クラシックエディタ版】
続きを見る
また…
今回ご紹介した「余白のカスタマイズ方法」は、記事の作成時はもちろんのこと、ほかにも例えば「サイドバーエリアの余白調整」などにも活用できます ↓
-
【2023年】AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド／第６章／No.9】
続きを見る
おしまい🐥
人気記事
各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます
あずきのワードプレスブログ「完全初心者」ガイド！
全８章の「総合TOP」ページです
