今回は、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が今ちょっとおかしくなってるみたいですが…
テストブログでは上手くいきました。
Be First to Comment