ないないずむ

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

ないないずむ

ガジェットとライフハック好きな高専生が、自分の価値観を広めたいブログ。

解説付き!フッターで止まる、サイドバーを固定する方法【はてなブログ】

f:id:nainai71:20170218140301p:plain

 

こんにちは!ないないです!

 

ブログのサイドバーってどうしていますか?

「いろいろつけたいけど長すぎると記事が終わった後冗長になるし…」

「かといってあまりつけないと記事の途中で空っぽになってさみしいし…」

ってな方いませんか?

ぼくはそんな人で、せっかくならサイドバーのデッドスペースを活用したいと思い、プロフィールを固定、追従しました

 

固定をする際、たくさん調べてもなかなか自分の思った通りにできるものが無かったので、自分なりにコードを解析、編集、統合し、納得のいくものができたので紹介したいと思います。

解説もついているので、オリジナルでブログをカスタマイズしたいけどプログラミングとかまったくわからないよ~という人には参考になるのではないでしょうか。

 

※これから紹介するものはあくまで、全くjQueryについて知識がない初心者が考えたものです。もし間違っている箇所を見つけたらご指摘いただけると助かります。

 

 

参考にしたサイト

たくさんのサイトを参考にさせていただきました。その中でも、今回コード作成に使ったものや、実際に取り入れたものを載せていきます。

 

jQueryを参考にしたサイト

まず「固定する」という動きを付けるためには、JaveScriptやjQueryといったプログラムコードを書かなくてはいけません。 jQueryは、省略版JavaScriptといったところです。

ウェブページの基本は

と覚えておきましょう。

 

さて、そのjQueryの改変元のページはこちらです。

jQueryでフッターに重ならずに「空いた領域をフルに使い切る追尾型サイドバー」を実装する方法 * prasm

こちらのものを土台として作りました。

ただ、こちらのサイトはサイドバーの一番下端を基準に固定してました。

ぼくがやりたかったの「サイドバーの一番下の項目をまるまる固定する」だったので、それに関してこれらのページを参考にしました。

最近はやりのフッターに重ならない追尾するサイドバーをjQueryで作ってみました! | Select *

コピペ一発!サイドバー固定! - ゆとりごと

 

上の合計3ページのコードを変数名を変えながらつぎはぎして、中の数値もいじって、オリジナル(?)として作り替えました。

 

 

cssを参考にしたサイト

ぼくのブログでは、この記事の公開現時点でレスポンシブデザインにしてあります。

はてなproを取得したら変えるつもりですが、それまでの代替として使っています。

そのためスマホでぼくのブログを見ると、画面が小さいため追従プロフィールが記事に重なって見えてしまいます。

それをスマホで見るときはcss(デザイン)を変えることで、見えなくしてやろうといったところです。

このことについて詳しく書かれていたページはこちらです。

はてなブログでサイドバー固定をスマホ時に消しレスポンシブでも活用する方法 - TureTiru Times

 

基本的にはここのページ通りにやればよかったのですが、ぼくはブログテーマを使っているため、「サイドバー用の緊急見出し」というもののデザインが合いませんでした。

なのでその箇所を自分のブログテーマに合わせて変えました。

 

 

コピペ+αで終了!コードと解説

コピペです。コピペだけでは終わりませんよ。

cssを使わないのであればコピペだけでもおっけーです。)

 

※以下のカスタマイズに伴い発生した不具合に関しては、自己責任でお願いします。試す方はしっかりとバックアップを取ってからにしましょう。

 

これから解説するのは

「サイドバーの一番下の項目を、記事中サイドバーが終わった時から固定(追従)を始め、フッターに重ならないように、フッター前で止まる」

かつcssに関しては

「レスポンシブデザインの人がスマホで表示させるときに、サイドバーの一番下の項目を消す(見せないようにする)」

というものです。つまりcssを入れると、スマホで表示(またはPCでも、サイドバーが無いウィンドウの大きさで表示)したときに一番下の項目は消えてしまいますので注意してください。

 

jQuery

コード

 まず上のコードを「デザイン設定」→「フッタ」の中にコピペしましょう。

自分のPC上でしか確認はしていませんが、これでサイドバーの一番下が固定されるはずです。

 

解説

簡単に解説をしようと思います。

冒頭にも書きましたが、ぼくは全くjQueryに触れたことがありません。学校で習ったc言語の知識をベースに、自分なりの解釈でコード上からなんとなく理解しています。もし間違いが見つかった場合は、お手数ですがご指摘お願いします。

コード中にvarというものが多く書かれていますが、それらは「イコールの右辺のものを左辺として呼びますよ」という宣言です。

  • 1~2行目:サーバーにあるjQueryを呼び出しています。これから使うよという決まり文句です。ほかのカスタマイズで、フッタ内にすでにこの文章がある方は追加の必要はありません。
  • 8行目:ウィンドウのロードが終わってから以下を読み込むよってことです。こうすることで中途半端な位置から固定を始めるのを防ぎます。
  • 25~34行目:このコードの肝です。この中にあるifの条件式を変えることで、好きな場所から固定をはじめ、好きな場所で固定をやめることができます。

25~34行目の詳細を説明します。

まずこちらの図をご覧ください。

f:id:nainai71:20170218140804j:plain

 

 

条件式を考えるときに作った図をきれいに書き直したんですが…まだ汚いですね。笑

25行目のifはつまり「ウィンドウの下端がサイドバー最後の項目の下端を越したら、次の処理をする」という意味です。

27行目のifは「ウィンドウの下端がフッターの上端を越したら」という意味です。

これらの条件式を図中の好きな場所に変えると、その場所で止めたり、動かしたりができるようになると思います。

 

 

CSS

続いてレスポンシブデザインを使っている方向けのcssです。

はてなブログでサイドバー固定をスマホ時に消しレスポンシブでも活用する方法 - TureTiru Times

まずこちらの記事通り、指示に従ってください。

そのうえで、「サイドバー用の緊急見出し」という箇所(具体的には、h6の中身です)を変えていきます。

使うテーマによってデザインが違うので、とりあえずあなたのデザインcssを探してみましょう。

「デザイン設定」→「デザインcss」を開いてください。

その中の一番上に@import url("http://~~~.css");と書かれたものがあるはずです。

そのhttp~.cssまでをコピーして、新しいウィンドウで開いてください。

するとなんだかよくわからない文字列が並んだページに行きつくと思います。

そこで「Ctrl+F」を押し、「sidebar」と入力すると、この文字列で文章内を検索できるはずです。

検索で出てこない場合は、あなたのテーマの製作者さんが違う変数名でサイドバー設定をしているので、ぼくにはなんともできません。(-_-;)

ここからはテーマによって違うので何とも言えませんが、「サイドバー用の緊急見出し」内のコードと似たようなものを付近で探し、それをh6の中かっこ内に置き換えましょう

 

スマホで確認し、消えていたら完成です。

 

 

 まとめ

ところどころ冗長でわかりにくい表現などあったと思います。

もしご指摘、質問等がありましたら、コメントでもツイッターでもコンタクトをとっていただければ、わかる範囲でお答えします。

 

この記事を読んで、少しでもあなたのブログカスタマイズの参考になれば幸いです。