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

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

カスタマイズ
2018/07/09 35
vanillaice (Akira)
vanillaice (Akira)
Instruction VanillaJS 高速化 中級者向け Luminous

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

ソースコードにwidth/ height属性, loading属性, WAI-ARIAなどを追加しました。

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: "";
  box-sizing: border-box;
  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="画像アドレス" aria-label="クリックで拡大">
  <img src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" style="width: 初期表示サイズpx;">
</a>

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

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

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

日本語の部位は毎回内容の指定が必要です。「横/ 縦実寸」を入れる際には単位を付けないよう注意。また、aria-labelの値「クリックで拡大」は他に適切なものがあれば変更してください(例 click to zoom など)

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

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="画像アドレス" aria-label="クリックで拡大">
  <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="画像アドレス" width="横実寸" height="縦実寸" alt="代替テキスト" style="width: 初期表示サイズpx;">
</a>

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

特別編 画像タイル

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

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう

はてなブログさんの機能パクりというか。 まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`)...

.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導入とカスタマイズについてでした。

画像がポップアップした際に他要素の後ろに回り込む場合(追記)

テンプレートの仕様によっては他要素の「下位」に潜ってしまうことがあります。その場合には以下の内容をスタイルシートに追加してください。

.lum-lightbox { 
  z-index: 4000; 
}

2019.10.27
4000が魔法の数字というわけではありません。4000程度を指定してもまだ他の要素よりも下位になる場合は 5000 や 6000 など数値を増やしてくださいね。20000ぐらいまでで大抵うまくいきますが、テンプレートの内容や利用プラグインの内容にもよります。

オーバーレイのカスタマイズ (2019.5.15 追記)

オーバーレイの見た目カスタマイズを記事にしました。

【luminous】マウスオーバー時のオーバーレイカスタマイズ

【luminous】マウスオーバー時のオーバーレイカスタマイズ

ページに滞在したまま画像をその場で拡大表示させる luminous に関する記事です。...

 35

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
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2018/07/28 (Sat) 07:57
vanillaice (Akira)
Akira
To Luminous解決の件 内緒さん

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

えと。ちょっとよくわからないのですが、どなたかとお間違えか、もしかしたら投稿した質問内容を削除されたんでしょうか。
とりあえず「解決済み」(?)ということで良いですかね。お疲れ様です ^^;

----- 追記
記事を拝見しまして、恐らくz-indexの件かな?と思います。
言葉足らずでお手数おかけしました。記事の方にも対策を追記しておきますね。
お疲れ様でした :)

2018/07/29 (Sun) 01:46
M
To Akiraさん

Akira様

こんにちは。

こちらの記事を参考に、試しにLuminousを導入してみました。JSは個別記事のほうに記載しました。

実装後の画像をクリックしてみましたら、ちゃんと表示がされました。
しかし、この記事のように、原寸大画像が表示されたあと、もう一度クリックしたら画像が戻るようにはなりません。

戻る「<とか←とか」を押さないと戻らないのですが、これって何か導入方法にミスがあるのでしょうか?

2019/03/23 (Sat) 15:48
vanillaice (Akira)
Akira
To Mさん

Mさん、こんにちは (o'ω')ノ

luminousの基本JSファイルが重複しています。それから外部ファイルの中身にFC2の独自変数は使えません。
記事内に貼り付けるってことで良いでしょうか。その説明です。

まずテキストエディータにluminousの基本JS内容を全てコピペしてください。その直下に実行コードを記載してください。以下のような感じです。

var l="function"==typeof Object.〜省略〜
var luminousTrigger = document.querySelectorAll〜省略〜

var l から始まる内容がluminousのJS内容です。今記載している
cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.js
の中身です。

var luminousTrigger から始まるのが実行コードです。この記事内の
「続いて実際にLuminousを動かすための内容(JSのscript要素)は以下の通り。」
という文章のすぐ下に記載してあるコード内容(<script>から</script>に挟まれている内容)です。
これを一つの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('ここにファイルアドレス');</script>

こうして記載します。luminousに関して記事内に記載するJSはこれだけです。他は記載しないようにしてください。
記事内に直接貼り付けるので<!--permanent_area-->などの独自変数は不要です。というか外部ファイルにこれら変数は含めないようにしてください。luminousでなく他のJSでも同じです。

ただしCSSはこの記事にある通りhead内に記載するか、あるいはデフォルトスタイルシート末尾に全てコピペ。後者をおすすめします(CSSリンクはレンダリングブロック要因です)

よろしくお願いします。

2019/03/23 (Sat) 17:21
M
To Akiraさん(お返事不要)

Akira様

素人のボクにもわかりやすい丁寧な解説ありがとうございます(o*。_。)o

ご説明いただいた通りにやってみたらちゃんと出来ました!!

記事にJSを記載する場合、FC2の独自変数や、cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.3.2/luminous.min.jsをそのまま外部ファイルに書いてよいのかしら?とか。悩んでるうちに分からなくなってしまったので、目からウロコでした(;^ω^)

助かりました。ありがとうございます!!

2019/03/23 (Sat) 20:39
そふぃあ
画像が他要素の後ろに回り込んでしまいます

Akiraさん、こんにちは。
いつもお世話になっています。

分不相応と思いながらも[Ample]テンプレート使わせていただいております。
こちらのテンプレートに変更してから、追記にある「画像がポップアップした際に他要素の後ろに回り込む場合」の要素をスタイルシートに入れてあるにも関わらず、ポップアップした画像が隠れてしまったままで見えない部分があります。
私だけの問題なのか?と、今、同じようにポップアップを利用し、同テンプレートを使用している上級レベルブロガーさんのページでも、同様になることを確認しました。

対処法など、お聞かせいただけるとありがたいです。

2019/10/24 (Thu) 17:10
vanillaice (Akira)
Akira
To そふぃあさん

そふぃあさん、こんばんは ('0')/

https://vanillaice000.blog.fc2.com/blog-entry-742.html
luminous記事の最終にある「画像がポップアップした際に他要素の後ろに回り込む場合(追記)」の章を御覧ください。
この状況(テンプレート要素の背面にもぐりこむ)は常に起こり得ます。対処はほぼいつも同じです。
luminous側のCSSには含まれない指定ですので自主的に追加を行ってくださいね。よろしくお願いします。

2019/10/24 (Thu) 19:07
そふぃあ
To Akiraさん

こんばんは。お返事ありがとうございます。
言いたいことがうまく伝わらなかったようで御免なさい。

この追記の要素、すでにCSSに追加済みです。
画像も1200pxあるのに、こちらのページの画像のように全面(前面)に出て来ないのです。

2019/10/24 (Thu) 22:04
vanillaice (Akira)
Akira
To そふぃあさん

freehandクラスの内容を変更されているようです。その内容の
border: dashed 2px #D3D3D3;/*点線*/

最後のスラッシュの後ろに全角スペースが2つ含まれていて、これ以降のCSSは全て無効になっています。修正必須です。
よろしくお願いします。

私、そふぃあさんの文章全然理解できてなかったですね。風邪で熱があるせいなのか日本語力が低いせいなのか ^^;
とりあえず、以降のお返事遅くなると思います。熱が39度超えちゃったよ (∵`)

