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

こんにちは。

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

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

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

管理人のみ閲覧できます

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

To Luminous解決の件 内緒さん

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

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

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

To Akiraさん

Akira様

こんにちは。

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

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

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

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リンクはレンダリングブロック要因です)

よろしくお願いします。

To Akiraさん（お返事不要）

Akira様

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

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

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

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

画像が他要素の後ろに回り込んでしまいます

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

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

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

To そふぃあさん

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

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

To Akiraさん

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

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

To そふぃあさん

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

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

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

To Akiraさん（解決済み）

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

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

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

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

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

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

To そふぃあさん

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

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

To そふぃあさん

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

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

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

To Akiraさん（お返事不要です）

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

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

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

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

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

To bonさん

bonさんはじめまして

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

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

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

To やままちさん

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

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

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

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

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

To bonさん, To やままちさんさん

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

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

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

To Akiraさん

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

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

To bonさん

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

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

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

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

To Akiraさん

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

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

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

To bonさん、To Akiraさん

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

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

とても気に入っています。

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

また、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と記してください。

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

ありがとうございます

お忙しい中、早速のお返事とご指南をいただきまして無事に設置が出来ました。
質問が言葉足らずで申し訳ありませんでした。
Akiraさんご指摘の2件のうち、1の方でした。
<a class="luminous_xxx" href="">のように新しいクラスを作っては見たのですが、
.luminous::before {
……
と
}
.luminous_xxx::before {
……
}
の2つのルールセットを作ってしまっていたために、後発の方が正常に動作しませんでした。
お返事いただいた通りに再挑戦してみたところ、無事に動作するようになりました。
同じ記事に2つ並べて投稿してみましたのでよろしければご確認ください。
サンプルにいただきました、
<a class="luminous xxx" href="">
.xxx::before {
}
をそのまま使わせていただきました。xxxというのが妙に気に入ってしまいましたので記念にと思いまして。

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

To はるパパ＠ちわぐるずさん

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

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

管理人のみ閲覧できます

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

To luminous(ギャラリー)の件 内緒さん

こんばんは。

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

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

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

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

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

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

管理人のみ閲覧できます

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

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が広告の配信を再開した場合にちょっと困ったことになる可能性はあります ^^;

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

管理人のみ閲覧できます

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

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 - ２枚並べと仮定】

<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;
}

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

管理人のみ閲覧できます

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

To luminousの件 内緒さん

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

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

No title

Akira様

こんばんは、夜分遅くにコメント失礼します。
現在、Akira様が公開なさっているテンプレート『Colony』をお借りしている凛音と申します。

こちらの記事を参考に、次回更新からLuminousを導入しようと思っているのですが、
そこで下記の2点について教えていただきたくコメントをさせていただきました。

①：Luminousが適用された画像の横にテキストを並べることは可能でしょうか？
検索して出てきた方法を色々試しているのですが、解釈が間違っているのかどれも反映されない状況です

②：もし①が可能だと仮定して、並んでいる画像＋テキストを四角い枠で囲うことは可能でしょうか？

コメントのURLに質問内容の図解を入れています。
お忙しいところ恐縮ですがご教示いただけますと幸いです。

ブログ名　：すずにっき
ブログURL：https://sznikki.blog.fc2.com

To 凛音さん

こんばんは ('0')/
お返事が大変遅くなってしまいごめんなさい。

> Luminousが適用された画像の横にテキストを並べることは可能でしょうか？〜

これは「クリック拡大したときに」という意味でしょうか。それともluminousの適用云々とは関係なく、記事上で添付スクリーンショットのような形式で表示したい、ということでしょうか。
前者であればちょっと無理があります。luminousは「画像を大きくして見る」ことに特化したもので、スマートフォンの画面幅を考えればせいぜい数行のキャプションをつける程度です。

後者の場合は可能ですがいろんな方法があり、具体的にどうしたいのか(文章の高さ(行数)が画像の高さを超えたときにどう見せるのか など)が決まらないとソースコードも書けませんので、まずはどちらが質問内容として正しいかのお返事をください。

