ブロガー7年目のあかね猫です
当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…
サイドバーの余白サイズ
のカスタマイズ設定方法について、ブログ初心者さん向けに1からわかりやすく解説していきます
まず、AFFINGER6における「サイドバー」とは、デフォルトの状態では…
![AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-01](https://azuki-rinrin.com/wp-content/uploads/2022/11/affinger-sidebar-margin_top-01_2022-1116.png)
↑ このようになっており、これらの「ウィジェット」を改めて作り直し、またその色やデザインなどをカスタマイズすると…
![AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-02](https://azuki-rinrin.com/wp-content/uploads/2022/11/affinger-sidebar-margin_top-02_2022-1116.png)
↑ 例えばこのようなイメージに変更できます
補足
上記のような「サイドバーウィジェットの作り方・消し方、基本的なカスタマイズ方法」については、別途こちらで徹底解説しています ↓
-
AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】
続きを見る
サイドバーを初期状態から何も変えていない場合、まず上記の記事から見て頂くのがおすすめです
上記の記事では、「検索フォーム」のカスタマイズ方法もあわせて解説しています
これで一見スッキリした印象に変わりましたが、ただよく見ると、「余白のバランスが狭い」のが気になる方もいるんじゃないかなと
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
今回ご紹介する「サイドバー余白」のカスタマイズを行うことで、例えば…
![AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-03](https://azuki-rinrin.com/wp-content/uploads/2022/11/affinger-sidebar-margin_top-03_2022-1116.png)
↑ このように、「自然な余白バランス」に整えることが可能です🐥(数分でおわります!)
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】
注意
当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…
クラシックエディタ
の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)
そのため、お手元のWordPress環境が…
- 無料プラグイン「Classic Editor」を有効化していない!
- 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!
という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください
▼ 「Classic Editor」を有効化する手順 ▼
- WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
- 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック
▼ 「Gutenbergプラグイン2」を停止する手順 ▼
- WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
- 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
関連
「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です
まずは、WordPress管理画面の左側一覧から…
外観 > ウィジェット
をクリックします
ウィジェット設定画面が開けたら、画面の「左側」エリアから…
↑「テキスト」というボックスのタブを開き…
↑ このように、ウィジェットの設置先として「サイドバーウィジェット」を選択してから、「ウィジェットを追加」ボタンをクリックしましょう
※2024年6月追記:現在は「サイドバー(中部)」という名称に変更されています
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
すると、今度は同じウィジェット設定画面の「右側」エリアにある…
↑「サイドバー(中部)」という場所に、このように「テキスト」ウィジェットが自動で追加されるので、まずは…
↑「テキスト」というタブをクリックすることで、これから行う(サイドバーに余白を作るための)入力の形式を、「ビジュアル」から「テキスト」というモードに切り替えておきます
関連
「ビジュアルモードとテキストモードってなに…?」という場合は、こちらをどうぞ ↓
-
WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】
続きを見る
「テキスト」タブをクリックしたら…
↑ このように、すぐ下の本文欄に…
<div style="padding-bottom: 20px;"> </div>
というコードを、そのまま貼り付けましょう
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
なお、このコード内の 20 という数字をお好きな数値(例:1,2,3…)に置き換えることで、「余白のサイズ」を自由にカスタマイズできます
ということで、上記のコードを貼り付けたら、「保存」ボタンを忘れずにクリックしましょう
あとは、この「余白」のために作成した「テキスト」ウィジェットを…
↑ このように、余白を作りたい任意の箇所にドラッグ&ドロップで(順番を)並び替えることで…
![AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-e](https://azuki-rinrin.com/wp-content/uploads/2022/11/affinger-sidebar-margin_1-02-e_2022-1116.png)
↑ 今回の例では、サイドバーエリアの最上部に「余白スペース」ができました🐣
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
今回は例としてもう1つ、【ブログ内検索】と【カテゴリー】というウィジェットの間にも、同様に「余白スペース」を作ってみようと思います
先ほどとまったく同じ流れで…
「テキスト」というウィジェットを「サイドバー(中部)」に追加し、先ほどのコードを「テキスト」内の本文欄に貼りつけ「保存」をクリックしたら…
↑ このように、「テキスト」というウィジェットを「検索」と「カテゴリー」の間に(ドラッグ&ドロップで)入れてあげればOK
![](https://azuki-rinrin.com/wp-content/uploads/2020/11/azuki-icon_sub-01_bg-transparent_20201123.png)
今回の例では、最終的に…
![AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-03-b](https://azuki-rinrin.com/wp-content/uploads/2022/11/affinger-sidebar-margin_1-03-b_2022-1116.png)
↑ このような余白バランスに、サイドバーエリアをカスタマイズできました🐥
あわせてどうぞ