WORDPRESS

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

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

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

 

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

サイドバーの余白サイズ

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

 



 

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

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

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

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

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

 

関連

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

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

続きを見る

 

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

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

 
 

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

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

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

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

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

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

▼ ACTION AFFINGER6の「購入・導入手順」はこちらから ▼

【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】
【2022年12月】AFFINGER6の購入・導入手順を1から徹底解説。子テーマまで【ワードプレスブログ「完全初心者」ガイド】

続きを見る

  • 「ACTION AFFINGER6」が実際に使用できるようになるまでの ”一連の手順” を、
    画像付きでまるっと解説しています
  • 作業そのものは、正味【15分程度】でおわります(子テーマまで含めて)

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

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2021年発表Infotop Affidemy

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

WordPress ヘッダー c-01

注意

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

クラシックエディタ

の前提で解説しています(圧倒的に使いやすく、またユーザー数の多さから「情報もググりやすい」のでおすすめです)

 

そのため、使用されているWordPress環境が…

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

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

 

なお「Classic Editor」の有効化手順は、下記のステップとなります(一瞬です)

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

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

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

続きを見る

 

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

外観 > ウィジェット

をクリックします

 

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

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

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

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

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

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

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

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

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

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

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

 
 

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

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

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

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

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

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

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

 

関連

上記のコードは、今回の「サイドバー」エリアだけでなく、通常の「記事作成」時などの余白カスタマイズにも活用できる方法です ↓

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

続きを見る

 

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

 

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

 
 

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

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

-WORDPRESS