アフィンガーでサイドバーをデザインする方法を徹底解説！

サイドバーは、ブログの顔といっても過言ではない重要なスペースです。サイドバーを整頓することで、見た目の良さだけでなく、利便性も変わってきます。

現在管理人は、ユーザビリティ向上を第一に、以下の項目をサイドバーに置いています。

• 検索ウィジェット
• おすすめ記事
• プロフィール
• カテゴリー
• タグ
• 目次
• 最新記事

この記事では、上記のうち「カテゴリー」「タグ」「検索ウィジェット」などを置く方法、サイドバーウィジェットのタイトルカラーの変更方法をお伝えします。

アフィンガーでサイドバー作成の概要

• プロフカードを設置する→別記事でご紹介
• デフォルトの新着記事を非表示にする→別記事でご紹介
• おすすめ記事を置く→別記事でご紹介
• 追尾する目次を置く→TOC＋の場合・RTOCの場合
• カテゴリーやタグ、最新記事を置く(当記事)
• ウィジェットのタイトルカラー変更方法(当記事)

カテゴリーやタグを置く

サイドバーに置きたい項目を設置していきます。

操作する場所は、ダッシュボードの「外観」＞「ウィジェット」から行っていきます。

検索ウィジェットを置く

「利用できるウィジェット」の中から、「検索」を選択し、「サイドバーウィジェット」へ追加します。

カテゴリーを置く

「利用できるウィジェット」の中から、「STINGERサイドバーメニュー」を選択し、「サイドバーウィジェット」へ追加します。

ウィジェットを開き、タイトルに「カテゴリー」などと任意の文字を入力し「保存」をクリックしてください。

※ここのカテゴリーのカラー変更方法は、後述します。

ちなみに「カテゴリー」という名のウィジェットもあるのですが、こちらを使うと以下のようなシンプルなカテゴリー表示となります。

好みの問題もありますが、よりデザイン性あるサイドバーにしたい場合は、先にご紹介した「STINGERサイドバーメニュー」ウィジェットをおすすめします。

タグを置く

「利用できるウィジェット」の中から、「タグクラウド」を選択し、「サイドバーウィジェット」へ追加します。

ウィジェットを開き、タイトルに「タグ」や「キーワード」などと任意の文字を入力してください。

「タクソノミー」は、タグを選択してください。

タグの数を表示させたい場合は、「タグの数を表示」にチェックを入れてください。

最後は「保存」をお忘れなくクリックしてください。

最新記事を置く

「利用できるウィジェット」の中から、「STINGER最新の投稿一覧」を選択し、「サイドバーウィジェット」へ追加します。

タイトルを「最新記事」や「新着記事」などと任意の文字で設定してください。

最後は「保存」をお忘れなくクリックしてください。

ウィジェットのタイトルカラー変更方法

「ウィジェットのタイトル」とは、以下の赤く囲った箇所を指します。

ここのカラーのみではなく、デザインも変更できますので、各々のサイトに合わせてデザインを変更してみてください。

操作する場所は、ダッシュボードの「外観」＞「カスタマイズ」＞「見出しタグ（hx）/ テキスト」＞「ウィジェットタイトル（サイドバー）」

こちらをいじっていきます。

これらのカラー変更ができます。

このカラーがどこの場所を指しているのか、デザインによって反映されるかが変わっていきますので、それぞれをご紹介していきます。

吹き出しデザインに変更（※要背景色）

吹き出しデザインはこのようになります。

吹き出し風のデザインでは②背景色のカラーのみが反映されます。

左ラインに変更（※要ボーダー色）

「左ラインに変更」はこのようになります。

④ボーダー色のカラー左線として反映され、①背景色と②背景色（グラデーション上部）がグラデーションで反映されます。

囲み&左ラインデザインに変更（※要ボーダー色）

「囲み&左ラインデザインに変更」は以下のようなデザインになります。

周りを④ボーダー色で囲み、内側が①背景色と②背景色（グラデーション上部）がグラデーションで反映されます。見にくいですが⑤ボーダー色(サブ)がちょんっと文字左側に反映させています。

この④ボーダー色の部分の幅は「ボーダーの太さ（px）」から変更が可能です。

2色アンダーラインに変更（※要ボーダー色）

「2色アンダーラインに変更」では、以下のように背景色がなくなって、④ボーダー色と⑤ボーダー色(サブ)を使ったアンダーラインのみのデザインです。

アンダーラインの太さは「ボーダーの太さ（px）」から変更可能です。

グラデーションアンダーラインに変更（※要ボーダー色）

こちらもアンダーラインのデザインです。グラデーションカラーになります。

アンダーラインの太さも同じく「ボーダーの太さ（px）」から変更可能です。

囲みドットデザインに変更（※要ボーダー色）

「囲みドットデザインに変更」は、以下のようなデザインです。

設定した全カラーが反映されたデザインになります。周囲をドット風に囲んでいて、独特なデザインといえます。

「ボーダーの太さ（px）」では、ドットの太さを変更できます。

ストライプデザインに変更（※要背景色）

こちらは、①背景色②背景色（グラデーション上部）④ボーダー色が使われたデザインになります。

「ボーダーの太さ（px）」では、囲み枠の太さを変更できます。

なし

「なし」にした場合、以下のようになります。

①背景色②背景色（グラデーション上部）④ボーダー色が反映されます。

 背景や吹き出しの角を丸くする

すべてのデザイン共通で「角を丸く」することができます。

角を丸くしたい場合は［背景や吹き出しの角を丸くする］にチェックを入れてください。

背景を画像にする

背景画像に画像をいれることで、オリジナル感が強いサイドバーにすることもできます。

「ボーダーの太さ（px）」を「0」にすることで、周囲の枠は排除されます。

サイドバー カテゴリーのカラー変更

続いて、カテゴリー一覧のカラー変更をしていきます。以下の赤枠の箇所です。

操作するとところは、ダッシュボードの「外観」＞「カスタマイズ」＞「-各メニューの設定」＞「サイドメニューウィジェット」

こちらでカラーの変更が可能となります。

先のウィジェットタイトルカラーやデザインに合わせて、こちらも設定されてください。

アフィンガーでサイドバーをデザインする方法 まとめ

この記事では、カテゴリーやタグなどの設置方法、カラーやデザイン変更方法をご説明しました。

読者目線を意識しながら、ご自身の好みのサイドバーを作って、オリジナル感を出していきましょう。

• プロフカードを設置する→別記事でご紹介
• デフォルトの新着記事を非表示にする→別記事でご紹介
• おすすめ記事を置く→別記事でご紹介
• 追尾する目次を置く→TOC＋の場合・RTOCの場合
• カテゴリーやタグ、最新記事を置く(当記事)
• ウィジェットのタイトルカラー変更方法(当記事)