AFFINGER6を使用していますが、サイドバーのデザインを分かりやすく使いやすくしたいです。
こちらに関する質問にAFFINGER6使用歴1年以上の僕が答えていきます。
- プロフィールカードの作成
- おすすめ記事一覧の設置
- サイドバーの新着記事の表示/非表示
サイドバーを上手く使用すれば、読者にとってサイトを使いやすいものに変えることが出来ます。
例えばサイドバーに検索ボックスが設けられているとサイトの回遊率も上昇し、
結果的にサイトの滞在時間も伸びたりします。
回遊率はユーザーが初めに訪問したページから自分のサイトの別ページに移動した割合の事ですね
プロフィールの充実もサイトの権威に繋がりますので、紹介する内容を活用しサイドバーを制作してみてください。
AFFINGER6サイドバーエリアのカスタマイズ方法
この記事は下記の記事の続きになります。サイト全体の設定方法の概要が知りたい方は先にこちらをご覧ください。
>>AFFINGER6のデザインをカスタマイズする方法【総まとめ】
まだAFFINGER6を利用していない方はこちらを参考にしてください
今回はサイドバーのデザインカスタマイズ方法を紹介していきますね！
サイドバーは次の2種類のエリアに分けて解説していきます。
- プロフィールカード
- おすすめ記事一覧（よく読まれている記事）
プロフィールカードエリアです。ここを追加しサイト運営者情報を公開することで信頼性を上げます。
よく読まれている記事エリアです。ここは任意で好きな記事を設定することが出来て、ここでは「よく読まれている記事」としていますが、ここも変更可能です。
早速見ていきましょう。
【AFFINGER6】プロフィールカードの作成方法
プロフィールカードの制作方法は非常に簡単です。
次の3つの手順を踏んでクリアしていきましょう！
- プロフィール写真を挿入する
- プロフィール文を入力する
- ホーム画面にプロフィールカードを表示させる
プロフィール写真を挿入する
管理画面の「外観」＞「カスタマイズ」をクリックします。
カスタマイズ画面に移動するので次に、「オプション（その他）」＞「プロフィールカード」をクリックします。
下図の部分に画像を設定すればOKです。
プロフィール文を入力する
管理画面から「ユーザー」をクリック
管理者ユーザーを対象に「編集」をクリックすると下図の画面に遷移します。
プロフィール文を入力しましょう。
入力後は下部のプロフィールを更新のクリックを忘れずに
ホーム画面にプロフィールカードを表示させる
管理画面の「外観」＞「ウィジェット」をクリックする
ウィジェット画面で「11_STINGERプロフィールカード」を「サイドバートップ」エリアにドラック&ドロップする
ここまで完了するとホーム画面にプロフィールカードが表示されています。確認してみましょう。
この時に別途「検索」、「アーカイブ」、「カテゴリー」などもドラック&ドロップすると読者のサイト内検索が可能になる為、使いやすくなります。
【AFFINGER6】おすすめ記事一覧の作成方法
次はよく読まれている記事エリアの作成方法について触れていきます。
こちらも先ほど同様で手順を踏むと非常に簡単に作成が可能です。
- AFFINGER管理をクリック
- ヘッダー下/おすすめをクリック
- おすすめ記事一覧で記事IDを入力
AFFINGER管理をクリック
管理画面にある「AFFINGER管理」をクリックします。
ヘッダー下/おすすめをクリック
下図の「ヘッダー下/おすすめ」をクリック
おすすめ記事一覧で記事IDを入力
下図に従って入力をしていきましょう。
確認ポイントは3つあります。
- おすすめ記事一覧のタイトル部分
- 表示する記事を選んで指定（IDの入力）
- サイドバーに表示にチェック
おすすめ記事一覧に表示する文字は→「よく読まれている記事」と入力。※任意でお好みのタイトルにしましょう
任意の人気記事を指定→IDの入力を行います。（IDの確認方法は下記参照）
今回はサイドバーに表示するので「サイドのスクロールに表示する」にチェックを入れる
読ませたい記事を配置してるブロガーの方もいますが、僕はシンプルに滞在時間が長い記事をランキングにしています
記事IDの確認方法
管理画面の「投稿」＞「投稿一覧」のリスト右側から確認が可能です。
【AFFINGER6】サイドバーの新着記事を非表示にするには
こちらに関してはAFFINGER6をインストール時にデフォルトで表示される設定になっていることがあり、
おすすめ記事一覧を表示する際に新着記事リストを削除したいという方向けに紹介します。
設定方法としては、
基本画面から「AFFINGER管理」＞「トップページ」の中から下図「記事一覧」の箇所まで移動します。
たったこれだけで、ホーム画面の新着記事リストを非表示にできます！
サイドバーの使いやすさがサイトの使いやすさに直結
今回はサイドバーのデザインの変更方法を紹介しました。
サイドバーの役割としては主に読者がサイト内の記事の検索を行ったり、サイト滞在時間にも関係してきます。
今回の例を参考にぜひご自身のサイトをカスタマイズしてみてください。
もしAFFINGER6をまだ使ったことないよという方は、
今回紹介したテーマを実際に僕が使ったときの感想や価格について触れたレビューがあります。
気になる方はどうぞ。
>>【AFFINGER6】アフィンガー6を実際に使ってみた感想とレビュー
今回は以上です。
