WORDPRESS

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

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

あずきです🐥

 

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

「サイドバー・ウィジェットタイトル」の色&デザイン設定

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

 

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

 

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

 

↓(設定後の一例)

 

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

 

↑ こちらの箇所を指します

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

 

AFFINGER6「サイドバー・ウィジェットタイトルの色&デザイン設定」のカスタマイズ方法を初心者向けに解説【ACTION/WordPressブログ】

WordPress ヘッダー b-01

 

まずは、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-03

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

右側の、【最近の投稿】と【最近のコメント】って表示されてるとこだね!
 

今回の記事はこちらの章に属しています

 第6章 デザイン 編          

次の章はこちらからどうぞ

 第7章 記事投稿 編          

全9章のTOPページです

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

 

-WORDPRESS