画像をポップアップ表示

投稿日:2017年7月2日

今回の記事も引き続きプラグイン導入編です。

 
今やりたいと思っているのは、ズバリ画像のポップアップ表示! タイトルの通りですね。

画像表示の種類

記事内の画像をクリックした際の画像の表示法を考えていたのですが、色々ありますよね。

・次ページで開く
・別タブ(別ウィンドウ)で開く
・ポップアップで表示
・ギャラリーページ(スライドショー)で開く
・フルサイズで掲載

ザッとこんなトコでしょうか。

「次ページ」: …これはさすがに論外でしょうね。使いづらすぎる。
「別タブ(別ウィンドウ)」: 当サイトの現在の形式です。別ウィンドウってのは見なくなりましたね。
「ポップアップ」: これが一番のお気に入り。
「ギャラリーページ」: 特定の無料ブログサービスなんかで採用されてるヤツ。これ元ページへの戻り方が分からないので個人的に嫌い。
「フルサイズ」: そもそもクリックできないタイプ。おそらくこれが現在の主流。

私の選択肢としては「ポップアップ」か「フルサイズ」の2択かなぁ。

PC表示としてはおそらくポップアップ表示が一番見やすいと思うんだけど、今って大半がスマホからネットしてる時代なんですよね?(…私ガラケーなんですけど)
スマホ表示で一番便利なのはフルサイズ表示らしいんですよね。 これも「モバイルファースト」って言うの?

たぶんフルサイズ表示にしておくのがベストなんだろうけど、画像がデカい分ページが重くなるんですよね…
特に私のような低スペックPCなんか使ってると、ずーっと読み込み中で散々待たされた挙句に「×」表示で画像が読み込めませんでした、ってのはざら。

ってなわけで、当サイトではポップアップ表示にすることに決めました。
 

ポップアップ表示プラグイン

ポップアップ表示のやり方に関しては既に目星が付いていて、プラグイン『Easy FancyBox』を使おうと考えていました。

このプラグインは、当サイトで使用中のテーマ『AFFINGER4』と同じ制作者様の作った『micata2』の公式サイトで紹介されていた物です。
micataはAFFINGERの兄弟テーマとも呼べる物ですので、おそらく問題なく使えるでしょう。

ただ、このプラグインが紹介されていたのってmicata2のページだけで、AFFINGER4や新しく作られたSTINGER系総合サイト(?)には載ってないんですよね。
今確認したらSTINGERのサイトでは別のプラグインが紹介されてましたし。

ちょっとこの辺のとっ散らかったページ、いーーかげんにどうにかしてほしいですね。
それぞれのツールの各マニュアルを別々にブクマしておいて、見たい時にはアッチ行ったりコッチ行ったりで一苦労です。
 

情報に信頼がおけないので、自分でも画像ポップアップ表示のためのプラグインを調べてみることにしました。

けっこーな数があるようですね。10種類はあるでしょうか。
しかもどれが一番良いとかじゃなくて、好みに合う物を使いましょう、という感じの物らしい。 優柔不断な私が最も困るパターン。

軽い物、高性能な物、日本語化されている物、などそれぞれに特長があるようですが、私が特に気になったのが「日本語対応」ですね。
前回『Edit Author Slug』を入れた際、日本語化されていて大変助かったので。

でも、プラグインを入れる時に一番気をつけなければいけないのって、テーマとの干渉だと思うんですよね。
その点で考えるなら、やっぱ『Easy FancyBox』でしょうか。

まー、プラグインは簡単に入れ替えできますし、とりあえずこれを入れてみて、なんか気に入らない点があったら別のを試す、って感じにしましょかね。
設定なんて最初の一回だけでしょうし、使い方の参考サイトを見ながら設定すれば英語プラグインだったとしても大丈夫でしょう。
 

プラグイン『Easy FancyBox』