後者の場合に備えてイメージとしては
【1】
2つのブロックで構成、上のブロックで画像と文章をfloatで横並び(文章が画像下に回り込みます)、下のブロックは素直に文章のみ, 枠は画像と文章の区切り(間)には入れられない
【2】
2つのブロックで構成、上のブロックはtableあるいはflexで横並び(文章は回り込まないので、デバイスの横幅によっては不格好になる可能性大)、下のブロックは文章のみ、枠の設置可能

という感じなのかな、と思います。
参考記事: 結局floatはどう解除するのが簡単なのか
https://vanillaice000.blog.fc2.com/blog-entry-529.html

レスポンシブデザインである、という点も考慮してコードを作成しないといけませんので、より具体的な構想をお伝えくださいね。よろしくお願いします。

To vanillaice (Akira)さん

ご多忙の中、お返事頂きありがとうございます。

> これは「クリック拡大したときに」という意味でしょうか。それともluminousの適用云々とは関係なく、記事上で添付スクリーンショットのような形式で表示したい、ということでしょうか。

こちらについてですが、今回質問させていただいた内容は後者になります。

質問した際の具体的なイメージとしては下記URLのサイト内で各カードの詳細に使われている様な事がやりたいと思いました。
URL:https://gachi-matome.com/p-yg-product-23pp/

やりたいことの説明として正しいか分かりませんが、文章がある右側の枠のサイズに合わせて左側の枠内の画像の位置を中央に持ってくる、みたいな感じですかね…。

Akira様にご提案頂いた内容だと【2】に近くなるのかなぁと思ったのですが、不格好になる可能性大との事で…。
質問と合わせてご相談になってしまうのですが、Akira様的にはどういったレイアウトが好ましいと思いますかね？

To 凛音さん

こんばんは ('0')/

本来はこういった個人的なカスタマイズやソース提供というのはお断りするんですが、今回は私のお返事がとても遅れたことと、一般ユーザーさん向けに雛形として提供できそうなので記事で公開します。
コメント欄ではとても説明できないので ^^;

私が何を好ましいと思うかは記事を読んで頂ければわかるかな、と思いますので、また少しお時間くださいね。今からやります(笑)

To vanillaice (Akira)さん

該当記事、噛み締めるように拝見させて頂きました…！

おかげさまでやりたかった事が出来そうです、、
お忙しい中本当にありがとうございました！！

もう体調は回復されたとの事ですが
これから益々寒くなるかと思いますので身体にお気をつけてお過ごしくださいദി ᷇ᵕ ᷆ )

はじめまして。
　Luminous（＋オーバーレイCSS）を導入して画像を表示し、普段は問題なく動作するのに時折戻るボタンを押さないと戻らない状態になります。
該当URLの記事には画像を2枚掲載していて、いちばん下の画像は問題なく動作するのに、一番上の画像は上手く動いたりそうじゃなかったりという状態です。上の画像はjpgで下の画像はpngですがそういったファイル形式が関係しているのでしょうか（他の記事でもjpgの写真のみたまに動作が上手くいかなくなるので）
よろしくお願いいたします。

To Shioriさん

こんばんは ('0')/
症状について私の環境では確認できなかったんですが、CSSの方にエラーがありますので修正を行ってください。

/* 画僧画僧像 */
*/@keyframes

となっているところ、正しいのは

/* 画僧画僧像 */
@keyframes

です。@の前の */ はコメントアウトを示す記号で、この位置では不正です。恐らく書き足したり書き直したりという段階で消し忘れたのではないかと思います。
修正して一度ご確認ください。

---- 余談
FC2のアクセス解析なんですが、a要素をトリガーとする様々なスクリプトに干渉してしまいます(全てのa要素を解析対象としているため)
luminousもそうですし、ページ内スクロールもそうです。私のページと比較して頂くと、shioriさんのページではどちらも動きがカクカクというかギクシャクしているのがわかるかと思います。
なのであまり言うべきではないんですが、googleなど他の解析に変更されると良いかもです ^^;
ただFC2の解析はFC2ブログ解析に特化しており、非常に細かいデータを見ることができますので、どちらを重視するか(UIかデータか)は自由です :)

