【AFFINGER6】サイドバーの設定方法とオシャレなデザイン【１０分で完了】

 

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

 

記事の内容

 

プロフィール

よっしー（@yosshiblog）

 

AFFINGER6でサイドバーを設置すると、以下のようになります。

いっけん設置が難しそうに感じますが、本記事を見ながらやれば簡単に設置することが出来ます。

 

サイドバーは、ただ設置をするだけではなく直帰率や回遊率を良くするためにサイドバーが存在します。

 

つまり、サイドバーを設置すれば読者はとどまってくれるということですね。

 

今回は、記事の前半でサイドバーの設置する順番を、記事の後半ではデザインを開設するのでぜひ最後までご覧ください。

サイドバーとは：間接的なSEO効果

ブログのサイドバーとは、サイトの右の方にあるブログの案内板みたいなもので、プロフィールやおすすめ記事などを設置することが多いです。

というのも冒頭でも解説した通り、直帰率と回遊率が良くなるからです。

 

当サイトで設置してるサイドバーは、以下の6つになります。

 

 

この順番で設置をすることで、直帰率や回遊率が良くなり滞在率が上がることで間接的にSEO効果を得ることが出来ます。

 

また、サイドバーは基本的に右側に設置をします。

というのも、インターネットマーケティング用語で言う「Zの法則」と「Fの法則」に基づいているからです。

人は、基本的に左から右、上から下と読むのでその法則に基づいたデザインを設置する必要があります。

 

 

上図のように人の目線は動くので、それに伴ったデザインやライティングを意識したほうがいいのです。

 

質問：左側に設置しても効果がありそうだけど？

結論、左側にサイドバーを設置してしまうと、直帰率や回遊率が悪くなってしまいます。

というのも、サイドバーに目が行くので広告に飛んで行ったり、プロフィールに飛んだりしてブログの滞在率が悪くなる可能性があるからです。

 

よほどの理由が無い限り、右側にサイドバーを設置しましょう。

 

質問：デフォルトのままだとだめなの？

結論、デフォルトのままだと間違いなく読者の目には留まらないでしょう。

というのも、デフォルトのサイドバーは見づらいことが多く、無駄なリンクがたくさんあるからです。

 

サイドバーは直帰率や回遊率を良くするためにあるので、必ず設置をしておきましょう。

 

AFFINGER６でサイドバーの設置方法6ステップ

アフィンガーでのサイドバー設置方法は、以下の通り。

順に解説をします。

設置方法⓪：今あるサイドバーをすべて削除

 

まずは、今あるサイドバーを消去していきます。

「外観」→「ウィジェット」をクリックしたら、赤枠の中に入っているウィジェットをすべて削除していきます。

 

削除が完了したら実際にブログサイトを見て、サイドバーに何も表示されていないことを確認します。

テーマによって、ウィジェット以外の設定でサイドバーが表示されている可能性があるので、非表示設定にしておきましょう。

 

表示が消えなくても問題ない

「AFFINGER管理」→「ヘッダー下/おすすめ」をクリックして、下の方にある「おすすめ記事一覧」から以下の項目があります。

 

 

このおすすめ記事一覧は、後で使うので消さなくて大丈夫です。

設置方法①：検索

 

まずは、検索を設置していきます。

「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「検索」を探してください。

※検索は下の方にあります。

 

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

 

 

サイドバートップに入ったら、タイトルの欄に好きな名前を入れてください。

 

 

すると右側のサイドバートップに「検索」が表示されます。

 

 

このような作業を繰り返していきます。

設置方法②：プロフィール

プロフィールを設置していきます。

まずは、自分のプロフィールを書いていきましょう。

 

ユーザーから自分のアカウントを選択して、プロフィールを表示させてください。

 

下の方にプロフィール情報があるので、自分の情報を書いていきましょう。

 

 

入力が完了したら、「プロフィールを更新」をクリック。

「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「11_STINGERプロフィールカード」を探してください。

 

 

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

このウィジェットはタイトルを入れなくて大丈夫です。

※最後にまとめて反映確認をします。

設置方法③：アーカイブ

 

アーカイブを設置していきます。

同じように「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「アーカイブ」を探してください。

 

 

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

お好きなタイトルを挿入したら、すべてにチェックをして保存。

 

 

設置方法④：カテゴリー

カテゴリーを設置していきます。

「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「16_STINGERカテゴリー」を探してください。

 

 

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

お好きなタイトルを入力したら、以下のようにチェックをして保存。

 

 

設置方法⑤：当サイトへのリンクについて

 

当サイトへのリンクについてを設置していきます。

「当サイトからのリンクの許可はいらないけど、引用表記をしてね」ということをサイドバーに表記させます。

 

 

「外観」→「ウィジェット」をクリックして、左側の利用できるウィジェットから「テキスト」を探してください。

見つけたらクリックをして、「サイドバートップ」を選択したら「ウィジェットを追加」をクリック。

 

 

 

タイトルに「当サイトへのリンクについて」と入れたら、テキストの中に以下の文章をコピペして自サイトの名前を入れてください

 

 

入力が完了したら、「保存」をクリック。

設置方法⑥：よく読まれている記事

 

よく読まれている記事を設置していきます。

この設定はウィジェットではなく、AFFINGER管理設定から行います。

 

「AFFINGER管理」→「ヘッダー下/おすすめ」をクリックして、下の方にある「おすすめ記事一覧」から以下の項目があります。

設定画面を見つけたら、以下のように設定をしてください。

 

 

2番の記事のIDは「投稿一覧ページ」や「記事を開いたときの上」に表示されています。

 

 

入力が完了したら、「save」をクリック。

 

反映確認

一度ホームページを開いて確認をしてみましょう。

 

全部しっかりと反映されていますね。

サイドバーのデザイン

 

サイドバーのタイトル部分を少しいじっていきます。

 

 

「外観」→「カスタマイズ」→「見出しタグ（hx）/テキスト」→「ウィジェットタイトル（サイドバー）」の順にクリック。

「ボーダー色」を黒色にしてください。

 

 

色の設定をしたら下の方へスクロールすると、ウィジェットタイトルの基本スタイルを決める設定があります。

「グラデーションアンダーラインに変更（※要ボーダー色）」にチェックをしたら「公開」を押してください。

 

 

これでデザインの設定が完了したので、実際にサイトバーを見てみましょう。

 

 

まとめ：サイドバーを正しく設置して滞在率を増やそう！

今回は、「AFFINGER6でのサイドバー設置方法」について解説をしました。

ブログ運営を始めた当初はとにかく記事を書くことに集中してしまいがちですが、しっかりとサイドバーを設定することで読者はサイトを回遊してくれます。

 

もしサイドバーの設定をしていなくても、たったの10分程度で終わるのでぜひ試してみてください。

関連記事最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】