WORDPRESS

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

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

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

 

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

「サイドバーウィジェット」の作り方&消し方、カスタマイズ設定方法

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

 



 

まず「サイドバーウィジェット」とは、サイドバー(ブログ右側の列)エリアに表示される…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 top-01-a

↓(設定後の一例)

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 top-01-b

上記の箇所ですね🐥

 

で、具体的には3つのステップで解説していきます

  1. デフォルトで表示されている「サイドバーウィジェット」の消し方
  2. 「サイドバーウィジェット」の作り方
    ※検索フォーム、カテゴリーを例に解説!
  3. 「サイドバーウィジェット」のカスタマイズ設定方法
    ※「余白スペース」の調整や、検索フォームのカスタマイズまで!
ということで、さっそく見ていこー!
 

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

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

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

続きを見る

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

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

公式:ACTION AFFINGER6

すごいもくじLITE

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

※2021年発表Infotop Affidemy

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

ステップ1:ACTION AFFINGER6にデフォルトで表示されている「サイドバーウィジェット」の消し方

WordPress ヘッダー b-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-1-01-a

↑「サイドバーウィジェット」というボックスがあるので、こちらのタブを開きましょう

 

すると、ACTION AFFINGER6では初期状態で…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-01-b

↑ このように、「ブロック」と呼ばれるウィジェットがサイドバーエリアに設置されており、これらのブロックが実際の画面上では…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-01-c

↑ このように、【検索フォーム】や【最近の投稿】【最近のコメント】といった各ウィジェットとして表示されている状態となります

 

ただ!

 

これらのデフォルトで入っている「ブロック」という形は正直わかりづらく、またデザイン面も微妙なので、一旦削除して「別の方法」で新たにセットする形がおすすめです

具体的には、下記の手順だよ!
 

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-01-d

↑「ブロック」というボックスのタブを開き、「削除」ボタンをクリックするだけ

 

この削除作業を、最初から入っているブロック3つとも行うことで…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-01-e

↑ このように、「サイドバーウィジェット」を一旦 ”空” の状態にできました

 

実際の画面上を見てみると…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-01-f

↑ サイドバーエリアから、デフォルトで表示されていた【検索フォーム】【最近の投稿】【最近のコメント】が削除されています

 

ただ…

 

この時点ではまだ、上画像のように【アーカイブ】【カテゴリー】の2つが、まだ消えずに残ってしまっていますね

ということで、この2つも削除していくよ!
 

この ”なぜか消えずに” 表示されている【アーカイブ】と【カテゴリー】は、実は「サイドバーウィジェット」ではなく…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-02-a

↑ その1つ下の、「スクロール広告用」というボックスのタブを開くと入っている…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-02-b

↑ こちらの2つの「ブロック」によって、表示されています

 

ということで、この2つのブロックも、先ほどとまったく同じ要領で…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-02-c

↑「ブロック」のタブを1個ずつ開き、「削除」ボタンをクリックして…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-02-d

↑「スクロール広告用」というエリアも、このように ”空” の状態にしましょう

 

これで、実際の画面を再度チェックしてみると…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-1-02-e

↑ サイドバーエリアが、完全に ”空” の状態になりました🐥

つづいて、この空になったサイドバーに、好きなウィジェットを設置していくよ!
 

ステップ2:ACTION AFFINGER6における「サイドバーウィジェット」の作り方【検索フォーム、カテゴリーを例に解説】

WordPress ヘッダー b-02

ステップ1と同じく、まずはWordPress管理画面の左側一覧から…

外観 > ウィジェット

をクリックします

 

ウィジェット設定画面が開けたら、今度はこの画面の「左側」から任意のウィジェットを追加していく形ですが、試しにまずは…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-01-a

↑ 左下の「検索」というボックスのタブを開きましょう

 

タブを開いたら、この「検索」ウィジェットの設置エリアとして…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-01-b

↑ このように「サイドバーウィジェット」を選択した状態で、「ウィジェットを追加」ボタンをクリックします

 

これで、(ステップ1でも触れていた)画面上部やや右側の…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-01-c

↑「サイドバーウィジェット」というボックスに、このように「検索」というウィジェットが自動で加わるので…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-01-d

↑ 任意の見出しタイトルを入力して、「保存」ボタンをクリックです

 

実際の画面上を見てみると…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-01-e

↑ このように「検索フォーム」が新たに表示され、またデザイン面もデフォルトの状態より良い感じになりました

色とか細かいデザインは、このあとの【ステップ3】でカスタマイズできるよ!
 

つづいて、もう1つ例として「カテゴリー一覧」のウィジェットも設置していきます🐥

 

同じく WordPress管理画面 > 外観 > ウィジェット の画面から、左側の…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-a

