AFFINGER

AFFINGER5(アフィンガー5)カスタマイズ設定【サイドバー】

2020-05-21

affinger-side-bar

 

悩む人
サイドバーの設定方法が分からない
AFFINGER5でのサイドバーのカスタマイズ方法分からない
あきブログのサイドバー真似したい

こんな悩みを解決します。

 

本記事の内容

  • サイドバーについて
  • AFFINGER5のサイドバーカスタマイズ方法
  • あきブログのサイドバー紹介

 

ブログの構成要素のうちの一つ「サイドバー」

 

広告を設置したり、他記事にナビゲーションする役割があります。

 

AFFINGER5では使い方さえ理解すれば、いろんなサイドバーデザインを思い通りに作ることができます。

あきしゅん
この記事を読めばあなたも、思い通りにサイドバーが作れちゃいます。

 

本記事ではAFFINGER5のサイドバー設定を詳しく説明します。

 

この記事で紹介するカスタマイズ設定を丸パクリしてもらって構いません。

またこのブログ記事を読んで、同じサイドバー構成にしたという方がいれば、Twitterから一言いただけると嬉しいです。

一言いただけたらブログ見にいって宣伝させてもらいます!

 

サイドバーの役割

サイドバー

サイドバーとは、メインコンテンツ(記事やカテゴリーページ)の右側(または左側)に設置された領域のことです。

サイドバーがあることによって読者に、追加でサイト情報を知ってもらうことができます。

サイドバーによって収益がUPしたり、サイト滞在時間が増えるので設定は必須です。

 

サイドバーについては詳しく下の記事にまとめてあります。

サイドバーの作成のコンセプトが決まってない方は参考にしてください。

 

【AFFINGER5】サイドバーカスタマイズ方法

AFFINGERサイドバー

AFFINGER5のサイドバーに関する設定方法を説明していきます。

 

AFFINGER5管理

テーマ管理でサイドバー関連で設定できるのは「新着記事」と「おすすめ記事」の2つです。

順に説明していきます。

 

新着記事

記事一覧

WordPress管理画面より「AFFINGER5管理」→「トップページ」→「記事一覧」です。

 

新着記事を自動的にサイドバーに表示する設定や表示の有無や、表示件数について設定ができます。

 

新着記事を表示させる場合は設定しましょう。

 

おすすめ記事

おすすめ記事一覧

WordPress管理画面より「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」です。

 

おすすめ記事をサイドバーに表示する設定や設置位置を指定できます。

渾身の記事を設定しましょう。

 

ウィジェット

サイドバーウィジェット

WordPress管理画面より「外観」→「ウィジェット」です。

サイドバー関連の設定は赤枠の「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」です。

 

サイドバートップ

デフォルトで設定されている新着記事よりも上に表示させたい場合は、「サイドバートップ」に設定します。

「新着記事」を非表示にしてる場合は、実質「サイドバーウィジェット」と同じになります。

 

サイドバーウィジェット

一般的にサイドバーに表示させる項目は、「サイドバーウィジェット」に設定します。

 

スクロール広告用

基本サイドバーはスクロールによって情報が流れてしまいます。

しかし、「スクロール広告用」に設定することで、スクロールに合わせてサイドバーの内容が追いかけてくれます。

 

このブログを例にすると「目次」と「人気記事」にあたります。

あきしゅん
右側見ると「目次」と「人気記事」どちらも表示されてるね!

 

あきブログのサイドバー設定

akiblog

あきブログのサイドバー設定を全て公開します。

(今後設定を多少変える可能性がありますが、大きくは変わる予定はありません)

 

「あきブログ」のサイドバーはユーザビリティを考慮しつつ、自分好みのデザインになるようにこだわりました。

 

現在サイドバーに表示してる項目は次の通りです。

  • 検索ウィジェット
  • プロフィール
  • カテゴリー
  • 目次
  • 人気記事

 

これらの項目はユーザビリティと収益を意識して、サイドバーの項目を厳選しています。

 

各設定画面ごとに紹介していきます。

 

AFFINGER5管理(新着記事・おすすめ記事)

記事一覧

WordPress管理画面より「AFFINGER5管理」→「トップページ」→「記事一覧」です。

このページでは新着記事を自動的にサイドバーに表示する設定ができます。

 

サイドバーの記事は人気記事しか掲載しないと決めてるので、新着記事は全て非表示設定にしています。

 

おすすめ記事一覧

