今回は、Blogger PCページのカスタマイズのメモです。
サイドバーの人気の投稿をスクロールした時に固定表示させたかったので…
まずはネットで検索です(^_^)/
テンプレートはシンプルってやつです。
最初に見つけたページは…
参考:チームノマド
こちらのページのコードだと、フッターに隠れてしまうので…
フッターの上で止まるように出来るコードを更に検索!
しかし、どれも難しい(;´Д`)ハァハァ
そんな中、とても良いサイトを発見することが出来ました!
このコードなら、簡単にフッターの上で止めることが出来ました(o^―^o)
まずは </head> の直前にjQueryのコードを挿入。
<!-- jQuery --> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js' type='text/javascript'/> <!-- /jQuery -->
このコードは僕が挿入したコードとは違うのですが…
Bloggerが勝手に変換するので、変換後のコードです。
次に、人気の投稿をスクロールした時に固定表示させるコードを挿入。
これは </head> の直前でも </body> の直前でもどっちでも良いはずですが…
今回は読み込みは後で良いので </body> の直前にしました。
<!-- サイドバー追従 --> <script type='text/javascript'> (function(){ $(function(){ var fix = $('#PopularPosts1'), //固定したいコンテンツ side = $('#sidebar-right-1'), //サイドバーのID main = $('#maincont'), //固定する要素を収める範囲 sideTop = side.offset().top; fixTop = fix.offset().top, mainTop = main.offset().top, w = $(window); var adjust = function(){ fixTop = fix.css('position') === 'static' ? sideTop + fix.position().top : fixTop; var fixHeight = fix.outerHeight(true), mainHeight = main.outerHeight(), winTop = w.scrollTop(); if(winTop + fixHeight > mainTop + mainHeight){ fix.css({ position: 'absolute', top: mainHeight - fixHeight }); }else if(winTop >= fixTop){ fix.css({ position: 'fixed', top: 0 //固定する位置 }); }else{ fix.css('position', 'static'); } } w.on('scroll', adjust); }); })(jQuery); </script> <!-- /サイドバー追従 -->
人気の投稿のガジェットのIDは…
<b:widget id=’PopularPosts1′ locked=’false’ title=’人気の投稿’ type=’PopularPosts’>
とありましたので…
#PopularPosts1(#はIDですよ!って事ですね。)
サイドバーのIDを探してみると…
<b:section-contents id=’sidebar-right-1′>
となってるので…
#sidebar-right-1
固定する要素を収める範囲は自分で決めないといけないです。
今回はタブ(メニュー)の下からフッターの上までの範囲ですので…
まず最初に <div class=’main-outer’> を検索。
今回名前を #maincont としたので…
その真上に <div id=”maincont”> を挿入。
maincont は僕が勝手につけた名前です。
次に <footer> を検索。
真上に </div> <!– maincontおわり –> を挿入しました。
これで本当に良いのかな?(´・ω・`)
と、思いつつやってみたら、ちゃんと動きました。
ですが、問題が発生(;´Д`)
人気の投稿がサイドバーからはみ出してるし…
フッターにくっ付いてしまってます`;:゙;`;・(゚ε゚ )ブッ!!
と言う事で、困った時はCSS追加です(笑)
/* 追従ガジェット設定 */ #PopularPosts1 { width: 200px; height:auto; padding-bottom: 30px; }
人気の投稿ガジェットの幅を他のガジェットに合わせて 200px
下に余白を 30px 入れてみました。
これで何とか上手く収まりました。
めでたしめでたしε-(´∀`*)ホッ
スマさんのブログ。
1/fゆらぎ(PCトップ)
【追記】
記事末尾がが人気の投稿ガジェットの元の位置より上にある時…
上のガジェットと重なるバグがあったので改善方法思案中(^_^;)
思案した結果…
またまた困った時はCSS追加って事で(笑)
#sidebar-right-1 { min-height:3600px; }
サイドバーの最低の高さを、ガジェットの高さにして…
僕の場合は3600pxでテストしました。
Bloggerが今ちょっとおかしくなってるみたいですが…
テストブログでは上手くいきました。