To vanillaice (Akira)さん

お返事ありがとうございます。　
試しに該当ページを自分のスマートフォンで確認したら問題なく表示されたので、ブラウザの拡張機能とかブラウザセキュリティ等が絡んでいるのかもしれません。
ちなみにご指摘いただいたCSSを直して、htmlからFC2のアクセス解析タグを外しても表示は直りませんでした。　自分のほうでもいろいろ見て見ます。

To Shioriさん

えっと、「スマートフォンで確認したら〜」のくだりで、おっしゃっている件の本質がわかりました。
Shioriさんはこのスクリプトをテンプレートではなく記事内に記していますよね。この点について記事内に説明は記載していますが、伝わりにくかったようなのでご説明します。
テンプレートではなく記事内に記す意義は「ページ表示負荷」への対策なので、luminousの実行自体を遅延(lazyload)させています。仕組みとしては、ユーザーによる任意スクロールが発生するまでファイルを読み込まない という形です。

今回の場合、1枚目の対象画像がパソコンではファーストビュー(above the fold, スクロールせずに画面に収まっている範囲)にあり、クリックにスクロールを要しません。なのでそのままクリックしても反応しない、というのが本件です。なので、記事内記載の場合は

・ 対象画像がファーストビュー外(below the fold)にある(そのようにする)
・ スピード対策として遅延を行いたい

という方におすすめします。要は、テンプレートにコード記載するという通常の設置を行えばこの件は解消されます。
あるいは
<script src="JSファイルURL"></script>
という形で記事最終に記載してもOKですが、この場合はスピード対策にはなりませんのでご注意ください。

あと、FC2アクセス解析は本件とは無関係です。なので「余談」としました。

To vanillaice (Akira)さん

確かにhtmlに記事の通りjsを記載したらちゃんと表示されるようになりました。他の記事でも先頭に載せた写真のみうまく表示されなかったのもこのためだったのですね。
ご対応いただきありがとうございした。

To Shioriさん(完了のご報告)

お返事大変遅くなりごめんなさい。
私の方でも修正を目視確認できました。お疲れ様でした :)

管理人のみ閲覧できます

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

To 空白ができます。内緒さん

こんにちは ( ﾟДﾟ)ﾉ

>画像の上部に空白ができてしまいまた、画像の下に目次を設置していますが、目次の下部にも空白ができてしまいます。Luminous設置前はそんなことはありません。〜

私が拝見したところ、特に問題無いというか、スタイル指定通りというか。なのでスタイルがご自身の意図しない内容になっている、ということではないでしょうか。

【画像の上の余白】これはトップページのグリッドアイテムのことでしょうか？でも「画像の下に目次を設置〜」と言及されていますしLuminousが原因ではないかと推測されているのでやはり個別記事のことなんでしょうか。
ちょっとよくわからないけれども、「画像」というのは様々なページで大量に表示されるものですから、どのページのどの部位の画像、など具体的にご質問頂けると助かります。

とりあえず私がおかしいかなと感じたのはトップページのグリッドアイテム上の余白ぐらいです。

・自身が思う理想と他者のそれが合致するとは限らない
・自身の正解は自身の頭の中にしかないので他者は判断できない

という点を踏まえて質問して頂くことで質疑応答が円滑になるかと思います。言葉で伝えづらければスクリーンショットを活用する方法もご検討ください。

-----

内緒さんの思う正解とどこが、あるいは何が食い違っているのか不明なまま仮定でお話をすると、ご自身で追加されたスタイル(CSS)に

a {
text-decoration: none;
color: var(--color-link);
transition: .3s ease-in-out;
padding:2px 7px;
}

このようなルールセットがあります。この指定の仕方は「要素セレクタ」といって、ページ内に存在する全てのa要素 に対する指定です。宣言に
padding: 2px 7px
というのがありますが、これは要素の内側の余白を意味します。

Luminousを利用する際はimg要素をa要素で囲います。

<a href="画像URL"><img src="画像URL"></a>