WordPress管理画面より「AFFINGER5管理」→「おすすめ記事一覧」→「おすすめ記事一覧の作成」です。

このページではおすすめ記事をサイドバーに表示する設定ができます。

私はおすすめ記事を「人気記事」として、読んでもらいたい記事のIDを記入しています。

 

しかし、ここでは表示位置を指定せず、この後のウィジェットで設定してます。

 

今後おすすめ記事の数は増える予定ですが、多くても10記事にしてサイトの見やすさを意識します。

 

ウィジェット

サイドバーウィジェット

WordPress管理画面より「外観」→「ウィジェット」です。

サイドバー関連の設定は赤枠の「サイドバートップ」「サイドバーウィジェット」「スクロール広告用」です。

 

あきブログの設定上、別の設定でサイドバー関連の設定はしてません。

そのため、「サイドバートップ」「サイドバーウィジェット」どちらに設定しても違いはないです。

特にこだわりがあるわけでもなく、とりあえず「サイドバートップ」に設定してます。

 

サイドバートップ

「サイドバートップ」内の設定をしています。

 

以下の順で上記画像の設定しています。

  • 検索:検索
  • テキスト:プロフィール
  • 11_STINGERサイト管理者紹介
  • カテゴリー

 

プロフィールにはWordPress管理画面より「ユーザー」より設定してるプロフィール内容が反映されます。

 

スクロール広告用

「スクロール広告用」内の設定をしています。

ここに記載するとスクロールに合わせてサイドバーが固定で表示されます。

 

今この記事を読んでるあなたは目次と人気記事がサイドバーに、スクロールしても固定で表示されているのが確認できるでしょう。

 

以下の順で上記画像の設定しています。

  • TOC+:目次
  • テキスト:人気記事
  • カスタムHTML

 

「スクロール広告用」に設定することで、ユーザビリティ向上や記事の誘導を狙っています。

 

カスタマイズ

WordPress管理画面より「外観」→「カスタマイズ」です。

ここではサイドバーの色の設定や、細かい装飾を設定できます。

 

ウィジェットタイトル(サイドバー)

サイドバーウィジェットタイトル

「検索」や「プロフィール」、「カテゴリー」などウィジェットのタイトルのカラーを設定できます。

カラー意外にも表示スタイルもここで設定可能です。

 

各色変化させるとどこが変わるのかはご自身で確認してみてください。

あきしゅん
いろいろ色を試してみると楽しいよ!

 

記事一覧の区切りのボーダー

記事一覧の区切りボーダー

「おすすめ記事関連」のウィジェットのカラーや文字色を設定できます。

カラー意外にも表示スタイルもここで設定可能です。

 

こちらも色はご自身で確認してみてください。

 

【AFFINGER5】サイドバーカスタマイズ設定まとめ

AFFINGER5でのサイドバーの詳しい設定方法を解説しました。

また、私の「あきブログ」のサイドバーの設定をご紹介しました。

 

デザイン性が高いAFFINGERで、自分好みのサイドバーをカスタマイズしてみてください。

また、私のサイドバーカスタマイズ設定も参考にしてみてください。

 

読者目線で作成を第一とし、自分好みのサイドバーを作ってブログを楽しみましょう。

 

また、他に役に立つAFFINGERに関する記事は下記にまとめていますので、ご活用下さい。

AFFINGER記事一覧

 

 

この記事を読んでるという方はAFFINGERを既に使っている方だと思います。

以下の文章は WordPressテーマ「AFFINGER」を購入しようと思っている方向けです

AFFINGERならサイドバーを簡単にカスタマイズできます。

実は私がWordPressでブログを初めて1週間の初心者時代から、このサイドバーのデザインはほとんど変わっていません。

 

初心者でもAFFINGERなら、あなたが作りたいサイドバーを簡単に作ることができます。

こちらの記事を読めばAFFINGERがいかにデザインカスタマイズ性が高いか評判を確認することができます。

 

こんな方にオススメ

  • 今のテーマでデザインに納得してない方
  • ブログ初心者でテーマ選びに迷ってる方
  • CSSの知識がないけどブログデザインに力入れたい方

 

これらに当てはまる方は是非早いうちに、AFFINGER導入を考えてみてください。

記事を数十本書いてからのテーマ変更は時間がかかったり、記事が修正不可能だったり大変なことだらけです。

 

効率よく、そして楽しくブログを運営していくために少し初期投資してみませんか?

AFFINGER5の購入はこちら

 

-AFFINGER

©️ 2020 あきブログ