2019/10/24 (Thu) 22:49
そふぃあ
To Akiraさん(解決済み)

おはようございます。
熱が39度超えだなんて!今朝は少しは良くなられたでしょうか?
そんな時につまらない質問してしまって申し訳ありませんでした。

CSS内のエラー見つけてくださってありがとうございます。
改善してみましたが、やはり症状は同じままです。

まぁ、ポップアップができないわけではなく、ブログ上部にあるメニューバーの下に画像の一部が隠れてしまうだけなので問題ではないです。
もう一人のブログのお師匠さんのところでも、私と同じ状態になっているので、一言ご相談してみようと思います。

とりあえずこの件は保留ということで。
またちょくちょく覗きに参りますので、何か対処方が判明した時にでも、お答えいただけたら嬉しいです。
体調が戻るまで、ゆっくり休んでいてくださいね。どうぞお大事に。

【追記】
ぼっちん先生にご相談したら、丁寧に教えていただくことができました。
体調の良くない時にお手数お掛けしてスイマセンでした。

早く熱が下がりますよう。どうぞお大事に。

2019/10/25 (Fri) 08:05
vanillaice (Akira)
Akira
To そふぃあさん

良かったですー。ぼっちんさんのところを拝見したけど頭が回らない (´=ω=`)

当分死んでると思います。すみません (っω-` )
お気遣いありがとうございます (o'д`o)ゝ

2019/10/25 (Fri) 15:13
vanillaice (Akira)
Akira
To そふぃあさん

こんにちは。ご迷惑おかけしております。
頭がクリアになったところで改めて回答しますね。

記事内にある
z-index: 4000;
ですが、必ずしも4000でOKとは限りません。今回は5000にして頂くと解決できるかと思います。
要は(ちょっと難しい説明になりますが)、「兄弟要素で最も最上位に設定をしてくださいね」という意味です。
Ampleの場合はブローバルナビのz-index値が5000なので、同等あるいはそれ以上の数値(max 2100000000、細かい数字は忘れました ^^;)を指定すれば上位になります。
説明が言葉足らずでしたね。修正しておきますね。

-----
ぼっちんさんもご協力ありがとうございました ('0')/

2019/10/27 (Sun) 13:01
そふぃあ
To Akiraさん(お返事不要です)

おはようございます。
熱下がられてお元気になられましたか?
テンプレートの一覧表示、とても見易くなったと感心していたところでした。

再度のお返事ありがとうございます。
実はぼっちん先生からも、ここの数値を大きくすれば解決すると教えていただいていました。
お答えありがとうございました。
ぼっちん先生にもご報告してきます。

2019/10/28 (Mon) 08:37
bon

いつもありがとうございます。
Akiraさんのブログ記事を参照し、Luminousを導入してみました。
テスト記事はこちらです(画像をタイル状に並べる+luminousのテストも兼ねています)。
https://bon3te.fc2.net/blog-entry-109.html

パソコン(Chrome)では問題がないように見えていましたが、スマホ(iPhone/Safari)で画像をタップしますと、パッパッと2度拡大するような動きをします。
iPhoneで画面キャプチャを取りました(動画です)
【削除しました】

一からやり直しても、オーバーレイのCSSを無しにしてみても動作は変わらず、こちらへ質問させていただきます。
いつもすみませんが、どうぞよろしくお願いしますm(__)m

2020/07/17 (Fri) 23:02
やままち
To bonさん

bonさんはじめまして

今回のご質問の解答ではないので申し訳ないのですが…
Luminousを導入する際にこれはやっておいた方がいいなということがありましたので、老婆心ながらシェアさせてください。

私も最近Luminousの導入を考えて試していたのですが、スマートホンでの見え方が大き過ぎるなと思って「むむむ…」となっておりました。
画像、大き過ぎるかもと思いませんでした?
そこで試行錯誤してたどり着いた下記URLで、解決策となるcssを公開して下さっていたのでご紹介致します。
https://web-roku.com/luminous#i-6

おせっかいでしたらごめんなさい。

2020/07/18 (Sat) 09:48
bon
To やままちさん

やままちさん、はじめまして。

私も過去にLuminousをテストしてやめたことがあります。スマホの場合、画像の一部が画面いっぱいに表示されるので、こういうスクリプトに慣れている人は問題ないのですが、中には戸惑う人がいるかもと思ったことも理由のひとつでした。やままちさんが「むむむ…」と思われたのと同じですよね。

今回は、他の方のブログで、画像をタイル状に並べてそれをLuminousで拡大できるようにしておられ、風景画像なんかが多い時に画像をズラズラと並べるより、そのほうがよさそうだと思ったのがきっかけで再び取り組んでみたのでした。
使用記事が限られることから、今回質問している問題が解消できましたら、使用する記事だけにJSでstyle要素を差し込む、というのをやってみるつもりです。難易度がどんどん上がる気がしますが…(^-^;

貼ってくださったリンク先を見てきました。スマホでタップしたときの圧迫感(?)が軽減されますね。今回の問題が解決した後に試してみます。
やままちさんがお調べになったことを、ご親切に教えて頂きありがとうございました(#^^#)

【ここから追記】
やままちさんへ
教えてくださったリンク先を参考に、拡大時の表示サイズを調整することができました。有益な書き込み下さりありがとうございました。
※やままちさんのブログにお礼に行こうと思いましたがパスワードが必要なため、この場をお借りしました。

2020/07/18 (Sat) 12:20
vanillaice (Akira)
Akira
To bonさん, To やままちさんさん

まず、やままちさん、ご協力ありがとうございます :)

表示サイズについてはご自身の希望に沿う形で修正をして頂くということで、動作不良の件ですが、bonさんと同じやり方(cssはlink要素(CDN), JSは外部(CDN)+インライン)、そして同一のhtmlを用いてテストしましたがデフォルトのMystyleでは起こりません。
なのでプラグインのなにかが干渉しているかもしれませんし、最悪「独自ドメイン」を疑うこともあるかもしれません。

とりあえずプラグインを一旦全非表示にしてテストして頂けると助かります。よろしくお願いします。
でもたぶんこれFC2のアクセス解析だと思います。アクセス解析削除(コメント化でOK)をプラグインチェックの前にやってもらった方が良いかもしれない (´・ω・`)

2020/07/18 (Sat) 21:28
bon
To Akiraさん

Akiraさん、ご確認下さってありがとうございます。お手を煩わせてすみません。

結果、Akiraさんのお考え通りで…
アクセス解析をコメントアウトしましたら、2回開くような動作が発生しなくなりました!
いまいましいアクセス解析…
Akiraさんがいてくださらなかったら、これのせいで解決できていないことがいっぱいあると思います。
また同じ原因でAkiraさんのお時間を取るのも忍びなく、アクセス解析はしばらくこのまま眠らせておくことにします…
週末に複数の質問をいたしまして、お時間を取りましたが、丁寧にご対応下さりありがとうございました。
これで私もLuminous導入できて嬉しいです。
やままちさんも、ご助言ありがとうございました。

2020/07/18 (Sat) 23:25
vanillaice (Akira)
Akira
To bonさん

bonさん、こんばんは ('0')/

あー、やっぱりそうでしたかー (´・ω・`)
FC2のアクセス解析は「リンク元」の情報をチェックしているんですが、単純にa要素に対してゴニョゴニョやってるんですよね。
なので例えばページ内移動、これは実際にはどこか別のページへリンクしているわけではないんですが、その場合でもゴニョっちゃう。それで動作に影響が出ます。以前のご質問は「スムーススクロールが全然スムースじゃねぇ」とかでしたよね。確か(笑)

なにせシステムが古い ( ̄∀ ̄;)
今a要素はなにかJSのトリガーになっていたり(luminousが該当)、ただのプレースホルダーとして用いたり(href属性なし)、遷移せずページ内だけで移動したりと、「遷移」ではない「リンク元とはならない」ものもありますので、システム・アルゴリズムを調整してもらえると良いんですけどね。

やままちさんも改めてご協力ありがとうございました :)

2020/07/19 (Sun) 18:26
bon
To Akiraさん

こんばんは。
はい、過去に
・スムーススクロールがスムースに動かない
・コメントの返信ボタンを押すと「To~さん」が繰り返し表示される
とそのたびにAkiraさんに修正していただいて、今回Luminousもアクセス解析にひっかかりました(T_T)

Fc2ブログは何でも好き勝手にできる楽しさがある反面、導入すべきか否かの判断が素人には難しいと感じます。
今回もあれこれ検証する前にアクセス解析を…と言ってくださって、早速解消され、本当に助かりました。
Fc2側でアクセス解析を近代化して下さったら、また利用したいです。
ご多忙中にかかわらず、丁寧にアドバイス下さりどうもありがとうございましたm(__)m

追伸:やままちさんへ
やままちさんへのお返事に追記をしておりますのでご覧下さい^ - ^

2020/07/19 (Sun) 23:15
やままち
To bonさん、To Akiraさん

bonさん
後からお節介だったかなと反省していたので、参考にして頂けて本当に良かったです。

Akiraさん
いつもお世話になります。
留守中にコメント欄をお借りしてしまいまして…ありがとうございました。
Akiraさんのブログは本文だけでなくコメント欄もとても有益な情報が多いので、日々参考にさせていただいております。

2020/07/20 (Mon) 11:28
はるパパ@ちわぐるず
とても気に入っています。

Akiraさん、おはようございます。
テンプレートをお借りし、こちらの記事をいつも参考にさせていただいています。
専門的な知識もなく、用語もほとんどわからない人間ですので、こちらに質問などさせていただいていいものかといつも躊躇しています。
今回は、こちらの記事で勉強させていただきluminousをブログに導入し、何とか問題なく動作もするようになりました。
毎月一度だけ更新しているカテゴリ用にと導入し、オーバーレイ表示されるテキストもカテゴリに特化したものにしましたので、このカテゴリ以外の記事では使いづらくなっています。
テキストをどの記事でも応用の効く表示にすればいいのでしょうが、そうではなく複数のオーバーレイ表示を作ることは可能でしょうか。
上手く伝えることができませんが、質問に上がりました。
お手すきのときにでもお返事いただけると嬉しく思います。
該当カテゴリのURLを書かせていただきます。

また、Akiraさんの力作をめちゃくちゃにして使ってしまっていること、お許しください。

2021/03/26 (Fri) 09:50
vanillaice (Akira)
vanillaice (Akira)
To はるパパ@ちわぐるずさん

こんにちは ('0')/

えっと、今の時点で何をお返事したら良いかわからないのですが、「テキストを入れた」とあるので、

1. .luminous::beforeのcontentにテキストを入れた
2. backgroundに入れた

のどちらかだと思います。1の場合は
content: "表示するテキスト";
background: rgba(0,0,0,.6);
と、2箇所変更しているはずです。

2の場合は画像を作成して
background: url(画像アドレス) center center /30px 30px no-repeat rgba(0,0,0,.6);
とアドレスのみ変更のはず。

これ以外の方法、という場合はお尋ねしないとわからないけれども、上記いずれかの場合は、a要素にluminousとは別のクラスをあてて

<a class="luminous xxx" href="">

こうします。xxxの部位が新しいクラス名なので、ご自身がわかり易い内容で。
そして1の場合はluminousクラスに関するルールセットよりも必ず「後」に

.xxx::before {
content: "表示したいテキスト";
}

こうしてcontentプロパティの値を上書きします。

2の場合も

.xxx::before {
background-image: url(新しい画像アドレス);
}

こちらはbackgroundではなくbackground-imageと記してください。

------
元の内容を触る必要はないので、新しいクラスを付加するという方法をおすすめします。
このお返事で合ってますでしょうか (´・ω・`)

2021/03/26 (Fri) 16:14
はるパパ@ちわぐるず
ありがとうございます

お忙しい中、早速のお返事とご指南をいただきまして無事に設置が出来ました。
質問が言葉足らずで申し訳ありませんでした。
Akiraさんご指摘の2件のうち、1の方でした。
<a class="luminous_xxx" href="">のように新しいクラスを作っては見たのですが、
.luminous::before {
……

}
.luminous_xxx::before {
……
}
の2つのルールセットを作ってしまっていたために、後発の方が正常に動作しませんでした。
お返事いただいた通りに再挑戦してみたところ、無事に動作するようになりました。
同じ記事に2つ並べて投稿してみましたのでよろしければご確認ください。
サンプルにいただきました、
<a class="luminous xxx" href="">
.xxx::before {
}
をそのまま使わせていただきました。xxxというのが妙に気に入ってしまいましたので記念にと思いまして。

この度は本当にお手数をおかけし、またご丁寧にお教えいただきましてありがとうございます。
なるべく自分でできることは自分でしてみようと思っておりますが、今回は躓いてしまいました。
そんな方法があるのかと、とても勉強になりました。
気持ちのいい季節になってきましたね。十分に羽は伸ばせませんが、よい日々をお過ごしくださいね。

2021/03/26 (Fri) 18:42
vanillaice (Akira)
vanillaice (Akira)
To はるパパ@ちわぐるずさん

お返事大変遅くなりました (*_ _)

確認致しました。上手くいったようで良かったです。
お疲れ様でした :)

2021/03/29 (Mon) 16:46
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/07/22 (Thu) 17:27
vanillaice (Akira)
vanillaice (Akira)
To luminous(ギャラリー)の件 内緒さん

こんばんは。

原因はテンプレートのページ遷移トランジション(ローディングマークの出るアレです)と衝突しているためです。回避方法は、各リンク要素(aタグ)に target="_blank" を指定してください。

例)
<a class="luminous" href="画像アドレス" target="_blank">
<img src="画像アドレス" alt="キャプション内容">
</a>

target="_blank"
は「別タブで開く」指定ですが、luminousが適用されている場合は同タブでのオーバーレイ表示になりますので問題はありません。
仮に今後luminousのスクリプト自体を排除した場合は、クリックで別タブ表示されるようになります。この注意点を踏まえた上で一度お試しください。

追加作業としてスタイルシート末尾に以下の内容を追加してくださいね。

.lum-lightbox {
z-index: 100003;
}

よろしくお願いします :)

2021/07/22 (Thu) 19:34
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/07/23 (Fri) 20:04
vanillaice (Akira)
vanillaice (Akira)
To luminous表示の件 内緒さん

こんばんは。

> グローバルナビゲーションの上にオーバーレイ表示させたい

はい。100004に指定すればナビよりも上位になります。

-----
> ウィンドウサイズによっては拡大後の画像がひしゃげた(横に伸びた)ような表示に〜

これはluminousのデフォルトCSSではなく、カスタマイズ内容の

.lum-lightbox-inner img {
max-width: 100%;
max-height: 100%;
}

この内容に起因します。縦横双方にmaxサイズを指定してしまうと例えば横がデバイス幅の100%、縦がデバイス高さの100%「以上」という場合に高さが100%以上の表示ができませんので縦横比が崩れて縦が潰れます。
max-width(デバイスの横幅を超えない)とmax-height(デバイスの高さを超えない)のいずれを重視するかを決めて、重要でない方を削除してください。画像というのは 必ずしも16:9のアスペクト比率(スマートフォンなどは大きさが違ってもこのアスペクト比です)ではありません ので、縦横どちらかが超過する原画のアスペクト比そのままで表示したい場合はデバイス縦横いずれかにスクロールバーが出ます(つまり収まらない)
これは致し方ないことです。

-----
> キャプションが遠く離れたところに表示される

こちらはluminousのデフォルトで「キャプションは『表示領域の一番下に表示(position: absolute)』」という指定になっていますので、変更するならばテンプレートスタイルシート末尾に

.lum-lightbox-caption {
position: static;
}

を追加してください。この変更で画像の直下に表示されるようになるはずです。ただこれをやってしまうと、キャプションのテキストが長く何行にも渡る場合に矢印の位置が画像に対して大きくズレます。一行程度なら気にならない「かも」しれません。
なので画像とキャプションの間に余白を設けたくなるかと思いますが、すると更に矢印位置が気になりだすかもです。
一応余白を入れる場合は

.lum-lightbox-inner .lum-lightbox-caption {
margin-top: 10px;
}

を追加することで可能です。10の数値は任意です。

こういった特性があるので本記事ではギャラリーの紹介・キャプションの紹介をしていません。特にFC2ブログでは「スマートフォン版のフッター広告(無料版の場合)」などもありますので、仮に内緒さんが無料会員で今後FC2が広告の配信を再開した場合にちょっと困ったことになる可能性はあります ^^;

以上を踏まえて、一度お試しくださいね。

2021/07/23 (Fri) 21:59
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/07/24 (Sat) 18:59
vanillaice (Akira)
vanillaice (Akira)
To luminous うまく行かない件 内緒さん

こんばんは。

> 見え方に変化はなく、以前潰れたまま〜

この原因はご自身でスタイルシートに追加されている

img{
display: block;
width: 100%;
height: auto;
}

です。この指定だと「全てのimg要素の横幅は表示領域に対して100%、高さは自動、img要素の横には何も並ばない(block)」という意味です。
この内容はluminousに限らずいろんな場面であまりよろしくない (´・ω・`)
現状でluminousに関連するものに限定すると例えば

・大きいデバイスサイズの際に原寸を超えて表示される(例: 原寸1200px デバイス横幅1800pxの場合 = 画像表示サイズ横1800pxの拡大表示(解像度が落ちます))
・特別なCSSを当てないと画像の横に何も並べられない(例: ランキングのバナーなども縦に並びます、また、絵文字もテキストの横に並べることができません)
・luminous側に max-height: 100% を指定しても width: 100% が生きていますので縦横比が崩れます
・画像にblockを指定しているため、width: 100% を取り除いた場合に画像が左寄せで表示されます(blockには text-align: center が効かないため)

このカスタマイズ内容については私の推奨ではありませんので、紹介している方に直接お問い合わせして頂くのが一番良い形だと思います。
本来は私の方で受け付けるべき内容ではないんですが、お困りのようなので今回は特別にお伝えしますと、私の推奨は以下の通りです。まずは追加したカスタマイズ内容は全て破棄してください。

---------
【横に並べるためのhtml - 2枚並べと仮定】

<div class="wrap">
<a class="luminous" href="画像1アドレス">
<img src="画像1アドレス" width="横" height="高さ" alt="キャプション1">
<a class="luminous" href="画像2アドレス">
<img src="画像2アドレス" width="横" height="高さ" alt="キャプション2">
</div>

【CSS - 2枚並べと仮定】

.wap {
display: flex;
justify-content: space-between;
align-items: flex-start;
max-width: 数値px;/* 複数枚を横並びにし、その全体が横いくつまでかの指定 */
}

.wrap a {
display: block;
width: calc(50% - 10px);/* 画像間の余白は20pxになります */
}

.wrap a img {
width: 100%;
}

------------
【lumimous起動時の画像調整】

.lum-lightbox-inner img {
max-height: 82vh;/* 100%にしてしまうとデバイス高さによってはキャプションが表示されません, 1行キャプションを想定して82vhを指定 */
}

-----------
【キャプション表示位置について】

height(高さ)を基準にしましたので、横長、例えば横1200pxの画像だとして、一般的なスマートフォンでは縦向きの際に横スクロールバーが出ます。
luminousの本来のキャプション位置は「表示領域の最下部を起点とする」ですが、それが嫌だ、ということなのでデフォルトの
position: absolute;

position: static;
に変更(CSSを追加して上書き指定)、という形を取りましたが、横に大きくはみ出てスクロールバーが出ている状態の場合、キャプション位置は 横スクロール全体の横サイズのセンター という位置になりますので、初期表示(画像をクリックして直後の画面)にキャプションは出てきません。横にスクロールしている途中でキャプションが出てくる、という挙動になります。
これが嫌、ということになるとちょっと困ったことになるんですが、それぞれの特徴を書いておきますのでご自身で最適と思われる内容を選んでください。

デフォルトの場合(特になにもする必要なし)
・クリック直後画面の最下部にセンタリング状態でキャプション表示
・横スクロールを行ってもキャプションはその位置に表示され続ける
・画像とキャプションが大きく離れる場合がある

position: static; に変更した場合
・クリック直後にキャプションが表示されていないことが多くなる(横長画像の場合)
・画像を横スクロールしてようやくキャプションを見ることができる
・キャプションは画像の直下に表示される

キャプション表示難を解消したい場合 --- luminousのスマホ調整を排除
以下の内容を追加

@media (max-width: 460px)
.lum-lightbox-inner img {
max-height: 82vh;
}

.lum-lightbox-inner .lum-lightbox-caption {
position: stacic;
margin: 0;
max-width: 100vw;
}

上記内容を追加すると「クリック直後のキャプション位置は画像直下の水平センター、画像を横スクロールするとキャプションは左へ流れて見えなくなる」という挙動になります。
常にキャプションを表示しておきたい場合は position: absolute のままにしておく以外ありません。当然画像と大きく離れる件は解消できません。

------
ややこしいのでまとめますね。

1. 以下の内容がどのような役割なのか把握した上で、必要ないと判断できれば削除(削除できない場合は本件解消不可)

img {
display: block;
width: 100%;
height: auto;
}

2. 以下の内容をスタイルシート最終に追加

.lum-lightbox-inner img {
max-height: 82vh;
}

@media (max-width: 460px)
.lum-lightbox-inner img {
max-height: 82vh;
}

3. キャプション位置が気になる場合は以下をさらに追加

.lum-lightbox-inner .lum-lightbox-caption {
position: stacic;
margin: 0;
max-width: 100vw;
}

これ以上のカスタマイズについては提案者様に直接お尋ねくださいね。よろしくお願いします。

2021/07/25 (Sun) 21:45
-
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/07/28 (Wed) 14:57
vanillaice (Akira)
vanillaice (Akira)
To luminousの件 内緒さん

こんにちは。こちらこそ遅くなりました (*_ _)
数日前アクセス障害が発生していたようでログインさえできず ^^;
今もまだおかしいですね。長引いているのか再発したのかわからないけれども。そしてこのコメントも送信できるかわからないけれども(笑)

他の方が提案・推奨している内容に対し私があれこれ行うのはやっぱり提案者さんに失礼になることがありますので、その点をご理解頂けると助かります。
どうにも通信状態が不安定で現状の確認が叶いませんが、解消できたということでお疲れ様でした :)

2021/07/31 (Sat) 14:05

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みくださいテンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリテンプレート一覧

カスタマイズ