こうですね。このa要素もスタイリング対象ですから、画像の上下に2px、左右に7pxの余白を意図的に設けている、ということになります。さらに現代の(living standardの)a要素というのは旧html4と違い、display値blockの要素を内包できるようになっています。ちょっと説明が難しいですが、a要素自体が本来のdisplay値 inlineからblockやflexなどに変更されている場合があります。

display: inline ----- 上下padding, 上下margin不可(効力なし)
display: block ----- 上下padding, 上下margin可

なのでページ全体のa要素でpaddingが効いているものもあれば効いていないものもある、そしてご自身でその状況を把握しきれていない、というのが実際のところではないかと思います。

何らかのターゲットに対しスタイリングを必要とする場合は 要素セレクタを避け、クラス属性を用いたスタイルしていを行う ようにされると良いですね。

例)要素セレクタ(属性省略) --- 全てのa要素が対象

<a>カテゴリ名</a>

<a>
<div>何らかのブロック要素</div>
</a>

<a>ランキングバナーなど</a>

-----
例)クラスセレクタ(class属性以外省略) --- 指定クラス名を持つ要素のみ対象

<a>カテゴリ名</a>

<a class="target">何らかのブロック要素</a>

<a class="target">ランキングバナーなど</a>

-----
a要素をホバーした際にガクガクするのもa要素への上下padding指定が影響しています。


===========
あとは目次の方なんですが、見出しの前後に

<a id="1"></a>
や
<a id="2"></a>

といった空のa要素が点在しています。これは恐らくページ内スクロールの位置合わせのため？かな？と思うのですが、通常こういったことはしないというか避けましょう。プレースホルダーのa要素は一応文法として許可されてはいますが良くはないです。Southerlyテンプレートはナビゲーション固定ではありませんので、頭出しが狂うことは無いはずです。

×

<a id="1">
<h2>見出し</h2>
<p>文章</p>

<a id="2">
<h2>見出し</h2>
<p>文章</p>

✓

<h2 id="heading-1">見出し</h2>
<p>文章</p>

<h2 id="heading-2">見出し</h2>
<p>文章</p>


頭出しを行いたい要素に直接id属性を設けます。そしてid属性の値(アイディー名)は数字から始めてはいけないルールになっていますので、そこも同時に修正されると良いですね。これはclass名も同じルールです。

×

<h2 id="1234-number">見出し</h2>

✓

<h2 id="number-1234">見出し</h2>

==========
仮定や想像で話を進めましたので見当違いの回答であればご指摘ください。また、次回ログインまでもしかすると5日前後かかるかもしれません。以降のお返事が遅くなる可能性があるのでご容赦くださいね。

管理人のみ閲覧できます

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

管理人のみ閲覧できます

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

To Luminous 内緒さん

こんにちは ( ﾟДﾟ)ﾉ
本日この回答の後数日ログインできないと思います。すみません。

> コメント欄にはスクショ等の添付機能はないですよね。〜

コメント欄にFC2アップローダーにアップロードした画像のURLを記載してもらえればそのままファイルを見られます。画像などのファイルはURLさえわかればアクセスに特別な機能を必要としません。

-----
> 記事タイトルとタイトル画像の間に約7センチくらいの空白〜

記事タイトルはh1要素として記載されているものと、本文内の画像の下にもh2要素として記載がありますが、h2の方を指していると解釈して良いでしょうか。通常「記事タイトル」と表現されると記事セクションの大見出しと捉えられることがほとんどですから、ご質問時にはご注意ください。
また、h1要素とそのセクション内のh2要素が同じ文言というのもマークアップ的にはあまり良いとは言えませんが、この点についての判断はお任せします。今後自動のTOCスクリプトの導入をされる際は現在の方針が仇になりますので、記事数の少ない今のうちに判断されると良いですね。

タイトル画像(本文内一番最初の画像と解釈します)の間は見出しに設けられているmarginです。marginが無いと上下に隣接する要素同士の辺がくっついてしまいますので margin: 0 の指定、あるいは marginに関する宣言を取り除くのは良くありません。余白が広すぎるのであれば

