記事が長文になると、サイドバーに余白ができてせっかく自分のコンテンツを表示しているのに横は真っ白。
なんてことありませんか？
今回はスクロール時に「サイドバーを追従する方法」を見ていきます。
完成系はこちらです。
結論、サイドバーの最後のコンテンツを追従させるカスタマイズをすることで余白をなくすことができます。
サイドバーは、PCデバイスからのユーザー需要で、タイトルの次に目がいく場所。
なるべくコンテンツを長く表示させたい時におすすめなので参考にしてみてください。
- サイドバーって重要なコンテンツ
- サイドバーの最後のコンテンツを残す方法を発見！
- コードを貼る場所
- HTMLコード
- 追従したいサイドバーコンテンツを最後に持ってくる
- スマホ画面が「ぐらつく」時の対処
- まとめ
スポンサードリンク
サイドバーって重要なコンテンツ
「関連記事」・「プロフィール」・「広告」など、ブログのコンテンツを貼り付けるにはもってこいのサイドバー。
しかし文字数が多くなると、横の余白が続いてしまうことがあります。
PCで記事を閲覧すると、サイドバーが横にくるので、長文記事だとサイトバーは上に取り残されてしまうのです。
なんか勿体無いなと思ったので、サイドバーを残す方法を調べることに。
サイドバーの最後のコンテンツを残す方法を発見！
で、調べてると、はてなブログでもサイドバーを残すカスタマイズを記事にされているブロガーさんがちらほら。
結論、サイドバーの最後のコンテンツを追従させるカスタマイズすることで、スクロールしてもサイドバーに存在し続けることができます。
早速、参考にさせていただき、チャレンジしてみました。
参考にさせてもらったサイトはこちら。
→はてなブログでサイドバーを固定して追従させるカスタマイズ - フジブロっ！
いつも、カスタマイズでお世話になっているガテン系ブロガー「フジグチさん」のサイトです。
コードを貼る場所
HTMLコードを貼り付けるカスタマイズをしていきます。
貼る場所はデザイン→カスタマイズ（スパナ）→CSSデザイン
下になるにつれて優先順位が上がります。
HTMLコード
下記のHTMLコードを貼り付けます。
#box2 {
display: flex;
}
.hatena-module:last-of-type {
position: -webkit-sticky;/*safari対応*/
position: sticky;
top: 15px;/*ここで上からの距離を調整*/
}
このコードをデザインCSSに貼り付ければ、サイドバーの最後尾のコンテンツを追従させることができます。
「適用」を忘れずにしてくださいね。
このカスタマイズはテーマによって、適用されないかもしれないこともあるかもです。
（僕の使っているテーマ「Under Shirt」では、反映されました。）
解決策は上記の参考サイトに載っていますので、そちらで確認してみてください。
追従したいサイドバーコンテンツを最後に持ってくる
このカスタマイズはサイドバーの最後にあるコンテンツのみを追従させるので、追従させたいコンテンツはサイドバーの一番下に配置します。
配置方法はデザイン→カスタマイズ（スパナ）→サイドバーを選び、クリックしてサイドバー内にあるコンテンツを移動できます。
「関連記事」や「注目記事」を設置すると回遊率も上がることも？
最近では、広告コンテンツの追従も解禁になったので、広告を追従させても良さそうです。
スマホ画面が「ぐらつく」時の対処
レスポンシブをしていると、スマホ画面でも同じように反映されますが、
スマホ画面がぐらついてしまう！
という時の対処法も記述します。
それは、PCのみに適応させるコードをいれるというものです。
下記のHTMLコードをデザインCSSに貼り付けます。
@media (min-width: 992px) {#box2 {
display: flex;
}
.hatena-module:last-of-type {
position: -webkit-sticky;/*safari対応*/
position: sticky;
top: 15px;/*ここで上からの距離を調整*/
}}
「適用」を忘れずにしてください。
これで、PC表示のみに適応するようになりました。
まとめ
サイドバーコンテンツの最終尾を追従させるカスタマイズをまとめてみました。
これで、記事をスクロールしても、サイドバーが空白になるのを回避できま、。
サイトの回遊率も向上するかもしれないので、ぜひ興味あれば試してみてくださいね。
最後まで読んでいただき、ありがとうございます。
★関連記事→内部リンク
この記事が良いと思ったら、ポチっ！してくれると嬉しいです！
「ブログ村ランキング」参加中!
