ゆとりごと

ゆとりの団子が綴るグルメと旅行と趣味のブログ

コピペ一発!サイドバー固定!

スポンサーリンク

サイドバー一番下のモジュールを固定しよう!

※導入方法だけ読みたい方は「きっかけ」をすっ飛ばして「導入」からご覧ください。

※はてなブログ以外では試していないのでどうなるか分かりません。

きっかけ

とあるブログを見ていたら、サイドバーの一番下のモジュールがスクロール最中に上部で固定さました。

f:id:s_dango:20160216143804p:plain

かっこいいなー!

導入したいなー!

 

サイドバーでプロフィールを固定したら、もしかしたら読者とフォロワー増えるかもしれません。そんな淡い期待を抱いてサイドバー固定を導入することにしました。

そんなわけでサイドバーの固定方法をググってみたらこんな記事を発見。

どうやらコピペ数発でサイドバーを固定できるみたいです。そんなに簡単に導入できるのであればやらない手はありません。

「よっしゃ!これでサイドバー固定したる!」と思い、早速コピペしてみたら…

f:id:s_dango:20160216125839p:plain

あれれれれれれれ!!!!?

なんだなんだ!?

サイドバーの一番下に設置したプロフィールが何故かとんでもないタイミングで現れて固定されてしまいました。確かにサイドバーにプロフィールが固定されたけど、そうじゃなくてだな…。これは見たらブラウザバックしちゃうレベルでよろしくありません!

 

なにがいけなかったのかを調べてみたら、以下のような記事を発見。

jQueryが思い通りに動かない時は読み込みの順番を遅らせてみよう。Twitterの優しさに号泣した話。

一応説明しておくと今回の不具合はjQueryの読み込む順番に原因がありました。
具体的に言いますと、サイドバーに設置していた画像よりもjQueryの方が先に読み込まれてしまうために発動のキーにしていた高さが画像の分計算されず、予定よりも高い位置でjQueryが発動してしまったということです。
これを解決するには
$(function($) {
という部分を、
$(window).load(function() {
とするだけ。
後者は「画面が完全にロードされたら発動」という意味のコードです。HTMLやCSSを全て読み込んだ後に飾りとしてのjQueryを読み込むので不具合が起きづらいと先ほどの記事の著者は書いていました。

なるほどなるほどー、なんとなく漠然と意味は分かった気がします。

要するにjQueryの読み込む順番に問題があったということですな!うん!

 

で、これを参考にして書き直したものを以下に記載。

導入

導入すると、サイドバーの一番下のモジュールがスクロールしてもページ上部で固定されます。

 

1.まずははてなブログの「デザイン」編集画面へ。

2.「カスタマイズ」→「フッタ」

f:id:s_dango:20160216132512p:plain

 

3.フッタに以下のコードをコピペするだけ!

 

これで終わり!

コピペ一発!簡単!

PCでご覧の方は、今ごろサイドバーでプロフィールが固定されているはず!

フォローミー!!!!!

 

ちなみに一番下のモジュールしか固定できませんので、「プロフィールと広告を一緒に固定させたい!」というのであれば、テンプレートを使わずにHTML編集を使いましょう。

 

あと、上の部分

と、

下の部分

は別々のところに記入してもちゃんと動作します。たとえば上をヘッダに、下をフッタにしても使用可能です。ただし上下が逆転するとサイドバーが固定されないので注意。 

レスポンシブの場合

「レスポンシブだとスクロール途中でいきなり飛んで来る!」という不具合がありました。レスポンシブデザインは以下の方法を試してみてください。

 

1.サイドバーのモジュール『HTML』を追加して、下記のコードをコピペ。 

 

f:id:s_dango:20170518233942p:plain

↑こんな感じです!

この要素内にサイドバー固定させたい内容を入力しましょう。

2.以下のコードをCSSに追加。

これでスマホやタブレットの小さい画面で表示されたときにサイドバーの一番下のモジュールが表示されなくなります。「表示されなくなるのかよ!」と言われるかもしれませんが、スマホやタブレット画面の場合サイドバーの一番下のモジュールはそもそも目に止まりにくいので、これによる被害は軽微なもののはず…!?