SWELLでサイドバーを追尾させる方法【カスタマイズ】

そんな疑問にお答えします。

本記事ではSWELLのカスタマイズ方法の一つ『追尾サイドバーの設定方法』を紹介します。
追尾サイドバーはカスタム次第でオシャレにもなるしユーザービリティ向上にも役立ちます。

SWELLを導入している方は今すぐ導入できるので、本記事を参考にしてカスタマイズしてみてください。
導入もとても簡単でおすすめです。

それではさっそく確認していきましょう。

SWELLの追尾するサイドバーとは

追尾するサイドバーとは上画像のようにPCのみで表示される「スクロールに伴って画面横についてくるサイドバー」のことです。
当ブログだと横に表示された追従してくる目次のことです。

ここにはいろんなものを表示することができ、目次、広告、記事一覧等カスタマイズは自由自在です。

ちなみに当ブログでは記事の目次のみ表示していますが、設定方法と目次のみの理由は後程説明しますね！

追尾サイドバーの設定方法

追従サイドバーの設定場所
『外観』⇒『ウィジェット』⇒『追尾サイドバー』

ウィジェット内に追尾サイドバーという項目があるので、この中に左側から好きな機能を選んで入れていきます。

今回はサイドバーにおすすめの下記３つの設定方法を解説していきますね。

設定①：目次

ウィジェットの設定方法は二つあり、上画像のようにドロップダウンから設置場所を設定する方法と、上画像の［SWELL］目次タブを右側の追尾サイドバーにドラッグアンドドロップすることで設定することも可能です。

ちなみに目次に関しては追尾サイドバーに設定するだけで設定完了です！
とても簡単ですね。

目次が表示される条件

1. 表示する見出しの条件を満たしている
2. 目次の表示が有効になっている

目次の設定場所
『外観』⇒『カスタマイズ』⇒『投稿・固定ページ』⇒『目次』にて設定可能

目次が表示される条件、デザイン等は上記目次カスタマイズページを確認してください。

設定②：広告

上記画像の通り、追尾サイドバーに表示させる場合は「カスタムHTML」を使用します。

タイトルを「スポンサードリンク」などの名称にし、アドセンス広告などのコードを内容欄に張り付ければ表示可能です。

正直なところ僕自身はサイドバーへの広告表示はおすすめしません。
単純にスクロールする毎に広告がついてくるのはうっとうしと感じるため、当サイトでは導入していません。

ユーザービリティを考慮するのであれば広告は少なければ少ない方がよいと思います。

設定③：人気記事

上記画像の通り、人気記事を表示する場合は「SWELL人気記事」を使用します。

タイトルは｢人気記事」として上記画像の通り設定しましょう。

表示する投稿数は３～５記事の間がいいと思います。
これ以上多くすると画面に表示しきれないためです。

おつかれさまでした。
これで追尾サイドバーの設定方法の解説は終了です。

やろうと思えば他のものも表示させることができますが、あまり詰め込みすぎても見にくくなるので目次、広告、人気記事あたりを表示するのがいいか感じになると思います。

当ぶろなびの追従サイドバー設定

当ブログは「目次」のみの表示設定です。

その理由下記の通り。

余計なものが追尾するとコンテンツに集中できないから

僕としてはユーザービリティを考慮してコンテンツに集中してもらいたいので、コンテンツの目次以外は表示しないように設定しています。

それに、あからさまに広告が表示されているとユーザーも敬遠してしまうので、余り表示する意味ないのかなと思っています。
（実際測定した結果では追尾サイドバーのクリック率はあまり良くありませんでした）

実際僕もネットサーフィンをしているときに画面が切り替わるごとに広告が表示される、広告がついてくるサイトはうっとうしく思い、すぐにブラウザバックしています。

そんな経験もあり『目次だけ表示』という結論に行きつきました。

まとめ：色々試してみて自分の気に入った感じにカスタマイズしよう

最後にお伝えしたいことは次の２つです。

1. 広告を増やすとサイトが重くなる
2. コンテンツを追尾させる場合はサイズをよく確認しよう

サイドバーを追尾させる場合にはこれらのことを踏まえてカスタマイズするようにしてください。
広告を表示すること自体はダメではありませんが、ユーザービリティの観点から僕的にはおすすめできません。

今回紹介したこと以外にもまだまだカスタマイズは可能です。
ご自身にあったいい感じのカスタマイズを色々試してみてください。

もし、まだSWELLを導入していない方は下記記事をご覧ください。

今回は以上です。
終わり。