こんにちは "osaboo"
です。"@osaboo_Bot"
AFFINGER6で「サイドバーのデザインと文字色の変え方」を初心者さん向けに解説します。
AFFINGER6でサイドバーの「ウィジェットタイトル」のデザインや文字色って…
どうやって変えるの？
それではご覧ください。
AFFINGER6のサイドバーとは？
サイドバーは、ブログやWebサイトの横に表示されるエリアで、読者にとって重要なナビゲーションの場所です。
特にAFFINGER6は、サイドバーにウィジェットを配置して 様々な情報やリンクを表示することができます。
ウィジェットタイトルは、その中でも目立つ部分なので デザインに工夫を加えると、より魅力的なサイトにすることができます。
サイドバーには、「最近の投稿・人気記事・カテゴリーリスト・SNSリンク」などを表示しているサイトが多いです。もちろん広告リンクもその一つです。
これらを適切にデザインすることで、ユーザーの回遊性が向上し、滞在時間が長くなることが期待できます。
ウィジェットタイトル（サイドバー）の概要
表示と設定の全体像をざっくり把握しておきましょう。
下図の赤枠部分は、カスタマイザーの「ウィジェットタイトル（サイドバー）」で設定できます。（詳細は後述）
上サンプル画像のサイドバーウィジェットは以下のような内容です。
HTMLの広告コードをサイドバーに設置
ウィジェットタイトルの設定とプレビュー
- ウィジェットの設定でタイトルを入力しなけれは非表示が可能です。
「ウィジェットタイトル」が表示されない！？
Menu 『WordPress管理＞ダッシュボード＞AFFINGER管理＞その他』をクリックして、「ウィジェット」項目を確認してみましょう。
以下の赤マーク部にチェックが入っていると表示しません！「デフォルトでチェックが入っている可能性があります」
ウィジェットの「設定や活用」方法について 以下の記事で詳しくご紹介しています。
あわせてご覧ください。
-
-
【AFFINGER6】利用できるウィジェット一覧＆設定・活用法を徹底解説【WordPress対応】
AFFINGER6の専用ウィジェットとWordPress標準ウィジェットをすべて解説！設定方法や削除方法を詳しく説明し、初心者にもわかりやすく用途を紹介。ウィジェット活用ガイドを作りました！
ウィジェットタイトルの文字色・背景色を変更する方法
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; /* フォントサイズ */
}
⬅︎ 上のCSSを追加したプレビューです。
タイトルに枠線、背景色、余白を加え、文字色もカスタマイズできます。
CSSを追加する場合は、カスタマイザーの「追加 CSS」に記入して保存します。反映されない場合は、キャッシュのクリアやブラウザのリロードを試してみましょう。
アレンジして、使ってみて下さい。^^／
まとめ！AFFINGER6 サイドバーのデザイン＆文字色の変え方｜ウィジェットタイトルもおしゃれに！
AFFINGER6では、ウィジェットタイトルをカスタマイズするのがとても簡単です。
カスタマイザーから色やデザインを直感的に変更できるだけでなく、CSSを使えばより細かな調整も可能です。
ウィジェットタイトルをおしゃれにデザインすることで、読者に強い印象を与え、サイトの回遊性もアップします。
ぜひ、さまざまなデザインを試して、あなたのブログをより魅力的にしてください！この記事がお役に立てば嬉しいです。
「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。＼^^／