それでは『Easy FancyBox』をインストール。
WordPress4.8でのテストがされてません、とか最終更新が2ヶ月前だとか、ちょっと不安なところもありましたが、ここまできたら使ってみて試した方が早いですよね。

何も設定をせずにインストール時のデフォルトのまま、過去記事から画像を貼っていた記事を探し、記事内画像をクリックしてみたところ、以前は別タブ表示だったものが、すでにポップアップ表示に切り替わっていました!!

もうこれで完了ですね。
設定する気まんまんだったので、いくつか参考サイトをブクマしておいたんですが、ポップアップ表示させるだけなら特に設定はいらんみたい。

あ、そうそうポップアップ表示って「Lightbox」とも言うみたい。
 

何度か画像をみょいんみょいんしてると、ちょっと気になる点が出てきたので、自分好みにカスタマイズしてみる。

WordPress[設定]>[メディア]より、「FancyBox」という項が英語でズラ~っと追加されてますね。

項目の中には、「Make available »」や、「More options »」といった公式へのリンクが設定されている部分もありました。
どうやらここは「(追加)設定したけりゃ有料版買ってね☆」ということらしいです。
まーまー、プラグインの製作って有志の方が無償で提供くださっている物ですからね。これは仕方ないとこでしょうね。

さて、私がやりたかったのは、ポップアップウィンドウの余白を狭めたいというのと、ぼい~んって表示される動きを変えたいという2点。
そのどちらも有料オプションを使わずに設定できました。

他にも、背景・文字色や透明度、開閉速度やタイトル表示の有無、ギャラリー(手動スライドショー)の設定など、充分すぎるほどにカスタマイズできそうなので、後は実際に使ってみながらカスタマイズしていこうと思います。
 

テスト表示用画像

…さすがにこの記事に画像を一つも載せずにおしまい、ってわけにはいきませんよね(^^;
ちゃんとポップアップ表示になっているかの確認もすぐにできるようにしたいし。

…ということで、当サイト初のガンプラ写真~

これでもう「タイトル詐欺」だなんて呼ばせない!(笑)

……きっと突っ込みドコロ満載な出来なんでしょうなぁ(-_-;)

こいつは『HG エールストライクガンダム』。
今からもう10年以上前になるんですかね、私が初めて作ったHGだったと思います。
ゲート跡処理もしてないし、ニッパーでの「二度切り」もせずにランナーから直に切り出してますね…
使っていたのもスーパーの一角のおもちゃコーナーで買った安物のニッパーだったはず。

出来はまぁ…見てのとおりですわ。
ゲート跡はえぐれ、なぜか黄ばんでしまってるし(ホントになんで?)、ボディのフレーム部(?)のシールもズレて下の赤いトコ見えちゃってるし…
 

当サイト最初のレビューはこの子にしようと思ってるので、どうにか見れるレベルには修正しておきたいところ。

ゲート後をデザインナイフで処理して、黄ばんでしまってるトコロはGマーカーホワイトでなんとかなるかな?
シールは余ってる部分を切り出して上から貼り付ければ隠せるだろうか?
あ、あとアンテナのフラッグも切っとかないとですね。エールの翼の先端部もこれフラッグかしら?
それにセンサー部にシール貼ってないぞ?って思ったけどこれは元々そういうキットか。

撮影はコンパクトデジタルカメラで撮ったんだけど、デジカメ自体使うの初めてってレベルなのでこれも勉強しとかないと。 このガンプラブログやるために買ったんだしね!

あーと「撮影ブース」ってのも必要か。
今回は普段使ってる学習机で備え付けのライトを使って、プラモの空き箱ひっくり返してそれとなく白背景っぽく見せただけなんで、こっちもどうにかせねば…

 

おわりに

やること山積みだわ( ´△`;)
一番の山はこのサイトの完成、ですね…
がんばりますぅ

-ウェブサイト作成

Copyright© ガンプラ気分 , 2020 All Rights Reserved.