サイドバーの固定

サイドバーの固定とはブログを読みすすめてスクロールしていくと、パソコンの場合、サイドバーの最後の要素がずっと固定されたままになっていることです。これは当ブログでも行っています。(今は変わっています)
f:id:pocopota:20210209180114p:plain
こんな感じですね。ずっとスクロールしても最後の要素だけは、ずっと固定されています。この画像の場合は「人気記事」が固定されていますね。
今回はコレを行う方法を解説していきます。

固定方法

固定する要素の設置

まずは固定するものがなければ始まりません。デザインの設定からサイドバーに要素を追加しておいてください。一番最後のものが固定されますので、固定したいものは一番最後に持ってきておいてください。
最新記事や人気記事などを固定するとそこからユーザーがその記事を見てくれるかもしれません。

コード

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

このコードをデザインCSSに貼り付けてください。
それだけです。

もしかすると、はてなブログのテーマによっては製作者様の作成の方法により上記の方法が効かない場合があります。その場合は下のコードをデザイン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;/*上からの距離を調整*/
}

これでほとんどのテーマで適用ができると思います。もし効かなかった場合は教えて下さい!調べてみたいと思います。

調整

「上からの距離を調整」の部分で画面の上からの距離を調整できます。数値を変えてみてください。

完成

コレで完成となります。これを行うことでブログの回遊率が上がったり、アフィリエイトをしている人はタップ率が上がるかもしれません。
是非いいブログライフを!