Top / ポップアップ画像

最終更新日

2020-05-30 (土) 01:49:43

ポップアップ画像

QHM編のマニュアル内容

この「ポップアップ画像」のページは、参考資料として残しておくことにする。

2019年5月15日現在のGoogle Search Consoleの動向からすると、今後ポップアップ画像の機能は殆ど使えなくなる予想される。

理由は「スマートフォンでポップアップ画像を表示させると、スマートフォンの画面から、はみ出てしまうから」だ。実際に別の運営サイト「パソコン選びの味方」に設置してあったポップアップ画像のページがGoogle Search Consoleのモバイルユーザビリティ エラーの対象になってしまった。

エラーの内容は「コンテンツの幅が画面の幅を超えています」だった。エラー解決のためにポップアップ画像を停止したら後日、合格になったが今後は、ポップアップ画像は使わないことに決めた。

ちなみにモバイルユーザビリティ エラーの通知を受信したのが2019年4月1日。その日のうちにポップアップ画像を解除してGoogleに「修正しました」とSearch Consoleから送信しておいたら、2日後の4月3日には検証結果に「合格」と表示された。

パソコンの画面なら画像が大きく表示されて便利なポップアップ機能であるが、パソコンよりもスマートフォンの普及台数が多い現代では、モバイル ユーザビリティを優先せざるを得ないのだ。

追記（2019年7月12日）

「lightbox2」ではなく、レスポンシブに対応できる「colorbox」にすれば、ポップアップ画像を使えることがわかった。


サンプル画像


使い方 

&lightbox2(img_location,title[,group]){label};
  • img_location : 画像を指定(URL指定)
  • title : 画像のタイトル
  • group : 省略可。同じグループ名のものは、NEXT、PREVで移動可能
  • label : リンクの実態(画像でも、文字でもお好きに)


応用編　（たぶんQHMフォーラムから拾ってきたもの）

テキストから画像をポップアップさせるには、後半の{　}の中に表示させたいテキストを入れるとできます。

&greybox(画像ファイル名,画像の説明,group){表示文字};

ページ上で画像を表示させないで、連続した画像を、ポップアップさせるには、後半の{表示文字}の中を削除して半角を挿入するとできます。

例

&greybox(画像ファイル名1,画像の説明1,グループ名){ここをクリック};
&greybox(画像ファイル名2,画像の説明2,グループ名){ };
&greybox(画像ファイル名3,画像の説明3,グループ名){ };

半角スペースを入れるのがポイントです。


&lightbox2(img/CIMG2000.JPG,タイトル,group){&ref2(img/CIMG2000.JPG,nolink,タイトル);};

またブラウザ上の画像を50%に縮小表示しておき画像をクリックしたときにポップアップさせるには次のようにすればOKです。

&lightbox2(img/CIMG2000.JPG,タイトル,group){&ref2(img/CIMG2000.JPG,nolink,50%,タイトル);};

上記の”おまじない”はコメント蘭の関係で2行になっていますが実際は1行ですので、コピーする際はまとめてコピーしてください。私はimgフォルダーの写真は51Ｋバイト320ｘ240pixで試しました。