読者です 読者をやめる 読者になる 読者になる

ゆとりごと

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

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

雑記

スポンサーリンク


オススメ記事 実用性が高いオススメの文房具20選!
マイルって良いな!ANAマイルで旅行したらもっと貯めたくなった!

コピペ一発でサイドバー固定させようぜ!

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

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

 

きっかけ

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

f:id:s_dango:20160216143804p:plain

かっこいいねえ。

導入したいねえ。

サイドバーでプロフィールを固定したらもしかしたら読者とフォロワー増えるんじゃねえ?

などという夢見事を考えながら、サイドバー固定を導入することに。

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

www.dekihiroyoshi.com

どうやらコピペ数発でサイドバーを固定できるらしい。

そしてはてブ見てみたらとある方もこれを導入したようだ。

で、「サイドバー固定したる!」と早速コピペしてみたら…

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でご覧の方は、今ごろサイドバーのフォローボタンが固定されているはず!

フォローミー!!!!!

f:id:s_dango:20160216140843p:plain

↑少し前までプロフィール固定してました。

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

 

あと、上の部分

と、

下の部分

は別々のところに記入してもちゃんと動作する。

たとえば上をヘッダに、下をフッタにしても使用可能。

ただし上下が逆転するとサイドバーが固定されないので注意。

 

 

※もし不具合等あれば随時更新していく…予定。不具合があればね。

「レスポンシブルだとスクロール途中でいきなり飛んで来る!」という不具合を解決して頂きました。

ありがとうございます!

↓こちらから

liberal-arts-toshitiru.hatenablog.jp

 

 

おしまい。