はてなブログのサイドバーをCSSだけで固定（追従）する

hatenaロゴ

はてなブログでサイドバーに設置した目次や広告バナーを固定して表示（スクロールに合わせて追従）させたい！ JavaScriptを使わずにCSSだけでなんとかしたい。

参考になるブログ・Webサイト

今回はPC表示時にサイドバーを追従させるカスタマイズ方法を紹介します。 PC表示時には記事本文を読み進めると、サイドバーが表示されているエリアが途中からただのスペースになってしまい、少し寂しいですね。サイドバーを追従させることで、アクセスの多い注目記事…

「display:flex」と「position:sticky」を使えばいいはずなのに、なぜかCSSが効かない。
どうやら、ブログ記事の高さに対してサイドバー領域の高さが足りないのが原因らしい。

参考になるブログ・Webサイト

display:flexなのにposition:stickyが効かない問題

position: stickyを指定しているのに効かない場合のひとつは、親要素または祖先要素にfloatプロパティが使用されている時です。つまり、position: stickyは親要素または祖先要素に高さがないと無効になります。

サイドバー領域（id="box2-inner"）は、一番下のサイドバー項目（モジュール）までの高さしかないので、記事と同じ高さにすると（height:100%）うまくいくのでは！
それだけではダメだったので、いろいろ調整して最終的に次のようになりました。

(デザイン→カスタマイズ→「デザインCSS」にコードを入力)

CSS
/* contentとcontent-innerの両方をフレックスボックスに */
#content,
#content-inner {
    display: flex !important;
}

/* サイドバー領域の高さを100％に */
#box2-inner {
    height: 100%;
}

/* 一番下のサイドバー項目を固定 */
.hatena-module:last-of-type {
    position: sticky;
    top: 100px;
}

/* サイドバー全体の位置を調整 */
#box2 {
    position: relative;
    left: 50px;
}

応用として、サイドバー項目が全部で5個あったら「nth-of-type」で上から4番目と5番目を固定することもできます（位置はそれぞれで調整します）。

CSS
.hatena-module:nth-of-type(4) {
    position: sticky;
    top: 100px;
}

.hatena-module:nth-of-type(5) {
    position: sticky;
    top: 400px;
}

デザインテーマによっては動かないかもしれません（このブログはMinimalismです）。

最後に、自分のブログでできないのは悔しいので、何度もチャレンジしてやっと動くようになったときは、あきらめないでよかったとうれしい気持ちになりました。