Google Bloggerのカスタマイズ備忘録ー６

0 Blogger

Beer Slider による画像比較例
これまでは比較すべき画像を１枚単位で観るだけだったので、同一画面内でスライダーを使った画像の比較が欲しいと思っていた。

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

Beer Slider とは

　例えば、レンズの絞り値による描写の違いとか、画像処理の前後などはそれぞれの画像を１画像づつ見ていたのでは違いが判り難いし、行ったり来たりするのも面倒だった。　本当は FancyBox の機能として比較が出来たら拡大中でも比較出来たりするのだろうけど、そんな機能はないので別のツールを使って画像比較機能を実現させる事にした。　ググってみたところ「Beer Slider」というのが簡単そうだったので導入してみた。　下の画像は撮影した画像に納品用処理した前後を比較した例題である。

納品用の処理前後の画像比較例（SONY ILCE-9M3 ISO:12800）

　比較としては判り易くなったけど、拡大してピクセル等倍でのノイズ感の比較などが出来ないのがちょっと残念だ。　ピクセル等倍で比較が必要な場合は別途「BeerSlider」画像を用意しなければならない。

Beer Slider の導入

　導入手順は3ステップで、Webページの本体xmlにcssとjsを記述し、記事ページのhtmlにコードを記述する必要があるけど難しくは無い。

css の記述

　基本的なcssは製作者側で用意されているので、そのURLを記述すれば良い。　<head>～</head>内に下記のコードを追加します。　僕の場合は<HEAD>の直下付近に記述している。

<head>
　:
 
<!-- Beer Slider : CSS -->
<link href='https://unpkg.com/beerslider/dist/BeerSlider.css' rel='stylesheet'/>

　:
　:

　ちなみに上記のcssだけではスライダーを端まで移動させると画像ラベルが折り返されて見苦しいので、僕のテンプレート内にあるcss記述群内部に追加のcssを記述している。

<b:skin><![CDATA[
　:
　:

/* 境目にラインを追加 */
#slider .beer-reveal {
  border-right: solid 2px hsla(0, 0%, 100%, .5);
}
/* 左側のラベルスタイル */
#slider .beer-reveal:after {
  color: #000000;
  white-space: nowrap;
}
/* 右側のラベルスタイル */
#slider:after {
  color: #000000;
  white-space: nowrap;
}

　:
　:
]]></b:skin>

JavaScript の記述

　<body>～</body>内の最後の方に下記のコードを追加します。　</body>の直上あたりに各種スクリプトがあるので、その辺り記述します。

　:
　:

<!-- Beer Slider -->
<script src='https://unpkg.com/beerslider/dist/BeerSlider.js'/>
<script crossorigin='anonymous' integrity='sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=' src='https://code.jquery.com/jquery-3.4.1.min.js'/>
<script>
$.fn.BeerSlider = function (options) {
    options = options || {};
    return this.each(function () {
        new BeerSlider(this, options);
    });
};
$(&quot;.beer-slider&quot;).each(function (index, el) {
    $(el).BeerSlider({ start: $(el).data(&quot;start&quot;) });
});
</script>

　:
　:
</body>

　このスクリプトは記事内に複数のスライダーを配置できるもので、スライダーを１つだけ配置する場合はもっと簡潔な記述が可能です。

記事内への記述

　記事ごとに記述する内容ははこの部分で、編集中の記事ページをHTML表示に変更し、スライダーを表示したい箇所に下記のコードを挿入します。

　:
　:

<div style="text-align: center;">
<div class="beer-slider" data-beer-label="右側画像" id="slider" data-start="50">
  <img alt="" src="右画像のURL" width="640" />
  <div class="beer-reveal" data-beer-label="左側画像">
    <img alt="" src="左画像のURL" width="640" />
  </div>
</div>
<div style="text-align: center;">比較画像のタイトル</div>
</div>

　:
　:

　最初に記述するのが「右側」の画像である事を意識しておく必要がある。　なお、タイトルが不要であれば
　<div style="text-align: center;">比較画像のタイトル</div>
の１行は要りません。
　ちなみに、比較する画像はサイズを同一にした方が良く、画像がBlogger内の画像であれば
　https://blogger.googleusercontent.com/img/～～～～/s640/DisplayImageA.JPG
の様に/s640/などの横幅を指定すれば所望の横幅にリサイズされた画像がサーバーから送られる。　この例では横幅を640ピクセルにリサイズした画像を送ることになる。　大きな画像をクライアント側でリサイズすると通信量が増えるのでBloggerの機能を活用すべきです。
【追記】
data-start="50" と記述してある部分でスライダーの初期位置を指定できます。　記述しなければ50%（中央）ですが、data-start="25" と記述すれば、画面左側から25%の位置がスライダーの開始位置になります。

おわりに

　久しぶりにBloggerのテンプレートを修正しました。　これまで jquery 3.4.1 を使っていたので、より新しい 3.7.1 にしたところ FancyBox が正常に動作しなくなった。　急いで 3.4.1 に戻しましたが、様々な機能を入れるとライブラリなどのバージョンによる影響も受けるので悩ましいところです。
　長くBloggerを利用していますが、Googleはブログ機能に関して使い難いままです。　新たにブログを始める人は「WordPress」などを使う事をお勧めします。

コメントを投稿

Sponsored Link