AFFINGER6のウィジェットタイトルのデザイン変更方法｜文字色の設定も解説

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6のウィジェットタイトルのデザイン変更方法を解説。文字色の設定やカスタマイズ手順から、おしゃれに整えるポイントまでまとめています。

AFFINGER6では、サイドバーのウィジェットタイトルのデザインや文字色をカスタマイザーで簡単に変更できます。

ウィジェットタイトルを目立たせることで、クリック率や回遊性の向上が期待できます。

この記事では、基本的な設定方法やカスタマイズ例をわかりやすく解説します。

Question

AFFINGER6でサイドバーの「ウィジェットタイトル」のデザインや文字色って…
どうやって変えるの？

この記事でわかること！

AFFINGER6でサイドバーのウィジェットタイトルを変更する基本の方法
文字色・背景色の設定手順（カスタマイザー使用）
見出しや枠線などの装飾を取り入れる方法
おしゃれで見やすいサイドバーにするためのカスタマイズのコツ

こんな人におすすめ！

AFFINGER6のサイドバーをもっとおしゃれにしたい
ウィジェットタイトルの文字色や背景色を変更したい
コードを使わずに簡単にカスタマイズしたい初心者さん
サイドバーの見た目を整えて、読者の目を引きたいブロガーさん

＼初心者でも安心！コスパ最強のWordPressテーマ／

AFFINGER6（通常版）でブログを始める

＼効果測定に必要なプラグインをまとめた特別セット／

ACTION PACK3で収益化を加速する

AFFINGER6のサイドバーとは？

サイドバーは、ブログやWebサイトの横に表示されるエリアで、読者にとって重要なナビゲーションの場所です。

特にAFFINGER6は、サイドバーにウィジェットを配置して様々な情報やリンクを表示することができます。

ウィジェットタイトルは、その中でも目立つ部分なのでデザインに工夫を加えると、より魅力的なサイトにすることができます。

サイドバーには、「最近の投稿・人気記事・カテゴリーリスト・SNSリンク」などを表示しているサイトが多いです。もちろん広告リンクもその一つです。

これらを適切にデザインすることで、ユーザーの回遊性が向上し、滞在時間が長くなることが期待できます。

ウィジェットタイトル（サイドバー）の概要

表示と設定の全体像をざっくり把握しておきましょう。

下図の赤枠部分は、カスタマイザーの「ウィジェットタイトル（サイドバー）」で設定できます。（詳細は後述）

上サンプル画像のサイドバーウィジェットは以下のような内容です。

HTMLの広告コードをサイドバーに設置

ウィジェットタイトルの設定とプレビュー

ウィジェットの設定でタイトルを入力しなけれは非表示が可能です。

「ウィジェットタイトル」が表示されない！？

Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞その他』をクリックして、「ウィジェット」項目を確認してみましょう。

以下の赤マーク部にチェックが入っていると表示しません！「デフォルトでチェックが入っている可能性があります」

関連記事ウィジェットの「設定や活用」方法について以下の記事で詳しくご紹介しています。

: AFFINGER6のウィジェット一覧と設定方法｜おすすめの使い方も解説

AFFINGER6のウィジェット一覧と設定方法を初心者向けに解説。各ウィジェットの特徴や使い方、おすすめの活用例までわかりやすくまとめています。

ウィジェットタイトルの文字色・背景色を変更する方法

AFFINGER6では、ウィジェットタイトルの「スタイル・文字色・背景色」などを簡単に変更できます。

コードは使わず！カスタマイザーから直感的に設定できます。（初心者さんにおすすめ！）

カスタマイザーから設定する手順

カスタマイザーを起動します。

Menu 『WordPress管理＞ダッシュボード＞外観＞カスタマイズ』をクリックします。

「カスタマイザー」画面で以下の手順で進み、『目次プラグイン（すごいもくじ）』の詳細設定ができます。

見出しタグ（hx）/ テキスト
➡︎

ウィジェットタイトル
（サイドバー）➡︎

詳細設定項目
⬇︎

設定項目は以下の通りです。

ウィジェットタイトル

文字色

カラーパレットから選択

背景色

カラーパレットから選択

グラデーション上部

カラーパレットから選択

ボーダー

カラーパレットから選択

サブ

カラーパレットから選択

ボーダーの太さ（px）

半角数字（任意）

「文字色」を変更したサンプルです。（黒・赤・緑）

デザインスタイル

吹き出しデザインに変更（※要背景色）
左ラインに変更（※要ボーダー色）
囲み&左ラインデザインに変更（※要ボーダー色）
2色アンダーラインに変更（※要ボーダー色）
グラデーションアンダーラインに変更（※要ボーダー色）
囲みドットデザインに変更（※要ボーダー色）
ストライプデザインに変更（※要背景色）
なし

ラジオボタンで切り替えて選択

「デザインスタイル」を変更したサンプルです。

背景画像

画像を選択
- メデイアから選択
横位置
- 左・真ん中・右
縦位置
- 左・真ん中・右

ラジオボタンで切り替えて選択

背景画像を繰り返さない
- 『ON / OFF』

調整

左の余白（px）
- 20（デフォルト）
上下の余白（px）
- 5（デフォルト）
背景や吹き出しの角を丸くする
- 『ON / OFF』

背景画像を設置した場合の位置調整と表示形状

ポイント

色を選ぶ際は、サイト全体のデザインに合うような色を選ぶと統一感が出ます。また、文字色と背景色のコントラストをしっかりつけることで、読みやすさが向上します。

装飾で見た目をおしゃれにするコツ

ウィジェットタイトルにちょっとした装飾を加えると、よりおしゃれで目を引くデザインに仕上がります。

以下のポイントを押さえたカスタマイズを行ってみましょう。

枠線・余白・背景を活用する

枠線を追加する
- ウィジェットタイトルの周りに枠線を追加することで、タイトルが際立ちます。シンプルなデザインでも、枠線を使うことで印象が大きく変わります。
余白を調整する
- ウィジェットタイトルと周囲の余白（マージンやパディング）を調整することで、タイトルがより際立つように見せることができます。余白を十分に取ることで、タイトルが窮屈に見えず、読みやすくなります。
背景を加える
- ウィジェットタイトルに背景色を加えることで、視覚的に強調することができます。背景に淡い色やアクセントカラーを使うと、サイト全体のデザインに調和しやすいです。

CSSでより細かく調整したい場合（上級者向け）

カスタマイザーでの設定だけでは物足りない場合や、もっと細かくデザインを調整したい場合は、カスタムCSSを使うことができます。CSSを使うと、色々なプロパティを調整できるので、デザインの自由度が広がります。

例えば、次のようにCSSを使ってウィジェットタイトルにスタイルを追加できます。

.st-widgets-title {
    color: #e22f26; /* 文字色 */
    background-color: #f5f5f5; /* 背景色 */
    border: 2px solid #dcdcdc; /* 枠線 */
    padding: 10px; /* 余白 */
    font-size: 18px; /* フォントサイズ */
}