【iPhoneユーザー必見!】プライム会員でAmazon ミュージック Unlimitedを月額980円にする手順

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

悩み人

はてなブログでサイドバーを追従させる方法ないかな?

悩み人

記事横の余白を解消したいな。

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

どうも、ブログ運営者のポチ(@sunrise_033)です。

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

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

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

完成系はこちらです↓

f:id:sanrisesansan:20201225211147g:plain

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

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

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

この記事を書いた人
「高コスパ」大好きブロガー:日の出ポチ

「日常のお得なもの」「グルメ」をテーマにしたブログ2つを運営

当ブログの特徴Amazonサービス・Yahooトラベル・節約Wi-Fi・ダイソー・ワークマン

月間54,000PV/収益5桁達成

目次

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

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

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

PCで記事を閲覧すると、サイドバーが横にくるので、長文記事だとサイトバーは上に取り残されてしまうのです。

なんか勿体無いなと思ったので、サイドバーを残す方法を調べることに。

サイドバーの最後のコンテンツを残す方法を発見!

で、調べてると、はてなブログでもサイドバーを残すカスタマイズを記事にされているブロガーさんがちらほら。

結論、サイドバーの最後のコンテンツを追従させるカスタマイズすることで、スクロールしてもサイドバーに存在し続けることができます。

早速、参考にさせていただき、チャレンジしてみました。

ポチ

参考にさせてもらったサイトはこちらです。

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

いつも、カスタマイズでお世話になっているガテン系ブロガー「フジグチさん」のサイトです。

コードを貼る場所

HTMLコードを貼り付けるカスタマイズをしていきます。

貼る場所はデザインカスタマイズ(スパナ)CSSデザイン

f:id:sanrisesansan:20201225213413j:plain:w600

下になるにつれて優先順位が上がります。

HTMLコード

下記のHTMLコードを貼り付けます。

#box2 {
display: flex;
}
.hatena-module:last-of-type {
position: -webkit-sticky;/*safari対応*/
position: sticky;
top: 15px;/*ここで上からの距離を調整*/
}
このコードをデザインCSSに貼り付ければ、サイドバーの最後尾のコンテンツを追従させることができます。

「適用」を忘れずにしてくださいね。

このカスタマイズはテーマによって、適用されないかもしれないこともあるかもです。

(僕の使っているテーマ「Under Shirt」では、反映されました。)

解決策は上記の参考サイトに載っていますので、そちらで確認してみてください。

追従したいサイドバーコンテンツを最後に持ってくる

このカスタマイズはサイドバーの最後にあるコンテンツのみを追従させるので、追従させたいコンテンツはサイドバーの一番下に配置します。

配置方法はデザインカスタマイズ(スパナ)サイドバーを選び、クリックしてサイドバー内にあるコンテンツを移動できます。

f:id:sanrisesansan:20201225212159j:plain:w600

「関連記事」や「注目記事」を設置すると回遊率も上がることも?

最近では、広告コンテンツの追従も解禁になったので、広告を追従させても良さそうです。

スマホ画面が「ぐらつく」時の対処

レスポンシブをしていると、スマホ画面でも同じように反映されますが、

スマホ画面がぐらついてしまう!

という時の対処法も記述します。

それは、PCのみに適応させるコードをいれるというものです。

下記のHTMLコードをデザインCSSに貼り付けます。

@media (min-width: 992px) {#box2 {
display: flex;
}
.hatena-module:last-of-type {
position: -webkit-sticky;/*safari対応*/
position: sticky;
top: 15px;/*ここで上からの距離を調整*/
}}
「適用」を忘れずにしてください。

これで、PC表示のみに適応するようになりました。

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

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

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

「ブログ村ランキング」参加中!
PVアクセスランキング にほんブログ村


この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次