超軽量画像拡大スクリプトLuminousをFC2で使う方法

投稿 2018年07月09日
2
カスタマイズ
FC2JSPluginCustomize

画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。

FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。
初心者向けになるべく事細かに説明したいと思います。

今回はギャラリー形式(前後矢印つき)に しない 方法を書きます。
つまり画像が複数掲載されていても全て単体で開けるようにするという内容です。
また、例によって 私が制作したテンプレートをご利用の方 という対象の狭い説明も含まれます。

サンプル

サンプル① オーバーレイなし

サンプル② オーバーレイあり

Luminousの利点

  • Vanilla JSである点(jQuery依存なしネイティブJS)
  • 動作がまどろっこしくない
  • SEOフレンドリー
Luminous Lightbox2 Colorbox
容量 14.1KB 11.7KB
+
84.8KB(jQuery)
9.2KB
+
84.8KB(jQuery)

Lightbox2, Colorboxは共にjQueryプラグインなのでjQuery本体のファイルが必ず必要です。
そしてjQuery依存の場合は常にバージョンとの互換性に注意する必要があります。
LuminousはネイティブJSなのでその心配がありません。

Light〜, Color〜 はエフェクトが豪華ではありますが、ちょっと脂っこい気もします。
Luminousはスッと出てスッと引っ込むという感じで無駄がありません。
もちろんCSS transitionが効きますので動作は滑らかです。
ただし動画のポップアップなど多機能を求める場合には向かないという面もあります。

SEOフレンドリーというのは、Colorboxを長く利用されている方は aタグrel属性 をトリガーに使っていることがあります。
html5ではhtml4時代のようなrel属性の 独自拡張が認められていません (属性値に好き勝手な値を入れてはいけない という意味です)ので、バリデートエラーになります。
またこのrel属性というのは旧式の スムーススクロールの到達点 に指定されていることがあり、動作が衝突することも。
現在ではrel属性は用いず クラス属性(クラス名指定)カスタムデータ属性 を用いるのが通例です。

導入の仕方

CDNを使う方は以下のページでURL末尾が min.js のJSファイルとURL末尾が basic.min.css のCSSファイルの2点を取得して以下の通り。
luminous CDN

<!--permanent_area-->
<link rel="stylesheet" href="ここにCSSファイルURL">
<!--/permanent_area-->

上記内容(CSS適用のためのlink要素)はテンプレート内の

<link rel="stylesheet" href="<%css_link>" media="all">

の直下に入れてください。
(rel, href, mediaなどの属性の順序は入れ替わっていることがありますが、いずれにしろ %css_link の文字列を目印に)
<!--permanent_area--><!--/permanent_area--> のFC2独自変数に挟まれており、この指定により対象ファイルは個別記事のみで読み込まれるようになります。
全文表示タイプのテンプレートを利用しており、トップページでもLuminousを起動させたい方は 両変数を削除してください。
要約タイプの場合には変数を入れたままにします。

続いて実際にLuminousを動かすための内容(JSのscript要素)は以下の通り。

<!--permanent_area-->
<script src="ここにJSファイルURL"></script>
<script>var luminousTrigger = document.querySelectorAll('.luminous');for (var i = 0; i < luminousTrigger.length; i++) {var luminousElem = luminousTrigger[i];new Luminous(luminousElem);}</script>
<!--/permanent_area-->

上記内容は </body> の直前でOKです。
FC2変数利用の有無はCSSファイルと同じ状態に揃えてください。

以上で必須ファイルの導入は終了です。

続きまして マウスオーバー時に拡大できることを示すオーバレイ表示を追加 したい方は以下のCSS内容をスタイルシート(管理画面下段)の末尾に追加します。こちらは任意です。
追加しなければサンプル①に、追加すればサンプル②の状態になります。

.luminous {
  display: inline-block;
  position: relative;
}

