Google Bloggerのカスタマイズ備忘録－３

0 Blogger



Vaster2の導入とカスタマイズ その３

戻るボタンを設置

戻るボタンは便利
気の利いたサイトでは記事をスクロールして下へ読み進んだ時、先頭へ戻るボタンが表示されます。　これは便利なので組み込みたいと思います。　なお、 class は pagetop としています。

先ず、<head>～</head>内にスクリプトを記述します。　今回はスクロールが450に達したら先頭へ戻るボタンを表示する様にしています。
<!--先頭へ戻るボタン-->
<script>
$(function() {
    var topBtn = $(&#39;.pagetop&#39;);
    topBtn.hide();
    //スクロールが450に達したらボタン表示
    $(window).scroll(function () {
        if ($(this).scrollTop() &gt; 450) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スクロールしてトップ
    topBtn.click(function () {
        $(&#39;body,  html&#39;).animate({
            scrollTop: 0
        },   500);
        return false;
    });
});
</script>

次に、CSSへ「pagetop」の体裁を記述を追加します。
/*   先頭へ戻るボタン
--------------------------------------------------- */
.pagetop {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 15px;
}
.pagetop a {
  display: block;
  background-color: #666;
  text-align: center;
  color: #FFF;
  font-size: 30px;
  text-decoration: none;
  padding: 5px 10px;
  filter:alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

更に、.xmlの </body> 直前あたりにボタン本体の記述を追加します。　今回は「先頭へ戻る」とか書かないで、font-awesomeにある「へ型文字」を使いました。
  <!--先頭へ戻るボタン-->
  <p class='pagetop'><a href='#container'><i class='fa fa-chevron-up'/></a></p>

投稿記事の写真拡大 - Lightbox

FancyBox 3
Blogger標準のLightboxはレスポンシブ対応してないので、スマホで見ると写真拡大しにくいし動作が妙です。　そこで、無料で気の利いた Lightbox に差し替えたいと思っていました。　色々と調べてみると、「FancyBox 3」が無料で使えてiPhoneなどのフリック操作にも対応しているので導入する事にしました。

導入手順などはDeepak Kamatさんの記事を参考にさせて頂きました。

先ず、BloggerのLightbox機能をオフにします。　Bloggerの設定ページにある「ライトボックスで画像をアピール」を「いいえ」にします。

次に、先に書いた先頭へ戻るボタンと同じような場所に以下の赤字部分を記述します。
<!--先頭へ戻るボタン-->
<p class='pagetop'><a href='#container'><i class='fa fa-chevron-up'/></a></p>

<!-- ▼▼▼ FancyBox 3 is an image / content light-box plugin ▼▼▼ -->
<!-- FancyBox CSS -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" rel="stylesheet" type="text/css"/>
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- FancyBox 3 -->
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script>

<script type="text/javascript">
//<![CDATA[
 $(document).ready(function(){
   /**************************
   This part makes sure we select only the images and photos that is supposed to appear in a lightbox
   **************************/
   $(".post-body a img").each(function(){
     var isImage = /\.(?:jpg|jpeg|gif|png)$/i.test( $(this).parent("a").attr("href") );
    
     if ( isImage ) {
       $(this).parent("a").attr('data-src', $(this).parent("a").attr("href"));
       $(this).parent("a").attr('data-fancybox', 'postLightBox' );
     }
    
     else {
       // .. do nothing
     }
   });


   /**************************
   This part initializes FancyBox on the qualifying images
   **************************/
   var options = {
       infobar  : true,
       buttons  : true,
       speed    : 300,     // Animation duration in ms
       margin   : [40, 20] // Space around image, ignored if zoomed-in or viewport smaller than 800px
   };
  
   $("[data-fancybox]").fancybox( options );
 });
//]]> 
</script>
<!-- ▲▲▲ FancyBox 3 is an image / content light-box plugin ▲▲▲ -->
これで新しい Lightbox がいい感じで動作してくれますが、動作開始時からサムネイル一覧を出す方法が判らない。　オプション指定が上手く認識されない様です。　もっと良い Lightbox があれば差し替えるかもしれません。

まとめ

Bloggerのカスタマイズに関して三回に渡って記載しましたが、普通はBloggerを使わない方が楽だと思います。　Bloggerだと色々と手当しないとダメなのでいじる楽しみがあり、SONYのカメラで苦労してスポーツ撮影する感じに似ています。
そんな訳で、しばらくはBloggerを使い続けると思います。
Sponsored Link
Sponsored Link

0 件のコメント :

コメントを投稿

Sponsored Link