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

かんがえちゅう!

出来寛祥です。多趣味に生きていこうと思って、楽器とかスポーツとかいろいろやってます。プログラミングも好き。

はてなブログで好きな要素をコピペだけでサイドバーに固定する方法!

ブログ ブログ-カスタマイズ

sponsor

こんにちは。できです。

はてなブログってあんまりカスタマイズする要素が用意されていないので、自分で色々いじることになりますよね。でも、ちょっと凝ったことするにはJavascriptやjQueryを学ばなければなりません。

そんなの面倒くさいと思うので作りました!コピペ一発で出来るコードです。初回はサイドバーの最後の要素を固定するコード!

コピペをする場所や、細かい注意点など次の記事にまとめたので、わからない人はまずこちらをどうぞ。 

www.dekihiroyoshi.com

 jQueryで最後の要素だけ取得する方法

f:id:hiroyoshi-deki:20151127190239p:plain

htmlってタグを入れ子にして記述するわけですが、同じ階層に並んでいるボックスの最後だけ操りたい時が多々あります。そんなときに使えるのが「:last-child」です。

:last-childは幾つか並んだ要素があるとき、その要素を指定して、そのまま後ろに:last-childとつけるだけで最後の要素として指定できます。

 

f:id:hiroyoshi-deki:20151127190713p:plain

:last-childの使い方分かったでしょうか?

好きな要素を固定するjQueryのソースコード

その結果を踏まえて、外側のボックス自体を指定して固定するコードは次のようになります。jQueryのソースが書いてあるか注意してください。心配な人は記事トップに貼った、リンクからソースコードの貼り方を確認してください。

<!--サイドバー固定-->
<script>
$(function(){
  var sideLast = $("#box2-inner>div:last-child");
  var sideLastTop = sideLast.offset().top;
  var sideLastWidth = sideLast.width();
  var win = $(window);

 win.scroll(function(){
  if(win.scrollTop() > sideLastTop) {
   sideLast.css("position",'fixed');
   sideLast.css("top",'20px');
   sideLast.css("width",sideLastWidth);
  }else{
   sideLast.css("position",'relative');
  };
 });
});
</script>

© 2015 かんがえちゅう!