.luminous::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height:100%;
  color: white;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAMAAAANIilAAAAA2FBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8lb+eLAAAAR3RSTlMAAQMEBQYHCAkKDA0ODxATFBgmKTxdXl9hYmZ3fICGi5KUlZeYmpudoKKlpquyubq8vsDKzM7R1dfZ3N7i5Obo6e/x8/n7/WpLgakAAAHOSURBVEjHldfpVsJADAXgtFRQwX0BrSuKqKCI4ILYgrj0/d/IggjTyQ1N8485+U5pJ9wORJRftqrgEKsCaxqvrj5HrEbbFt0IeVO4RdSMQA2taz+ipneiH7QeFZIY9kQ5vN60vrYPuzyIH1wLOxdqzKygEQY21pcqDC3UHAs21rVU/J0nqZwg9cp1R8K+4p4l7aue9pWjs3ifkfbVE8a1nzJhvQXatD2A791dUZv2wKky3Ipnw9Q1R7Dxflct3JrMFdaWnWuPvsyZRJrZmc7RdWKeuQZ2ql+JvNPBsfFbsDW0sT4Mb4t8GpJasGKZOshokzqrxVprkdZbrrNYW2ezRHeGfXOyWV+Za5rMyaJ9dSrq8kqr8ftUp017k6qLYl7tJfY7qSdqsx/1SpIlSXvtaLTzd1YZlJDdZ7M2014n/vQxPauEJclCPbHz9AyLkgV6aue5PdbYMv1vjTdGuG7asvgbq690Fr/oLCslE8ZlXa5BXFHmGsIVbSoCXFGnIscVfabyc9iaiJfSz2GDkmC9J8U9C5pb+LSh9rrKfQYaWWHCBkWNlWb7xcINYbY/4brq341LJ2i5a125hpraRO5Rf2hV2GD3fB7YTcFZnn4BclIbTTX46/4AAAAASUVORK5CYII=) center center /30px 30px no-repeat rgba(0,0,0,.6);
  transition: inherit;
}

.luminous:hover::before {
  opacity: 1;
}

オーバーレイが滑らかでなくいきなり表示されてしまう場合は .luminous::beforetransition 値を inherit から .3s ease-in-out に変更してください。

記事作成時のhtml

今度は記事を書く際にFC2ブログエディター内で利用するhtml内容の説明です。

<a class="luminous" href="画像アドレス">
  <img src="画像アドレス" style="width: 初期表示サイズpx;" alt="代替テキスト">
</a>

aタグへの luminous クラスがポップアップのトリガーになっていますので書き忘れないよう注意。
imgではなくaの方へ指定します。

画像のリンク先を「アルバム」に指定している方はポップアップできずアルバムへ飛んでしまします。
以下のリンク先個人設定で「画像のリンク」を「元画像にリンクさせて表示」に変更してください。
投稿設定

記事作成画面で「改行の扱い」を「自動」に設定している方は上記htmlソースから全ての改行を取り除き、横一繋ぎで記載してください。

「初期表示サイズ」はクリック拡大前の掲載サイズです。
クリックで拡大(原寸表示)させるのですから、掲載サイズは原寸よりも小さめにすることが前提です。

alt属性値の「代替テキスト」の文字は画像を説明するふさわしい文章に書き換えてください。
altそのものを削除したり、「代替テキスト」のままにしたりはせず、書き換えるかあるいは空欄にしておいてください。

例(サンプル画像はalt属性の説明なのでポップアップはしません)

alt属性なし

<img src="https://xxxx.jpg" style="width: 300px;">

書き換えなし

<img src="https://xxxx.jpg" style="width: 300px;" alt="代替テキスト">

適切な内容に書き換え

<img src="https://xxxx.jpg" style="width: 300px;" alt="オードブル チーズ">

無指定

<img src="https://xxxx.jpg" style="width: 300px;" alt="">

疎かにしがちですが画像検索結果を意識する方はしっかりと記載してください。
また、alt属性自体が無い場合バリデート(htmlの正確性チェック)でエラーになります。

ここまでで通常の作業は終了です。

ページスピードに配慮する方向け内容(上級者向け)

個別記事にLazysizesを利用している方への提案を含む内容です。

CSSファイルは外部化せずスタイルシートへ

外部CSSファイルはクリティカルリソースですので、極力一つのスタイルシートとしてまとめることをおすすまします。
必須CSS内容と、オーバーレイが必要な方は追加CSS内容も含め、可能ならば圧縮をしてテンプレートデフォルトスタイルシート末尾へ記載してください。

