AFFINGER6

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

AFFINGER6
悩んでいる人
AFFINGER6は機能が豊富で満足しているんだけど、サイドバーの設置の仕方が分からない。設置からデザインまで教えてほしいな。

 

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

 

記事の内容

  • サイドバーとは
  • サイドバーの設置方法
  • サイドバーのデザイン

 

プロフィール

プロフィール

よっしー(@yosshiblog

この記事を書いている僕はブログ歴1年3か月の高卒ブロガーです。1つ目の超特化ブログで月間1万PVを継続しています。

 

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

当サイトのサイドバー

当サイトのサイドバー

初心者ブロガー
すごくまとめられていて見やすい!

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

 

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

  • 直帰率・・・1ページ目だけ見て離脱した時の割合(低い方が望ましい)
  • 回遊率・・・1回の訪問でどれだけページを閲覧したかの割合(高い方が望ましい)

 

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

 

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

まだAFFINGER6を導入していない方は、3ステップで分かりやすく解説をしているのでこちらの「最強テーマAFFINGER6のレビュー【一番おすすめの有料テーマ】」からご覧ください。

画像をたくさん使った解説だから簡単に設置できるよ!
yosshi

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

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

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

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

 

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

 

当サイトのサイドバー

当サイトのサイドバー

  1. 検索
  2. プロフィール
  3. アーカイブ
  4. カテゴリー
  5. 当サイトへのリンクについて
  6. よく読まれている記事

 

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

 

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

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

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

 

Zの法則

Zの法則

Fの法則

Fの法則

 

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

 

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

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

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

 

個人ブログサイトで左側だけにサイドバーを設置してる人は見たことがありませんよね?

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

 

質問:デフォルトのままだとだめなの?

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

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

 

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

 

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

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

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

  1. 検索
  2. プロフィール
  3. アーカイブ
  4. カテゴリー
  5. 当サイトへのリンクについて
  6. よく読まれている記事

順に解説をします。

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

 

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

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

ウィジェット削除

ウィジェット削除

 

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

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

 

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

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

 

AFFINGER管理

AFFINGER管理の設定

 

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

これで準備は整いました
yosshi

設置方法①:検索

 

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

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

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

 

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

 

検索

ウィジェット検索

 

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

 

検索

検索

 

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

 

反映確認

反映確認

 

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

悩んでいる人
結構簡単だね!

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

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

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

 

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

プロフィール

プロフィール

 

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

 

プロフィール

プロフィール

 

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

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

 

11_STINGERプロフィールカード

11_STINGERプロフィールカード

 

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

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

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

設置方法③:アーカイブ

 

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

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

 

アーカイブ

アーカイブ

 

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

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

 

アーカイブ

アーカイブ

 

設置方法④:カテゴリー

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

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

 

16_STINGERカテゴリー

16_STINGERカテゴリー

 

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

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

 

16_STINGERカテゴリー

16_STINGERカテゴリー

 

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

 

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

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

 

フッターに表記している人もいるのですが、当サイトではサイドバーに表記しているのでその方法を解説します。

自分の好きな所でも大丈夫だよ!
yosshi

 

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

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

 

テキスト

テキスト

 

 

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

当サイトへのリンクは完全フリーです。リンクを掲載する際の許可などは、一切必要ありません。

また、リンクの設定や引用をする際は、当サイト(自分のサイト名を入れる)へのリンクであることを必ず記載してください。

 

当サイトへのリンクについて

当サイトへのリンクについて

 

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

これでウィジェットの設定は終了だよ!
yosshi

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

 

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

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

 

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

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

 

AFFINGER管理設定

AFFINGER管理設定

  1. おすすめ記事一覧に表示する文字の欄にお好きなお名前を入力
  2. 任意の人気時事を指定(投稿又は固定記事ID)の欄に表示させたい記事のIDを入力。(複数入力する際は「,」で区切ること)
  3. サイドのスクロールに表示にする(抜粋非表示)にチェック

 

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

 

記事のID

記事のID

記事のID

記事のID

 

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

これでサイドバー設定は完了です
yosshi

 

反映確認

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

反映確認

反映確認

  1. 検索
  2. プロフィール
  3. アーカイブ
  4. カテゴリー
  5. 当サイトへのリンクについて
  6. よく読まれている記事

 

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

一応これでサイドバーの設置は完了しましたが、すこしデザインを変えてみましょう
yosshi

サイドバーのデザイン

サイドバーのデザイン

 

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

 

サイドバーのデザイン変更

サイドバーのデザイン変更

 

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

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

 

ボーダー色を黒色に

ボーダー色を黒色に

 

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

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

 

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

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

 

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

 

サイドバーのデザイン変更

サイドバーのデザイン変更

 

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

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

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

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

 

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

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

  • この記事を書いた人

yosshi

ブラックなサイト運営を解説しています。
【経歴】高卒で大手企業に就職▶︎2サイト運営▶︎今のSEOで正攻法では戦えないと気づく▶︎中古ドメインとInstagram運用
インフルエンサーを信じるなっ
とにかく被リンク獲得せいっ
ブロガー界隈は闇が深いでっ

-AFFINGER6