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

【はてなブログ】サイドバーを追従させる方法、記事横の余白を解消

当サイトにお越しいただきありがとうございます。

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

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。

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

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

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

完成系はこちらです↓

f:id:sanrisesansan:20201225211147g:plain

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

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

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

[jin_icon_checkcircle color=”#66cdaa” size=”18px”]この記事の信用性

2019年4月から「コスパ・お得」をテーマに発信している当サイト「さんログ」を運営、月間平均36000PVの雑記ブロガーです。
目次

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

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

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

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

まとめ

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

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

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

NEXT→サイドバーの「プロフィール」大きくする方法

最後まで読んでいただき、ありがとうございます。

あわせて読みたい
はてなブログ基本カスタマイズ、手順まとめ【初心者向け】 今回は、はてなブログの基本カスタマイズ記事をまとめてみました。 いろんな方のブログから情報を得て、自分なりにカスタマイズした内容をくわしく見ていきたいと思います。

 

ポチ
この記事が良いと思ったら、ポチっ!してくれると嬉しいです!

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

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

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

カスタマイズ性の高いテンプレートやSEO対策機能で、プロフェッショナルなブログを作り、ブログの魅力と集客力を高めましょう!

\ サーバーやインストール不要、2年版でお得!

\ はてなPROで出来るカスタマイズまとめ

コメント

コメントする

目次