WORDPRESS

【2022年】WordPress「段落間の余白」を個別に調整する方法:クラシックエディタ版【ワードプレスブログ「完全初心者」ガイド/第7章/No.6】

WordPress「段落間の余白」を個別に調整する方法:クラシックエディタ版【ワードプレスブログ「完全初心者」ガイド/第7章/No.6】
 

専業ブロガー5年目のあずきです🐥

 

WordPressブログにおける…

「段落間の余白スペース」を個別に調整する方法

について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

具体的には、例えば…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 top-01

↑ このような文章を…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 top-02

↑ このように「段落」間の余白スペースを広げたり、またその余白の「大きさ」を…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 top-03

↑ 例えばこのように、少しだけ大きく調整するといった「任意のサイズにカスタマイズする方法」です

ほどよい余白を作ることで、視覚的にぐんと見やすいページになるよね!
 

注意

ご紹介する内容は、いずれもWordPressの編集エディタが…

クラシックエディタ

の前提となります。「グーテンベルグ」をお使いの方はご了承ください

 

「クラシックエディタとグーテンベルグってなに…?」という場合や、「クラシックエディタに切り替える方法(一瞬です!)」はこちらをどうぞ ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】
WordPressクラシックエディタとグーテンベルグとは?Classic Editorの導入方法まで【ワードプレスブログ完全初心者ガイド/第4章/No.6】

続きを見る

 

補足

ご紹介する手順は、基本的には…

「WordPressテーマ」を問わず活用できる、汎用的なカスタマイズ方法

になります

 

ただしテーマによっては、「実際の反映などに多少の違いが生じる可能性」もゼロではありませんのでご了承ください

 

参考までに当ガイドでは、代表的な人気WordPressテーマ「ACTION AFFINGER6」を使用しています

WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】
【2023年】WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

続きを見る

 

ということで、さっそく見ていきましょー🐥

 



 

【2022年】WordPress「段落間の余白」を個別に調整する方法:クラシックエディタ版【ワードプレスブログ「完全初心者」ガイド/第7章/No.6】

WordPress ヘッダー b-01

 

WordPressの投稿編集の画面を開いたら、今回は一例として…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-01

↑ こちらの「段落」間に、お好きなサイズの「余白スペース」を入れていきます

 
 

まずは(投稿編集の)画面の右上から…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-02

↑「テキスト」タブをクリックすることで、編集モードを「ビジュアル」から「テキスト」モードに切り替えましょう

 
 

「テキスト」モードに切り替えたら、余白スペースを入れたい「段落」間に…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-02-b

↑ このように「Enter」キーで「行」を1つ空け、その空いた行に…

<div style="padding-bottom: 2px;"> </div>

というコードを…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-02-c

↑ このように、丸ごと貼り付けます

コードはExcelとかに貼っておいて、いつでも使えるようにしておくと便利だよ!
 

なお、このコード内の 2 という数字をお好きな数値(例:1,2,3…)に置き換えることで、「余白のサイズ」を自由にカスタマイズすることも可能です

 

ということで、プレビュー画面上で見てみると…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-02-d

↑ このように、「段落」間に余白スペースができていますね🐥

反映されない場合は、「テキスト」モードじゃなく「ビジュアル」モードのままコードを貼っちゃってないか確認しよう!
 

つづいて、さきほど貼りつけたコードを、例えば…

<div style="padding-bottom: 20px;"> </div>

という風に、数値の部分を 2 → 20 へ変更してみると…

WordPress「段落 (テキスト) 間の余白スペース」を自由にカスタマイズする設定方法【クラシックエディタ版】 1-03

↑ このように、「余白のサイズ」が若干広がりました🐣

そのときどきで、余白スペースを「個別」に調整できるのは便利だよね!
 

補足

お手元の画面が、もしも今回の画像例と「微妙に違っている」という場合…

プラグイン「Advanced Editor Tools」

の設定が影響している可能性があります

 

参考までに、当ガイドで使用している設定例はこちらをどうぞ ↓

プラグイン「Advanced Editor Tools」のおすすめ設定方法:クラシックエディタ版【ワードプレスブログ完全初心者ガイド/第4章/No.8】
【2023年】プラグイン「Advanced Editor Tools」のおすすめ設定方法:クラシックエディタ版【ワードプレスブログ完全初心者ガイド/第4章/No.8】

続きを見る

 

また…

 

今回ご紹介した「余白のカスタマイズ方法」は、記事の作成時はもちろんのこと、ほかにも例えば「サイドバーエリアの余白調整」などにも活用できます ↓

AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第6章/No.10】
【2022年】AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ「完全初心者」ガイド/第6章/No.10】

続きを見る

 

おしまい🐥

 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

-WORDPRESS