広告 WORDPRESS

AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

ブロガー7年目のあかね猫です

当ブログでも愛用中の人気WordPressテーマ「ACTION AFFINGER6」における…

サイドバーの余白サイズ

のカスタマイズ設定方法について、ブログ初心者さん向けに1からわかりやすく解説していきます

 



 

まず、AFFINGER6における「サイドバー」とは、デフォルトの状態では…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-01

↑ このようになっており、これらの「ウィジェット」を改めて作り直し、またその色やデザインなどをカスタマイズすると…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-02

↑ 例えばこのようなイメージに変更できます

 

補足

上記のような「サイドバーウィジェットの作り方・消し方、基本的なカスタマイズ方法」については、別途こちらで徹底解説しています ↓

AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】
AFFINGER6「サイドバーウィジェット」の作り方・消し方&カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

続きを見る

 

サイドバーを初期状態から何も変えていない場合、まず上記の記事から見て頂くのがおすすめです

上記の記事では、「検索フォーム」のカスタマイズ方法もあわせて解説しています

 

 

これで一見スッキリした印象に変わりましたが、ただよく見ると、「余白のバランスが狭い」のが気になる方もいるんじゃないかなと

少なくとも自分は(超)気になる…

 

今回ご紹介する「サイドバー余白」のカスタマイズを行うことで、例えば…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 top-03

↑ このように、「自然な余白バランス」に整えることが可能です🐥(数分でおわります!)

ということで、さっそく見ていこー!

 

AFFINGER6「サイドバーの余白サイズ」カスタマイズ設定方法【ワードプレスブログ完全初心者ガイド】

WordPress ヘッダー c-01

注意

当ブログガイドは、WordPressの編集エディタが「グーテンベルグ」ではなく…

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数も膨大であることから「情報もググりやすい」ので断然おすすめです)

 

そのため、お手元のWordPress環境が…

  • 無料プラグイン「Classic Editor」を有効化していない!
  • 代わりに、AFFINGERに付属の「Gutenbergプラグイン2」を有効化している!

という状態だと、画面のデザインや設定方法が(当ページの内容と)異なる可能性がありますのでご注意ください

 

▼ 「Classic Editor」を有効化する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > 新規追加 をクリック
  2. 右上の検索フォームに Classic Editor と入力し、表示された「Classic Editor」の インストール > 有効化 を順にクリック 

▼ 「Gutenbergプラグイン2」を停止する手順 ▼

  1. WordPress管理画面の左側一覧から、 プラグイン > インストール済みプラグイン をクリック
  2. 表示された一覧のなかから、「Gutenbergプラグイン2」の「無効化」をクリック
 

関連

「クラシックエディタとグーテンベルグってなに…?」という場合は、こちらで1から解説しています ↓ ※重要です

WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド【2023年】
WordPressクラシックエディタとグーテンベルグとは?プラグイン「Classic Editor」の導入方法まで初心者向けに徹底ガイド

続きを見る

 

まずは、WordPress管理画面の左側一覧から…

外観 > ウィジェット

をクリックします

ウィジェット設定画面が開けたら、画面の「左側」エリアから…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-01-a

↑「テキスト」というボックスのタブを開き…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-01-b

↑ このように、ウィジェットの設置先として「サイドバーウィジェット」を選択してから、「ウィジェットを追加」ボタンをクリックしましょう

この「テキスト」っていうボックスを、サイドバーの「余白」として反映されるように設定していくよ!
 

すると、今度は同じウィジェット設定画面の「右側」エリアにある…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-a

↑「サイドバーウィジェット」という場所に、このように「テキスト」ウィジェットが自動で追加されるので、まずは…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-b

↑ こちらの「テキスト」というタブをクリックすることで、これから行う(サイドバーに余白を作るための)入力の形式を、「ビジュアル」から「テキスト」というモードに切り替えておきます

 

関連

「ビジュアルモードとテキストモードってなに…?」という場合は、こちらをどうぞ ↓

WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ
WordPress「ビジュアル・テキスト」の違いとは?使い分けのポイントまとめ【ワードプレスブログ完全初心者ガイド】

続きを見る

 

「テキスト」タブをクリックしたら…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-c

↑ このように、すぐ下の本文欄に…

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

というコードを、そのまま貼り付けましょう

「ビジュアル」モードのまま貼り付けないように、気をつけよう!
 

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

 

ということで、上記のコードを貼り付けたら「保存」ボタンを忘れずにクリックしましょう

 

あとは、この「余白」のために作成した「テキスト」ウィジェットを…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-d

↑ このように、余白を作りたい任意の箇所にドラッグ&ドロップで(順番を)並び替えることで…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-02-e

↑ 今回の例では、サイドバーエリアの最上部に「余白スペース」ができました🐣

実際の画面上で反映されない場合は、コードを貼りつけた後に「保存」ボタンを忘れずにクリックしよう!
 

今回は例としてもう1つ、【ブログ内検索】と【カテゴリー】というウィジェットの間にも、同様に「余白スペース」を作ってみようと思います

 

先ほどとまったく同じ流れで、「テキスト」というウィジェットを「サイドバーウィジェット」に追加し、先ほどのコードを「テキスト」内の本文欄に貼りつけ「保存」をクリックしたら…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-03-a

↑ このように、「テキスト」というウィジェットを「検索」と「カテゴリー」の間に(ドラッグ&ドロップで)入れてあげればOK

繰り返しだけど、コードを貼ったら「保存」ボタンを忘れずに!
 

今回の例では、最終的に…

AFFINGER6「サイドバーの余白」を広くするカスタマイズ設定方法 1-03-b

↑ このような余白バランスに、サイドバーエリアをカスタマイズできました🐥

 

 

人気記事

 

各章のTOPページを【ブックマーク】などしておくと、迷わずスムーズに進められます

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

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

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

 
プロフィールカード bg-01
プロフィールカードアイコン main-02

あかね猫

専業ブロガー7年目 / 元アパレル(歴10年)/ 2024年からYouTubeも本格的に始めました!(旅行系チャンネル)

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS