AFFINGER5でのサイドバーのカスタマイズ方法分からない
あきブログのサイドバー真似したい
こんな悩みを解決します。
本記事の内容
- サイドバーについて
- AFFINGER5のサイドバーカスタマイズ方法
- あきブログのサイドバー紹介
ブログの構成要素のうちの一つ「サイドバー」
広告を設置したり、他記事にナビゲーションする役割があります。
AFFINGER5（アフィンガー5）では使い方さえ理解すれば、いろんなサイドバーデザインを思い通りに作ることができます。
本記事ではAFFINGER5のサイドバー設定を詳しく説明します。
サイドバーの役割
サイドバーとは、メインコンテンツ（記事やカテゴリーページ）の右側（または左側）に設置された領域のことです。
サイドバーがあることによって読者に、追加でサイト情報を知ってもらうことができます。また、サイドバーによって収益がUPしたり、サイト滞在時間が増えるので設定は必須です。
サイドバーについては詳しく下の記事にまとめてあります。サイドバーの作成のコンセプトが決まってない方は参考にしてください。
-
見やすいブログデザイン【サイドバーの役割】
続きを見る
【AFFINGER5】サイドバーカスタマイズ方法
AFFINGER5でのサイドバーのカスタマイズ方法は2種類の設定画面があります。
- AFFINGER5管理
- ウィジェット
「AFFINGER5管理」は記事表示関連の設定、「ウィジェット」は載せたい表示項目を設定する際に使います。
では、カスタマイズ方法について詳しく説明していきます。
AFFINGER5管理
AFFINGER5管理の中で、サイドバー関連で設定できるのは「新着記事」と「おすすめ記事」の2つです。
順に説明していきます。
新着記事
WordPress管理画面より「AFFINGER5管理」→「トップページ」→「記事一覧」です。
新着記事を自動的にサイドバーに表示する設定や表示の有無や、表示件数について設定ができます。
関連項目は以下の通り。
- トップページ新着記事一覧に表示するカテゴリ（ID）を指定
- 新着記事一覧に表示する見出し
- 新着記事に表示する件数（サイドバー）
- トップページのサイドバーの新着記事一覧を非表示にする
新着記事をサイドバーに表示させる場合は設定しましょう。
おすすめ記事
WordPress管理画面より「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」です。
おすすめ記事をサイドバーに表示する設定や設置位置を指定できます。
関連項目は以下の通り。
- おすすめ記事一覧に表示する文字
- 任意の人気記事を指定（投稿又は固定記事ID）
- サイドのスクロールに表示する
渾身の記事を設定しましょう。
ウィジェット
WordPress管理画面より「外観」→「ウィジェット」です。
サイドバー関連の設定は赤枠の「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」です。
サイドバートップ
デフォルトで設定されている新着記事よりも上に表示させたい場合は、「サイドバートップ」に設定します。
「新着記事」を非表示にしてる場合は、実質「サイドバーウィジェット」と同じになります。
サイドバーウィジェット
一般的にサイドバーに表示させる項目は、「サイドバーウィジェット」に設定します。
スクロール広告用
基本サイドバーはスクロールによって情報が流れてしまいます。
しかし、「スクロール広告用」に設定することで、スクロールに合わせてサイドバーの内容を追いかけてくれます。つまり、アピールしたい内容をサイドバーに固定で表示させることが可能。
このブログを例にすると「目次」と「人気記事」にあたります。
あきブログのサイドバー設定
あきブログのサイドバー設定を全て公開します。
（今後設定を多少変える可能性がありますが、大きくは変わる予定はありません）
「あきブログ」のサイドバーはユーザビリティを考慮しつつ、自分好みのデザインになるようにこだわりました。
現在サイドバーに表示してる項目は次の通りです。
- 検索ウィジェット
- プロフィール
- カテゴリー
- 目次
- 人気記事
これらの項目はユーザビリティと収益を意識して、サイドバーの項目を厳選しています。
各設定画面ごとに紹介していきます。
AFFINGER5管理（新着記事・おすすめ記事）
WordPress管理画面より「AFFINGER5管理」→「トップページ」→「記事一覧」です。
このページでは新着記事を自動的にサイドバーに表示する設定ができます。
私はサイドバーの記事は人気記事しか掲載しないと決めてるので、新着記事は全て非表示設定にしています。
WordPress管理画面より「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」です。
このページではおすすめ記事をサイドバーに表示する設定ができます。私はおすすめ記事を「人気記事」として、読んでもらいたい記事のIDを記入しています。
しかし、ここでは表示位置を指定せず、この後のウィジェットで設定。
今後おすすめ記事の数は増える予定ですが、多くても10記事にしてサイトの見やすさを意識します。
ウィジェット
WordPress管理画面より「外観」→「ウィジェット」です。
サイドバー関連の設定は赤枠の「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」です。
あきブログの設定上、別の設定でサイドバー関連の設定はしてません。
そのため、「サイドバートップ」「サイドバーウィジェット」どちらに設定しても違いはないです。
特にこだわりがあるわけでもなく、とりあえず「サイドバートップ」に設定してます。
「サイドバートップ」内の設定をしています。
以下の順で上記画像の設定しています。
- 検索：検索
- テキスト：プロフィール
- 11_STINGERサイト管理者紹介
- カテゴリー
プロフィールにはWordPress管理画面より「ユーザー」より設定してるプロフィール内容が反映されます。
「スクロール広告用」内の設定をしています。
ここに記載するとスクロールに合わせてサイドバーが固定で表示されます。
今この記事を読んでるあなたは目次と人気記事がサイドバーに、スクロールしても固定で表示されているのが確認できるでしょう。
以下の順で上記画像の設定しています。
- TOC+：目次
- テキスト：人気記事
- カスタムHTML
「スクロール広告用」に設定することで、ユーザビリティ向上や記事の誘導を狙っています。
カスタマイズ
WordPress管理画面より「外観」→「カスタマイズ」です。
ここではサイドバーの色の設定や、細かい装飾を設定できます。
ウィジェットタイトル（サイドバー）
「検索」や「プロフィール」、「カテゴリー」などウィジェットのタイトルのカラーを設定できます。
カラー意外にも表示スタイルもここで設定可能です。
各色変化させるとどこが変わるのかはご自身で確認してみてください。
記事一覧の区切りのボーダー
「おすすめ記事関連」のウィジェットのカラーや文字色を設定できます。
カラー意外にも表示スタイルもここで設定可能です。
こちらも色はご自身で確認してみてください。
【AFFINGER5】サイドバーカスタマイズ設定まとめ
AFFINGER5でのサイドバーの詳しい設定方法を解説しました。
また、私の「あきブログ」のサイドバーの設定をご紹介しました。
デザイン性が高いAFFINGERで、自分好みのサイドバーをカスタマイズしてみてください。
また、私のサイドバーカスタマイズ設定も参考にしてみてください。
読者目線で作成を第一とし、自分好みのサイドバーを作ってブログを楽しみましょう。
また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。
この記事を読んでるという方はAFFINGER5を既に使っている方だと思います。
以下の文章は WordPressテーマ「AFFINGER5」を購入しようと思っている方向けです。
AFFINGER5ならサイドバーを簡単にカスタマイズできます。
実は私がWordPressでブログを初めて1週間の初心者時代から、このサイドバーのデザインはほとんど変わっていません。
初心者でもAFFINGER5なら、あなたが作りたいサイドバーを簡単に作ることができます。
こちらの記事を読めばAFFINGER5がいかにデザインカスタマイズ性が高いか評判を確認することができます。
-
WordPressテーマAFFINGER5(アフィンガー5)の評判・口コミまとめ
続きを見る
こんな方にオススメ
- 今のテーマでデザインに納得してない方
- ブログ初心者でテーマ選びに迷ってる方
- CSSの知識がないけどブログデザインに力入れたい方
これらに当てはまる方は是非早いうちに、AFFINGER5導入を考えてみてください。
記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。
効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか？