↑「カテゴリー」というボックスのタブを開き…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-b

↑ また「サイドバーウィジェット」を設置先として選択した状態で、「ウィジェットを追加」ボタンをクリックです

さっきの「検索フォーム」と同じ流れだね!
 

すると、さきほど同様に(画面上部やや右側の)…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-c

↑「サイドバーウィジェット」ボックス内に、このように「カテゴリー」というウィジェットが自動で追加されるので…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-d

↑ 任意の見出しタイトルを入力し、また表示設定を選択したうえで、「保存」ボタンをクリックするだけ

 

実際の画面をチェックしてみると…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-e

↑ さきほど設置した「検索フォーム」の下に、「カテゴリー一覧」のウィジェットが新たに追加されました

この「カテゴリー」も、初期状態よりデザインが断然良くなったね!
 

補足

これらのウィジェット(例:検索フォーム / カテゴリー)の「並び順」を変更したい場合は…

AFFINGER6「サイドバー・ウィジェット」の作り方&消し方、カスタマイズ方法 1-2-02-f

↑ このように、(ウィジェットの設定画面上で)ドラッグ&ドロップで直接ウィジェットの順序を入れ替えればOKです

 

つづいて最後に、サイドバーエリアに設置したこれらのウィジェットの「色やデザインをカスタマイズする方法」について見ていきましょう🐥

 

ステップ3:ACTION AFFINGER6における「サイドバーウィジェット」のカスタマイズ設定方法【余白スペースの調整や、検索フォームのカスタマイズまで】

WordPress ヘッダー b-03

WordPress管理画面の左側一覧から、今度は…

外観 > カスタマイズ

をクリックして開き、そのなかの左側一覧から…

見出しタグ(hx)/ テキスト

というタブをクリックして、さらに…

ウィジェットタイトル(サイドバー)

というタブをクリックします

 

「ウィジェットタイトル(サイドバー)」タブを開くと、そのなかに…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-01-a

↑【ウィジェットタイトルの基本スタイル】という設定エリアがあるので、こちらでまずはウィジェットタイトルの「デザイン」を選択していきましょう

 

今回は例として…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-01-b

↑ このように…

  • ウィジェットタイトルの基本スタイル → ストライプデザインに変更
  • 背景や吹き出しの角を丸くする → オフ

という内容に設定してみました

 

デザインを選択できたら、つづいて同じ設定ページの上側にある…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-02-a

↑ こちらの…

  • 文字色
  • 背景色
  • 背景色(グラデーション上部)
  • ボーダー色
  • ボーダー色(サブ)

という項目で、ウィジェットタイトルの「色設定」を指定していきます

 

今回は例として…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-02-b

↑ このような配色にしてみますね

参考までに、カラーコードは下記の通り!
  • 文字色 → #ffffff
  • 背景色 → #523634
  • 背景色(グラデーション上部) → #523634
  • ボーダー色 → #523634
  • ボーダー色(サブ) → #523634

左上の「公開」ボタンをクリック後、実際の画面上で見てみると…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-3-03

↑ このような「サイドバー・ウィジェット」の色・デザインになりました

 

補足

サイドバーウィジェット間の、上下の「余白スペース」がせまくて気になるという場合は…

  1. WordPress管理画面 > 外観 > ウィジェット を開く
  2. (画面左側の)ウィジェット一覧から「テキスト」というボックスを開き、「サイドバーウィジェット」を選択して「ウィジェットを追加」
  3. (画面右側の)サイドバーウィジェットに追加された「テキスト」ウィジェット内で、「ビジュアル」から「テキスト」にタブを切り替える
  4. 入力欄に <div style="padding-bottom: 20px;"> </div> というコードをそのまま貼り付け、「完了」ボタン
    ※「●●px」の数値を変更することで、余白の大きさを調整できます(例:1,2,3…)
  5. この「テキスト」ウィジェットを、ドラッグ&ドロップで任意の並び順に入れ替える
    ※例:上から【テキスト】【検索】【カテゴリー】の順など

という手順で、お好きな余白バランスに調整できます(画像付きの解説は、こちらをどうぞ ↓ )

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

続きを見る

 

補足

「検索フォーム」ウィジェットについては…

WordPress管理画面 > 外観 > カスタマイズ > オプション(その他)

を開いたなかの「検索フォーム」という項目内で、さまざまなカスタマイズ設定が可能です

 

参考までに、自分は…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-3-04

↑ このような設定をよく使っています

 

上記の【補足】まで一通りふまえたうえで、今回のカスタマイズ設定例では…

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法 1-3-05

↑ このようなサイドバーウィジェットになりました🐥

 
 

人気記事

 

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

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

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

 

あずき猫 - Azuki Cat

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

-WORDPRESS