はてなブログでサイドバーを追従させよう！記事横の余白解消方法も紹介

そんな疑問を解決します。

記事が長文になると、サイドバーに余白ができてせっかく自分のコンテンツを表示しているのに横は真っ白。

なんてことありませんか？

結論、サイドバーの最後のコンテンツを追従させるカスタマイズをすることで余白をなくすことができます。

完成系はこちらです↓

この記事では、スクロール時に「サイドバーを追従する方法」を見ていきます。

サイドバーは、PCデバイスからのユーザー需要で、タイトルの次に目がいく場所です。

なるべくコンテンツを長く表示させたい時におすすめなので参考にしてみてください。

サイドバーって重要なコンテンツ

「関連記事」・「プロフィール」・「広告」など、ブログのコンテンツを貼り付けるにはもってこいのサイドバー。

しかし文字数が多くなると、横の余白が続いてしまうことがあります。

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表示のみに適応するようになりました。

以上、サイドバーコンテンツの最終尾を追従させるカスタマイズをまとめてみました。

これで、記事をスクロールしても、サイドバーが空白になるのを回避できます。

サイトの回遊率も向上するかもしれないので、ぜひ興味あれば試してみてくださいね。