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

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

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

画像拡大スクリプト と言えば 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: "";
  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="画像アドレス">
  <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導入とカスタマイズについてでした。

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

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

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

----- 2019.10.27 追記

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

----- 追記ここまで

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

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

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

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

 23

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

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

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

カスタマイズ