20150320-top2

Blogger PC カスタマイズメモ その1

今回は、Blogger PCページのカスタマイズのメモです。

サイドバーの人気の投稿をスクロールした時に固定表示させたかったので…
まずはネットで検索です(^_^)/
テンプレートはシンプルってやつです。

最初に見つけたページは…

参考:チームノマド

こちらのページのコードだと、フッターに隠れてしまうので…
フッターの上で止まるように出来るコードを更に検索!
しかし、どれも難しい(;´Д`)ハァハァ

そんな中、とても良いサイトを発見することが出来ました!

参考:KOKE NO ICHINEN

このコードなら、簡単にフッターの上で止めることが出来ました(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 入れてみました。


これで何とか上手く収まりました。
めでたしめでたしε-(´∀`*)ホッ

20150322

スマさんのブログ。
1/fゆらぎ(PCトップ)


【追記】
記事末尾がが人気の投稿ガジェットの元の位置より上にある時…
上のガジェットと重なるバグがあったので改善方法思案中(^_^;)


思案した結果…
またまた困った時はCSS追加って事で(笑)

#sidebar-right-1 {
  min-height:3600px;
}

サイドバーの最低の高さを、ガジェットの高さにして…
僕の場合は3600pxでテストしました。

Bloggerが今ちょっとおかしくなってるみたいですが…
テストブログでは上手くいきました。

にほんブログ村 釣りブログ ソルトルアーフィッシングへ にほんブログ村 釣りブログ タコ釣りへ

No Comments

コメントはこちらから ▽