はてなブログでサイドバーを固定して追従させるカスタマイズ

どうも！フジグチです！

今回はPC表示時にサイドバーを追従させるカスタマイズ方法を紹介します。

PC表示時には記事本文を読み進めると、サイドバーが表示されているエリアが途中からただのスペースになってしまい、少し寂しいですね。

サイドバーを追従させることで、アクセスの多い注目記事を追従させブログ内の回遊率を上げたり、アフィリエイトをされている方なら、キラーコンテンツに誘導しやすくなるのではないでしょうか？

サイドバーを固定して追従させる

まずは動作デモをご覧下さい。

ヘッダー

メイン

サイド

フッター

このCSSはサイドバーの最後にあるモジュールを固定するコードなので、固定表示したいモジュールを予め最下段にしておく必要があります。

メモダッシュボード > デザイン > スパナマーク > 入れ替えたいモジュールにカーソルを合わせて十字カーソルになった状態でドラッグすると、モジュールの順序を入れ替えることが出来ます。

サイドバーを固定して追従させるCSSは以下のコードになります。

#box2 {
  display: flex;
}
.hatena-module:last-of-type {
  position: -webkit-sticky;/*safari対応*/
  position: sticky;
  top: 10px;/*ここで上からの距離を調整*/
}

たったこれだけです。簡単ですね。

しかしはてなブログでこのカスタマイズを適用させる場合は、うまくいかないこともあるかもしれません。

CSSが効かない場合

overflow: hidden;が使われている

固定しようとしている要素の親以上の要素にoverflow: hidden;が使われていると効きません。

お使いのテーマでこのCSSが使われていると追従させることが出来ませんので、どうしても使いたい場合はJavaScriptに頼りましょう。

カラムをfloatで組んでいる

テーマのカラムの組み方の指定方法は様々です。

「カラム」とは記事が表示されているメインの部分と、サイドバーが表示されている部分です。

このブログは２カラムです。（PC表示時）

人気テーマで言うと、UnderShirtやHaruniはカラムを組むのにflexboxを使っていますが、Minimalismやbrooklynなどはfloatを使ってカラムを組んでいるので、上記に記述したCSSでは追従させることが出来ません。

その場合は

#content-inner {
  display: flex;
  justify-content:space-between;
}
#box2 {
  display: flex;
}
.hatena-module:last-of-type {
  position: -webkit-sticky;/*safari対応*/
  position: sticky;
  top: 10px;/*ここで上からの距離を調整*/
}

とすることで、追従させることが出来るようになるテーマもあります。

しかし、デザインの枠組みをいじることになり大きくデザインが崩れることもあるので、くれぐれも自己責任でお願いします。

はてなブログのバグ？

これは原因が分かっていないのですが、当ブログと妻のブログでは最初に記述したCSSでは適用できず、#box2～の部分を省略した下記のコードで適用することが出来ました。

.hatena-module:last-of-type {
  position: -webkit-sticky;/*safari対応*/
  position: sticky;
  top: 10px;/*ここで上からの距離を調整*/
} 

はっきりとした原因は分かりませんが、サイドバーの一番上にHTMLモジュールを追加すると、HTMLの階層構造が入れ替わっているようなのです。

デフォルトHTMLの階層

親  <box2>
子     <box2-inner>
孫         <hatena-module>

一番上にHTMLモジュールを追加

親  <box2>
子     <box2-inner>
子     <hatena-module>

はてなの仕様なのかバグなのか分かりませんが、こういうこともあるようです。

まとめ

JavaScriptを使わずにCSSだけで出来るので、気軽に導入できるお得感がいいですね。

サイドバーの空いているスペースが気になったら、使ってみてください。

最後までお読み頂きありがとうございました。