/* heading */

で検索するとスタイルシート内に2箇所ありますので、最初の方に記事内見出しの設定を見つけられます。

.inner-contents h2 {
margin: 3em auto 2em;
line-height: 1.5;
font-size: 1.2em;
}

3emが上margin、2emが下margin で、見出しのフォントサイズの相対単位です。仮に見出しのフォントサイズが20pxなら

20px × 2倍 = 40px
20px × 3倍 = 60px

という意味の指定になります。絶対単位にする場合は em ではなく px を用いてください。見出しのフォントサイズや見出しレベルに関係なく常に同じ余白になります。

現段階で内緒さんの場合は見出しの中にimg要素を含めています。その画像の高さが見出しの文章の高さよりも大きいので、前後要素と随分距離があるように感じさせている点もご注意ください。
また、原寸そのままで表示しているため、高解像度ディスプレイでは画像がひどくぼやけています。できれば原寸は

・希望表示サイズの2〜3倍、表示時は縮尺表示

を行うとぼやけず鮮明になります。

参考記事: スマートフォンで画像がぼやける際の対処と画像容量削減
https://vanillaice000.blog.fc2.com/blog-entry-627.html

-----
> わたしのブラウザがおかしいのでしょうか？〜

スタイル指定通りの表示ですからおかしくありません。ご自身が思う理想と他者のそれ、あるいはブラウザのデフォルト値が全く同じというわけにはいきません。見出しの前後にmarginができるのはHTMLのデフォルト・ブラウザのデフォルト・テンプレート制作者の意図としてはごく当たり前ことなので、むしろmarginが無い方がイレギュラーなものとお考えください。

なので本件についてluminousは関与していません。もし以前のテンプレートで余白が無かった、という場合は見出しにmarginが設定されていないものを利用していた可能性がありますね。

-----
> 具体的なおかしい点と対処法をお教えいただけないでしょうか？〜

a要素セレクタからpaddingに関する宣言を削除したことで現在は修正されています。修正前は左の日付け帯とアイテム画像
との間に空白が存在していました。

-----
見出しの件はもうひとつコメント頂いているのでその返信として記しますね。一旦投稿します。

To 目次 内緒さん

はい、基本的TOCの構成は記して頂いたHTMLで合っています。ただしJSを用いた自動挿入ではないので毎回HTMLの手打ちが必要です。今後も手打ちで掲載する場合は見出しレベルの整合性やナンバリング(2-1, 2-2 のテキストなど)に注意してください。

重要な点は、ナンバーを入れることで見出しテキストは内緒さんが思っているものとは異なる(かもしれない)状態でgoogleなどのクローラーに伝わるという点です。

例)
<h3>新しい時代の幕開け</h3>
↓botが見出しとして受け取るテキスト
新しい時代の幕開け

例2)
<h3>3-1 新しい時代の幕開け</h3>
↓botが見出しとして受け取るテキスト
3-1 新しい時代の幕開け

見出し内に含めたナンバーはテキストですから文言の一部として解釈されます。また、画像を含めた場合はimg要素のalt属性値も見出し文言として取得します。これらを避けるには自動スクリプトを用いるか、ナンバーや画像などの装飾をHTMLではなくCSSで付与する等も効果的です。CSSは「counter-increment」で検索すると情報が出てくるかと思います。画像はCSSのbackground-imageでできます。自動スクリプトも検索すれば希望に沿うものが見つかるでしょう。検索ワードは「TOCスクリプト」
弊ブログが提供しているものもあります。目的などが合致するならばご利用ください。ただし見出しテーブルの開閉は設定していません。

参考記事: 見出し目次を生成するTOCスクリプト
https://vanillaice000.blog.fc2.com/blog-entry-826.html

-----
HTMLというのは見た目を操作するものではありません。記す文章や構成するレイアウトの「意味・定義」を司るものです。見た目の整いはCSSを利用するよう心がけると、テンプレート変更や新しい機能の導入等が円滑になりますよ :)

管理人のみ閲覧できます

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