外部JSファイルをテンプレートhtmlに記載しない

利用頻度が低い場合には記事作成画面の末尾に必要JSファイルを記載するようにしましょう。
その場合には 必須JSファイル内容に実行コード内容(要圧縮)を追加、つまりマージ(合成)を行って一つのファイルにまとめてください。
そして記事末尾に以下のように記載します。

<script>function lazyLoadScript(n){function t(){if(1===e){e=0;var i=document.createElement('script');i.src=n,i.setAttribute('async','async'),document.body.appendChild(i),window.removeEventListener('scroll',t,!1)}}var e=1;window.addEventListener('scroll',t,!1)}lazyLoadScript('ここにJSファイルアドレス');</script>

スピードテストで指摘・減点されない記載の仕方です。
ただしスクロールを行うまでJSは実行されませんので、above the fold内の画像への適用は不向きと言えます。

記事内のhtmlもLazyloading用の記述を用いる

<a class="luminous" href="画像アドレス">
  <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" style="width: 初期表示サイズpx;" alt="代替テキスト">
</a>

luminousクラスがaタグへ、lazyloadクラスがimgへの追加になっているのを確認してください。
また、オーバーレイを採用する方はshadow-attachmentクラス(私のテンプレート専用「画像にシャドウをつける」独自クラス)や、その他ご自身が利用しているクラス装飾などがあれば aタグの方へ 追加するようにしてください。

特別編 画像タイル

画像タイル表示をご利用の方向け。

.imgBox .luminous::before {
  z-index: 3;
}

.imgBox .luminous {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
}

.imgBox .luminous img {
  position: static;
}

htmlを一部だけ抜き出すと

<div class="box">ここにluminous用html</div>

まとめ

luminousはギャラリー化(グルーピング)する方がJSコード作成が簡単なので、必要のある方は検索すれば情報は出てくるはずです。
ということでFC2でのluminous導入とカスタマイズについてでした。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

2 COMMENTS

There are no comments yet.

べえ  

こんにちは。

「class="zoom-in"」は止めちゃって、こっちの方がお勧めってことでよいのでしょうか? 時々パノラマ写真を載せているので、変更した方が良いのかなぁ・・。

ところで、本日ナチュログで「SSL(暗号化通信)対応に対する現在の状況と今後の対応についてお知らせ」が発表されました。「もう対応してるから各自勝手に直してね」って感じです ^^;;

2018/07/13 (Fri) 21:10
vanillaice (Akira)

Akira  

To べえさん

こんばんは (o'ω')ノ

「luminousを導入した場合」に係る内容ですので、べえさんがluminousを入れるのであればzoom-inとは別の書き方をする必要があります。
なので全くの別物として捉えてください。
zoom-in独自クラスは別タブで開く前に「(別タブ)で大きい画像が見られます」を示唆するだけで現在ページに滞在したまま開けるわけではありません。

zoom-inについてはFont Awesome(以下 FAと称す)のCSS疑似要素を利用しています。
FAはCSS「webアイコン」からJS「svg画像」に路線を変更していて、svgの疑似要素利用は非推奨なんですね。
実際iOSでは閲覧に耐えられない状況になることもあります。
べえさんのテンプレート内のFAはまだCSSなので良いんですが、今後はやはりsvgに変更した方が良いと思います。
webアイコンよりもsvgという時代の流れでもあります。

zoom-inについては近々に内容を書き換える予定なのでチェックしてもらえると助かります ^^;
(FA不使用にする予定です)

----
ナチュログさん見てきました。
7月17日にリダイレクト開始、ってことじゃないかしら。たぶん。
既にsをつけても通信できるようにはなっているけれど、17日以降はsがなくても301リダイレクトされるようになるって感じじゃないかと。
いや、わからんけど(笑) そんな文面に感じましたけどどうでしょうね。

----
以前「tocのスクロール位置がずれる」件についてコメント頂きませんでしたでしょうか。
べえさんじゃなかったっけ ^^;
記事を書きましたので若干面倒な方法ではありますがよろしければご参照ください。

https://vanillaice000.blog.fc2.com/blog-entry-743.html

2018/07/13 (Fri) 22:08