記事タイトル文字数カウント、フォントサイズ変更、ピンチ操作、ポップアップ再設定

投稿日:

前回の投稿からまたも時間が経ってしまいました(^^;

今回の記事タイトルからも分かる通り、なんやかんや色々とカスタマイズする事になりましたとさ。
この記事はその備忘録です。 主にスマホ表示関連のカスタマイズを行いました。
 

記事タイトルの文字数をカウントし表示

さぁ、早速取り掛かっていきましょう。

まずは前回の予告通り、WordPressの記事投稿画面に記事タイトルの文字数カウンター機能を付け加えてみようと思います。

ネットで検索すればすぐに出てくるので、おそらくWordPressのカスタマイズとしてはメジャーなものなんじゃないでしょうか。
 

調べてみると、どうやら半角文字を1文字とするか0.5文字とするかのパターンがあるようです。

これを決めるには、そもそもなぜ記事タイトルの文字数を数える必要があるのか、その理由をきちんと把握しておかねばなりませんね。

私も含め、多くの人はきっとSEO的な観点から必要になったんだと思います。
検索エンジン上では、長すぎるタイトルは「…」の表示になり省略されてしまいますからね。

そこで省略されない(最後まで表示される)記事タイトルの文字数がまず知りたくなるわけなんですが、過去何度か変動があったみたいですが、現在は32文字が上限となっているようです。

この32文字というのは全角文字の場合で、半角文字だけなら倍の64文字まで表示されるということだそうです。
 

それでは文字数カウントの話に戻しますが、
「少しでも記事タイトルを分かりやすく短くしたい」とかなら半角を1文字とカウントでも良いと思いますが、上記の理由から検索エンジンに表示される上限の文字数を知るためという事なら、半角は0.5文字としてカウントするべきですね。
 

ほんじゃカスタマイズ作業に入っていきましょう。

ここでいじるのは「functions.php」。 下手に手を出すとサイトが真っ白になるという事で有名なトコですね(ll゚д゚)

まー私は過去に3カラム化に挑戦していた時に一度手を付けていますから(結局諦めましたが)、今さらびびることも無いでしょう。 私は子テーマを使っていますし。
 

あとはコードをぺぺっとコピペさせてもらって完了。

完成したのはコチラ↓

記事タイトル文字数カウンター

いきなり文字数が32文字をオーバーしちゃってますが(;^ω^)

まぁ今回の記事は(記事も)ただの備忘録ですから。
検索でヒットされても逆に困るというね。

 

スマホ表示時のフォントサイズを変更

はい次。 先は長いのでサクサクいきましょう。

こちらも前回予告していたカスタマイズですね。 というかこっちがメイン。
 

私がこのサイトで使用しているWordPressテーマは『AFFINGER4』。

利用者の多くが言っていますが、スマホから見た時の文字サイズが他のブログ(テーマ)と比べて大きいんですよね。

大きすぎるという程では無いんですが、できる限り小さくしておいた方がまとまりが良いと思うんですよ。
意図しないところで改行されることが多くなるのは都合が悪い。 ヽ(*⌒▽⌒*)ノ ←こういう顔文字とか使うと途中でちぎれてしまうこともしばしば。
 

というわけでスマホ表示時の文字サイズを小さくするのが目的となるのですが、
その前にAFFINGER4デフォルトの文字が実際にどれぐらい大きいのか実機確認しておきましょう。
フォントサイズを変更するにしても、具体的にどこまで小さくすればいいのか分かりませんからね。

比較参考させてもらうサイトは、私が普段から閲覧させて頂いております「ガンプラブログ」の面々様方。 いや~、こんなことしとらんで自分のブログ書けって話なんですけどね(-∀-`;)
自分のブクマをチェックしてみたところ、17件ありました。

私はいつもPCでブログ書いてPCからしか表示確認していなかったので、サイト完成目前ということもあり、この機に我が『ガンプラ気分(仮)』のスマホ表示も細かくチェックしてみることにしました。 …ちょっと怖いですね(^^;
 

今回比較する項目は3つ。
 ●文字サイズ
 ●画像表示形式
 ●ピンチ操作

今必要なのはフォントサイズの比較だけなのですが、このままスマホ表示のカスタマイズをやりきってしまおうと決めたので、以前から気になっていた画像表示形式―画像をタップした時に画像がどういう風に開くかですね、も合わせてチェックさせてもらいましょう。

ピンチ操作」ってのはアレです。 2本指でつまむような操作をして画面の拡大・縮小をする機能の事です。
AFFINGER4ではこのピンチ操作ができません
そこで、他のガンプラブログではこのピンチ操作ができるようになっているのかどうかふと気になりまして。 ついでに確かめておこうかなと。
 

そんで私のお気に入りガンプラブログ17件を上記3点について勝手にチェックしてみました。 あ、サイト名は出しませんよ。

まずは最も重要な文字サイズ。
これはもうほとんどのサイトの文字の方がAFFINGER4デフォルトサイズより小さかったです。
同じサイズだったのは1件だけ。 2件はレスポンシブ非対応だったらしく測定不可。

画像表示形式とピンチ操作の結果に関してはこのカスタマイズの後に手を出すことになるので、それは各々の項で話すとしましょう。 …憶えてたら

 

では実機確認が済んでAFFINGER4のスマホ時のフォントサイズが他のブログよりも大きいという事が判りましたので、実際の作業に移りましょう。

前回の記事の時点で調べてあった通り、これには公式にやり方が書いてあったので、まぁその通りにやりゃーいいだけの話なんですが…、
残念ながら私の知識では何書いてあるのか理解できませんでした(´;д;`)

スマホ・タブレット・PCの3パターンでコードが記述されてるらしいんですが、どこがどれについて書かれているのか分からず、どの部分を書き換えればいいのかも当然分かりません。
 

仕方がないので、フォントサイズ変更のカスタマイズを書かれているAFFINGER4ユーザーの記事を読ませて頂き、それをそのまま使わせてもらいました。

どうやらスマホ・タブレット両方のフォントサイズを一括で変更するコードの様です。
タブレットからの実機確認は行なっていないのですが、今回は「文字を小さくする」というより「文字を他のブログと同じ一般的なサイズにする」だけなので、これで「小さすぎて文字が読めない」ということは無いでしょう。 たぶん。
 

子テーマの「style.css」に参考サイトからのコードをコピペし、サクッと完成。

↓がスマホから閲覧時のフォントサイズ変更の比較画像です。

フォントサイズ変更前
フォントサイズ変更前

フォントサイズ変更後
フォントサイズ変更後

…どうでしょう? かなり読みやすくなったんじゃないでしょうか?

変更後が15pxで、変更前(デフォルト)が17px…かな? 元のコード読めないんで自信無いですが(;´ェ`)

私が見ているところが正しいのなら、PCサイズのデフォルトフォントサイズも15pxなので(たぶん)、どのデバイスから見ても同じ文字の大きさになった…のかな?
 

ただちょっと気になる点もありますね。
文字と文字の上下の余白が大きすぎるように見えます。

この余白の広さ自体はいじっていないので変わっていないのでしょうが、文字が小さくなったことで相対的にそう見えるのでしょうね。

公式を詳しく読んでみると、
 line-height//行間
という設定箇所がありました。
おそらくこれで調節するのでしょうね。

具体的にいくつに設定すればいいのかも分かりませんし、私の今回の目的であるフォントサイズ変更は達成できているので、とりあえず今はこのままでいきます。

しばらくこれで使ってみて、違和感が消えないようであればまた改めてカスタマイズするとしましょう。
見やすい大きさや間隔は人によって違うでしょうしね。
 

あと、AFFINGER4のCSSでは指定されていませんでしたが、
 margin-bottom
というので段落の余白?も調節できるみたいです。
もしかしたらこっちも合わせて設定しといた方がいいのかも。

 

各種マーカーの表示テスト

今回スマホからの自サイトの表示を確認してみたことで、色々と気付いてしまったことがありました。

その内の一つが、記事内装飾に使用しているマーカーの色がPCから見た時とスマホから見た時で違って見えたということ。
これはたぶんPC・スマホというより閲覧しているデバイスというか、モニターの設定によるところなんだとは思いますが…
 

ハッキリ言ってこれは解決のしようの無い問題でしょうから、一度PCとスマホから各色のマーカーを見比べてみて、あまりにもおかしい、色が濃すぎて文字が読みにくい等の問題があった場合はその色は使わない、とでも決めておきましょうかね。
 

そういや少し前にAFFINGER5が発売されましたね。
装飾機能に関しても色々と付け足されていて、記事を華やかに彩ることができるようになっているみたいです。

しかしAFFINGER5の購入者が書いたレビュー記事なんかを見てみると、やたらカラフルでごちゃごちゃした色使いの記事ばかりでしたね。 新機能を紹介するためにわざとやっているんでしょうが…

いくら使える装飾のバリエーションが増えたからってただ使いまくったところで「まとまりのない」、派手さで目を引こうとしてるだけの悪趣味で読みにくいだけの記事になってしまっていたので、これは私も気を付けていかんとな~とか思いました。 AFFINGER4の装飾機能だけでも充分派手ですからね。

あ、AFFINGER5が悪いって話じゃないですよ?
利用者が使いこなせてないとひでーことになっちゃうってだけのこと。

…これは執筆者の色彩センスによるところなので難しいトコですけどね(  ̄~ ̄;)
ガンプラ塗装でも同じことが言えますよね。 色を増やしゃー良いってモンじゃない。
 

おっと、話が逸れたな。
まーいきなり色彩センスがどーのこーのと言ったところでそんな簡単にセンスが良くなったりはしないので、自分なりに使用する色にルールを決めておきましょう。

最も分かりやすいところだと、は注意書き、とかですね。
ガンプラで言うコーションマークですな。

他の色にもこんな感じでザックリと用途を決めておきたいんですが、これはブログのジャンルとかによっても違ってくるでしょうし、ガンプラの記事を未だ書けていない今の私ではちょっと無理がありますね。

しゃーないのでコレはまた後日。
とりあえずマーカー色の確認だけやっときましょう。
 


 
まずはAFFINGER4に備わっている黄色マーカー。 これはPCから見た時メチャクチャ薄かったので、今では全く使わなくなってました。

代用として黄色背景色を使用しています。 こっちはPC・スマホ共に問題無く発色(という言い方で良いのか?)してました。

お次もAFFINGER4デフォの赤マーカー。 これもPCからだと若干色が薄いのですが、黄色マーカーに比べれば遥かにマシなのでそのまま使っていましたが、スマホからだとちょっと色が変だったんですよね。 くすんでいるというか。

代用として黄色同様に赤背景色を候補にと考えましたが、PCからだと少し濃すぎるんですよね。 あとでスマホからも見てみないと。

ここからはマーカーではなく背景色。 これが水色背景色。 3色目のマーカーとして私が好んで使うやつです。

続けて緑背景色。 これと上の水色背景色なんですが、PCからだと全くと言っていいほど区別が付きません。 ところが!スマホからだとこの緑と水色の色がちゃんと区別されてたんですよ!!

こいつはオレンジ背景色。 PCからだと肌色っぽくてマーカーとしてはイマイチなんですが、緑が区別されない(できない)ために、4色目のマーカーとしてたまに使ってました。 ところがコイツもスマホから見るとキレイなオレンジ色として見えていました!

普段私がマーカーとして使うのはここまでなんですが(カラフルにしすぎても趣味悪いんで)、せっかくなので他の色もテストしてみましょう。 紫背景色。 赤背景色並に濃いですね…。 色のセンスとしてもちょっとどうかと思います。

最後に青背景色。 PCからだとやや濃いという程度ではありますが、水色背景色に近い色なので、用途の使い分けに向いていないでしょうね。


 

とまぁこんな感じですかね。

あとはこれらをPC・スマホ複数のデバイスから見て発色を確認しておくこと。 この作業はこの記事執筆後に行なう事になりますね。
 

…しかしコレ完っ全に自分用だな(;´ェ`)

 

ピンチイン・アウト操作を可能に

はいここで5000字オーバー。 まーたまた1万字超えそうですね(-_-;)
…記事2回に分けりゃ良かったかな。
 

さて、次の作業は「ピンチ操作」をAFFINGER4でできるようにカスタマイズしてみようと思います。

少し前にも書きましたが、ピンチ操作ってのは2本指でつまむような操作をして、画面を拡大・縮小させる機能のことです。

2本指を開いて拡大させるのをピンチアウト、指を閉じて縮小させるのがピンチインです。
今回ピンチ操作を調べるにあたって、たまにコレを逆に書いてるブログがあったんでね、私も間違えないようにしないと。
 

そうそう、私がブクマしているガンプラブログがどれだけピンチ操作に対応しているのかチェックしてみたんですが、ピンチできたのは17件中10件でした。
半数以上がピンチ操作できるようになってますね。 でも思ってたよりかは少なかったかな。

私はあまりピンチって使わないんですが、まーあって困るモンじゃないですし、意外にも簡単に実装できるっぽいんでチャチャっとやっちゃいましょう。
 

これも前に書きましたが、AFFINGER4ではピンチ操作ができません

しかし、公式サイトにピンチアウトできるようにするカスタマイズ法が載っていたので、書かれている通りに「header.php」の “user-scalable=no” を “user-scalable=yes” に書き換えてみました。
…こんだけ?

するとなんということでしょう!
あっという間にピンチアウト・ピンチインができるようになりました!!
 

公式のやり方とは違いますが、調べてみると他にも上記を “minimum-scale=1” と書き換えるカスタマイズ法もあるようです。

こちらの方法だとピンチインで縮小した際に画面が小さくなりすぎるのを防げるらしいとのことで、実際に両パターンを使い比べてみましたが、特に違いは感じられませんでした。

公式の方でも画面が初期サイズより小さくなったとしても、ピンチをやめれば勝手に元のサイズに戻ってくれました。

なので私は公式のカスタマイズでピンチ操作を実装しました。
…この時点では。
 

後にけっきょく後者のカスタマイズに変えることになるのですが、その話は次の項で。

 

ポップアップ表示の再設定

いよいよ今回のスマホ関連のカスタマイズも最後となりました。

ここで行なうのは、以前「画像をポップアップ表示」の記事(2017年7月)でカスタマイズした、画像のポップアップ表示の設定を再検討していきます。
 

なぜそんなことをすることになったのかという話の前に、私がブクマしていたガンプラブログさん達がどういう画像表示形式にしているのかをチェックしたので、まずはその結果を。

 ○次ページで開く:3件
 ○別タブで開く:3件
 ○フルサイズ掲載:11件

全17件の調査結果はこうなりました。
ただし、内1件のみサイトが重すぎて画像表示ができませんでした。 それでも合計が17件となっているのは、1件のみフルサイズ掲載+次ページ表示というちょっと変わった表示形式だったため。

そして忘れちゃならんのが、
 ○ポップアップ表示:0件
というショッキングな結果。

ぐぬぅ… 考えに考えた結果、ウチではポップアップ形式を採用したつもりだったんですが…
現在の「モバイルファースト」時代、フルサイズ表示形式が主流だというのは以前から知っていましたが、こうして数字として出されてしまうと本当にこの選択で良かったのかと悩んでしまいますね…
 

さて、ではこの結果も踏まえた上で、私がポップアップ表示を考え直さざるを得なくなってしまった話をしていきましょう。

今回のカスタマイズをするにあたり初めて自分のサイトをスマホからちゃんと見てみたってのは前に話しましたが、その時に気付いてしまった愕然とする事実。
これは見てもらった方が早いでしょう。

ポップアップ表示

これがこのサイトをスマホ閲覧時、記事内画像をタップしてポップアップウィンドウが立ち上がったところのスクショです。

…分かりますかね? 本来ポップアップってのは縮小された画像を原寸大に拡大表示させる機能。 …のはずが、背景に映っているタップ前の画像よりも小さくなってしまっています!!

なんということでしょう! スマホのモニターサイズが小さいせいでポップアップウィンドウがギュッと縮められてしまっているではありませんか!
 

…と、いうわけです(笑)
いや全然笑えんけども。

こっからはホント~にもう色々考えました。 頭から煙出そうなくらいに。
んで、ポップアップ形式の再検討の前に、どうしてこうなったかの原因をまず探ることにしました。

結果としては勿論上記に書いた通り、スマホのモニターサイズが原因な訳なんですが、じゃあスマホ表示時においてのポップアップ表示というのはどういった形が理想形なのか?
そもそも自分の中ではどうなると思っていたのか?

…思い返してみたんですが、答えは「考えていなかった」ですね…
今までPCからしかこのサイトを見ていなかったツケですね。 恥ずかしい話。
 

もう頭ん中真っ白んなっちゃったんで、ネットで他のサイトはスマホ時のポップアップはどうしてるのかを調べてみました。 きっと私と同じように悩んでいる人はいるはず。

調べるとまず出てくるのがポップアッププラグインをオススメしてくるWordPress解説サイト。
私もポップアップ表示をどのプラグインで実装しようかの比較検討の際に利用させて頂きましたし、感謝もしています。

しかし、この手の解説サイトにはデメリットが書かれていませんでした。
当たり前っちゃー当たり前ですよね。 「オススメ」プラグインなわけですから。 全プッシュですよ。 アフィサイトと同じ。

二言目には「スタイリッシュ」だの「先進的」だの言って勧めてきますからね。
いや、これに関してはまぁ私も同意見なんですけどね。 だからこのサイトに採用したわけですし。

しかしスマホ表示について言及しているサイトは上位ページの中には見当たりませんでした。
そこでキーワードを絞り込んで検索してみるとやっと数件ほどヒットしました。
 

自分が調べた中でのスマホからのポップアップ表示の対策としては、「閲覧者にピンチアウトしてもらう」というのが一番マシな案ですね…
合わせて、「ピンチアウトで拡大できます」といった注釈を添えるというのも必要になってきますね…
よくもまぁこんなんでスタイリッシュ(笑)だのと言ったものです。

ですがまー調べた甲斐はありましたね。 ナンセンスとは言え解の一つは得られました。
あとは実際に自分のサイトに適用してみて、その使い勝手がこのモバイルファースト時代に耐えうる物であるかを判断するとしましょう。
 

ポップアップ+ピンチアウト

さて、スマホのモニター幅までしか拡大されないポップアップ画像への対処法として、「閲覧者に拡大してもらう」というおおよそ丸投げとも言える解答を得てしまった我。

しかし現状ほかに案も無いので、とりあえずこれでやってみましょう。
偶然にもついさっきこのサイトをピンチアウトに対応させることに成功しているので、既に実装自体はできているはず。
 

というわけでスマホからの実機確認を行なってみました。

ポップアップウィンドウ上でピンチ操作を試してみたところ、ちゃんと拡大・縮小されていました。

ところが、拡大された画像を閉じると、戻った記事ページまでも拡大されたままでした
私のイメージとしてはポップアップウィンドウだけを拡大していたつもりだったんですが…
 

ネットでポップアップウィンドウが開いている時のピンチ操作をポップアップウィンドウだけに適用するようなカスタマイズ法を探してみたのですが、ちょっとピンポイントすぎるせいか全く見つかりませんでした。

仕方ないのでこの件については完全に諦めることにしました。

また、拡大された画像を閉じる際にもう一つ問題がありまして、
画像を拡大するとモニターいっぱいに画像が表示されることになるわけですが、その画像を閉じようとすると画像上をタップすれば閉じれるはずが、現在の設定だとスライドショー機能が働いてしまい、同記事内の前後の画像に移動してしまうんですよね。

この点も含めて、ポップアッププラグインの再設定が必要となりました。
 

私が使用しているポップアッププラグインは『Easy FancyBox』。 設定画面のほとんどが英語ですが、lightbox系プラグインとしては1、2を争うほど人気の物なので、解説サイトも多くあるのでまー何とかなるでしょう。

ここで再設定するのは3つ。
①画像タイトルを非表示に
②右上の「×」ボタンを非表示に
③手動スライドショー設定をオフに

③は上記で書いた通りの理由です。ピンチアウト後のモニターいっぱいとなった画像のどこをタップしてもポップアップウィンドウを閉じれるようにするために必須。

①と②はスマホの小さいモニターでポップアップした時、少しでも元画像(サムネ)よりもデフォルトで大きく見せたいため、余計な物は取っ払うことにしました。
 

このカスタマイズにより、スライドショーが無くなり画像間の移動ができなくなり若干の不便さを感じるようになってしまいましたが、画像間移動されると画像だけを見て記事本文を全然読んでもらえなくなりそうな気も前々からしていたので、これはこれで良かったのかもしれないなーと前向きに考えることにしました。
 

そして画像タイトルを非表示をしたのですが、これは大正解だったように思います。
予想通りポップアップウィンドウも少し大きく取ることができましたし、何より画像一つ一つに合ったタイトルを考える手間が省けるようになりました。

まーこの画像タイトルは「代替テキスト」を表示させていたので、これはSEO上入力必須と言われている項目なので裏でキッチリ記入しておかなければならないことに違いはないんですが、人の目に触れない部分だったら記事毎に全部同じタイトルで統一してしまえるので、だいぶ楽になりました(^^)
 

「×」(閉じる)ボタンを消してしまったことで今や見慣れない物となってしまったポップアップウィンドウの消し方が分からないという方も出てくるかと思いますので、注釈として「再タップで閉じれます」的なことを書き添える必要もあるかもしれません。
 

ピンチインの縮小率を再設定

さてさて、これでどうにか「スマホ表示時からのポップアップウィンドウをピンチアウトで拡大」、という操作が可能となったはずです。

実機確認してみたところ、ちゃんとポップアップ後の画像をタップでウィンドウを閉じれるようになってましたヽ(´ー`)ノ
 

しかし拡大・縮小を繰り返すと、たまにサイト幅が縮小されすぎてしまうことがありました。

その時の状態がコチラ↓

ピンチイン

右端のグレーの絨毯みたいな壁紙は当サイトで設定したものではないので、おそらくブラウザによるものなのでしょう。

ピンチアウトで元記事までも拡大されてしまうという仕様上、その後のピンチイン操作はほぼ必須となるでしょうから、これはかなり利便性が悪いと言えますね。
 

なんらかの対処法が必要となるわけですが、これに関しては思い当たる節がありました。

ピンチ操作を実装した時のカスタマイズ案の中にあった、 “minimum-scale=1” と書き換えるパターンですね。

これによりサイト幅がデフォルトよりも小さくなってしまうのを防げるはずです。
 

カスタマイズし直して実際に試してみたところ、上記のような症状は出なくなりました!

もうちょい正確に言うと、ピンチインで小さくしすぎても指を離せばみょい~んと元に戻ってくれるのです。
 

フルサイズとポップアップの比較

どうにかスマホ表示に対応したポップアップ表示を実装することができました。
これでやっとポップアップ形式の検討に入る事ができます。

検討の際に比較となるのは、やはり今のモバイルファースト時代の主流である「フルサイズ形式」ですね。
 

画像を拡大して見る→縮小して元に戻す と行なう時の手数で比べてみましょう。

フルサイズ:ピンチアウト→ピンチイン
ポップアップ:タップ→ピンチアウト→ピンチイン→タップ

フルサイズならピンチ操作のみの2手で済むところ、ポップアップだとそれに加えてポップアップウィンドウの開閉にさらに2手で計4手かかることになりますね。
 

…とまあこの結果だけだとポップアップは完全劣化のように感じますね(;´ェ`)

とはいえこれはスマホ表示の話。
PC表示ならクリックで原寸表示のポップアップウィンドウが開くので、その後の拡大操作は必要ありませんからね。

もちろんフルサイズならそのクリックの工程すら要らないわけなんですが、フルサイズ表示には特有のデメリットもありますしね。
ページの表示が重くなるとか、スクロールが多くなるとか。
 

なのでPC表示においては必ずしもフルサイズ形式が勝っているということでは無いんですよね。 ここは好みの問題でいいと思う。

そう考えると、画像表示の理想形は

PC表示時はポップアップ形式
スマホ表示時にはフルサイズ形式

というのが一番ユーザーフレンドリーかもしれません。 まぁ私の好みが多分に含まれていますが。

残念ながらこちらも実装方法が難しそうなので見送り。 あくまで「理想」ってことですね。
 

そうなってくるとスマホでポップアップを使い続けるためには別の案が必要となってきます。
フルサイズとは違った点でのメリットが一つは無いとさすがに採用は厳しいでしょう。 ここまでやってきて「やっぱりポップアップやめます」とか嫌ですしね。

実はコレには一つだけ秘策というか奇策がありまして……

プラグイン『Easy FancyBox』の再設定を行なった際に日本語での解説サイトを参考にさせて頂いていたのですが、そこで見た設定画面の項目の中に「大きい画像をブラウザのサイズに合わせる」(意訳)というチェックボックスがあったのです!

複数の解説サイトを見比べてみましたが、どうやらここはデフォルトでオン――つまり、モニターサイズよりも大きい画像の場合、自動でリサイズされてしまっていたということなのです!!
 

もしもこのチェックを外し、スマホからでも画像を原寸大で表示させたとしたらどうでしょうか……?

今までならポップアップ形式では、
 タップ→ピンチアウト→ピンチイン→タップ
の4手が拡大閲覧には必要でしたが、

こちらの原寸表示方法なら、
 タップ→(ピンチイン)→タップ
の2、3手で済むようになるのでは!?

原寸での表示が大きすぎると感じた人はピンチインでの縮小操作を挟むかもしれません。
しかしここがミソで、縮小ならどれだけ縮小されたとしても、ピンチ操作をやめれば元のサイズまで戻るという点です。

拡大なら拡大させた分縮小させて元に戻さねばなりませんが(ダブルタップでサイズリセットという手もありますが)、原寸表示をデフォルトサイズとしておけば、その後縮小されても自動でデフォルトサイズまで戻ってくれるのです!

拡大(+)はどこまでも上がるが、縮小(-)は 0(ゼロ)までしか下がらない
という訳です。
 

さらに、ポップアップ時の画像が原寸大であったのなら、普通はそれ以上拡大させようとは思いませんよね? それ以上拡大しても画像が粗くなっていくだけですから。

これならモニター幅まで縮小されているフルサイズ形式と違い、こちらの想定以上(画像が粗くなる)まで拡大されることも減らせるんじゃないでしょうか。
 

さらにさらに、フルサイズ形式では、
 ピンチアウト→ピンチイン
の2手で済ませられていた拡大表示ですが、

ピンチ操作って難しくないですか??
拡大(縮小)させすぎてしまったり……
2本指で押さえたつもりが通常のドラッグ(あるいはタップ)になってしまったり……
極めつけは片手で操作できないという点ですよね!!

私が「あまりピンチって使わない」と前述した理由はこのへんにあります。

なので、極力ピンチ操作を必要とするサイトにはしたくないんですよ、この『ガンプラ気分』は。
 

どうでしょうか、ポップアップでの原寸大表示。
なんだかメリットだらけのような気がして仕方ないんですが(*゚∀゚*)

まぁイマイチなところも少なからずありますわな。

モニターサイズ以上のデカ画像の全体像を見ようとしたらスクロールが必須となりますし、ポップアップウィンドウをスクロールしたままウィンドウを閉じたら元の記事ページもスクロールされてしまっている、とか。

そして何よりかりにくい
他にこんな形式にしてるブロガーさん見たことありませんし。

当サイト独自の仕様、ってことになってしまうんですかねぇ?
個人的には読み込みの遅いフルサイズ形式よりも優れているような気もするんですが……
(もちろん画像を多く使ったギャラリーメインのブログに限った話ですが)
 

lightboxプラグインの検討

それじゃー自分なりの「スマホ表示時の画像のポップアップ表示」について答えも出ましたし、残るはソイツを実装するのみです。 ……やっと終わりが見えてきました(-_-;)
 

解説サイトを見ながら自分の『Easy FancyBox』の設定画面(英語)を見てみたんですが……
自動リサイズの設定項目がありません!!

ど、どういうことでしょう……?
バージョンが違うのでしょうか?
確かにポップアッププラグインをオススメしているサイトなんて数年前の記事ばかり……
 

しかし! いくらバージョンアップしたからって過去にあった機能がまるっと無くなってしまったとは考えにくい。

ネットで探しても最新版の Easy FancyBox の日本語訳が見つからなかったため、英語は赤点スレスレだった私の英会話力をフルパワーにして解読してみました。d(@^∇゚)/
 

ダメもとでしたが、なにやらそれっぽいのを見つけました。
どうやら "viewport" というのがスマホのウィンドウサイズに関わる設定のようです。

最新版(記事執筆時)の設定によりますと、チェックでの自動リサイズのオンオフよりも詳細に設定できるようになり、○px×○px の画像までをリサイズせずに表示するかを指定できるようになったようです。(たぶん)
 

私がこのサイトに載せるガンプラ写真はデジカメで撮ったサイズそのままでアップしているので、そのサイズを上限として自動リサイズを切ってみました。

ワクワクしながらスマホで確認してみたのですが、画像をタップしてもポップアップ表示されなくなってしまいました。 アレー?

その後もちょいちょい設定をいじって確認してみましたが、結果は変化無し。
……私の翻訳が間違ってたんかね?やっぱり
 

アッサリと行き詰まったので、ネットでポップアップでの原寸表示のやり方で調べてみる。
調べ方に目処が付いていたおかげか、今度は同じような悩みを抱えている人を発見。 グラフに書かれている小さな文字をピンチアウト無しで読めるようにしたいとの事。

それによると、どうやら『Easy FancyBox』ではこの自動リサイズを切り、ウィンドウ幅を無視して画像を表示させるのは無理なようです。
 

無理だと分かっただけでも進展ですね。 それなら別の方法を探しましょう。

 

Easy FancyBox が駄目なら他の lightbox系プラグインをあたりましょう。

ちょっとここまで駆け足で来た感もあるので、次のプラグインに求められる必須要項をまとめておきましょうか。

●自動リサイズされない
●スクロール可
●ピンチ操作可
●スライドショーをオフ
●タップで閉じる
●×ボタン非表示
●タイトル非表示
○日本語表記(できれば)

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

全ての lightboxプラグインを検討するのは時間がかかるので、原寸表示を採用しようとしていた人が挙げていたプラグインを中心に、解説サイトに載せられていた各種プラグインの設定画面のキャプ画像の中から、自動リサイズに関する設定項目が有ったプラグインのみに厳選。

結果として6個にまで絞り込めました。 ……けっこう残りましたね(;^ω^)

あとはもーひたすらインストール→有効化⇒設定で試しまくっていくだけよ!
あっ、lightboxプラグイン同士って干渉するって皆さん口をすっぱくして言ってましたんで、一度に有効化しておくのは一つだけってことに注意しておかねばですね。
 

①『wp-jquery-lightbox』
スマホのウィンドウ幅を超えて画像の原寸表示は可能でした。 が、スライドショーが解除できないためにタップでポップアップウィンドウを閉じれず、またポップアップウィンドウ上でのピンチ操作が行なえませんでした。
 

②『jQuery Colorbox』
こちらもスライドショーが強制され、画像タイトルを非表示にすることもできませんでした。 ついでに設定画面が英語。
 

③『WP-Slimbox2』
このプラグインは私が望んでいた要項をかなり満たしてくれました。 しかし、ポップアップウィンドウ上はタップが効かないために惜しくも不採用。
 

④『Lightbox Plus Colorbox』
スマホでもリサイズされない、との情報はあったんですが、残念ながら配信停止により検証不可。
 

⑤『FancyBox for WordPress』
おや?これにも「FancyBox」と付くんですね。 設定画面が英語でしたが、解説サイトを見ながらこちらの要項に沿うようにカスタマイズしようとしたところ、403エラーという見慣れないエラーメッセージが出てしまいました。

プラグイン名、エラー内容がはっきりしていたので、検索かけると答えはすぐに出ました。
どうやら私が使用しているレンタルサーバーであるロリポップの「WAF(ウェブアプリケーションファイアウォール)」とかいうセキュリティソフトによる誤検知だそうです。

このプラグインの設定をいじる時だけWAFをオフにする、という方法で対処できるらしいのですが、私はなんだか怖いのでこの FancyBox for WordPress の検証は後回しにします。 まだあと一つ候補があるので……
 

も、もう残り1つですか……
lightbox系プラグインは今回初めて Easy FancyBox 以外の物に手を出しましたが、今のところ Easy FancyBox が一番性能良いですね。

解説サイトによれば Easy FancyBox はlightbox系プラグインの中では設定項目が少なく簡単に使える、その名の通り「イージー」なプラグイン、と聞いていましたが、今回 lightboxについて色々と調べてみると、もともとこの lightboxというのには「jQuery(ジェイクエリー)」版というのがあるみたいですね。

この jQuery版を使うためにはFTPとかを使って中身を色々と書き換える必要があったそうです。
この導入の難しさを簡単にしたのが WordPressプラグイン版、ってことみたいです。

なので FancyBoxにも元々 jQuery版があり、それを WordPressで簡単に――つまり「イージー」に使えるようにしたのが「Easy FancyBox」プラグイン、なんだと思う。
だから上記で書いたような他のプラグインよりイージーに使えるよ、ってのは嘘ですね。騙されました。
Easy FancyBox は他の lightbox系プラグインと比較してもトップクラスの高性能プラグインです。

今は見送る事になってしまいましたが、同じ FancyBox を使用しているという点からもこの「FancyBox for WordPress」も高性能であることが期待できますね。
まずは6つ目のプラグインの検討が先ですが。
 

⑥『Responsive Lightbox by dFactory
さぁ、最後の候補となったこのプラグインですが、この Responsive Lightbox by dFactory を最後に持ってきたのには理由がありまして……、
このプラグインにはなんと7種類の lightbox系機能が含まれているのです!

数ある lightboxプラグインの中からどれを使っていいか分からない、あるいは複数の lightbox機能を試してみたい、なんて方にはピッタリなんじゃないでしょうか?

しかし7種類もあったら全種類を比較検討している今の私にはちょっと面倒くさい……というのが後回しにした理由です。 今までの倍以上の数があるわけですからね( ´△`;)

あと、プラグインの重さも気になります。
7つも lightbox 入れてたら単純に他の lightboxプラグインの7倍重いって事になったりしないの??
私が調べた範囲内にはそういった意見は無さそうでしたが……
前に書きましたが、この手のプラグインおすすめサイトにゃーデメリットを書かない、という悪癖がありますからね。
 

兎にも角にも、7種類の lightbox機能を1つずつ試していきましょう。

1.「SwipeBox」
自動リサイズを切れない、ポップアップウィンドウがタップで閉じれず、ピンチ操作もできない。

2.「prettyPhoto」
自動リサイズを切れない、スライドショーが解除できない。

3.「FancyBox
きました! FancyBox!! これは期待大ですね。
結論を書きますと、私が求めていた必須要項を(ほぼ)満たしてくれました!!

ほぼと書いたのは、残念ながらピンチ操作の挙動が不安定でした。
ピンチアウト(拡大)後に画像をスクロールしても少しすると初期位置まで戻っちゃうし、
ピンチイン(縮小)に至ってはポップアップウィンドウ上では使えませんでした。

考えてみれば、サイト幅をマイナスまで縮められないようにカスタマイズしたので、原寸大をデフォルトサイズとしてしまった以上そこより縮小されないのは当然ですね。
これは仕方ないかな。 マイナスまでの縮小が維持されてしまうと、今度はそれを戻すためにピンチアウトの操作が必要になってしまいますから。
ピンチ操作を減らす目的もあったこのカスタマイズの意味がありません。

ピンチアウトの挙動に関してはそれほど気にしてません。
前に書きましたが、ポップアップした時点で表示されるのが原寸大なので、それ以上拡大されても画像が粗くなるだけ。
なので当サイトの管理人としては非推奨、って事になりますね。

4.「Nivo Lightbox」
(一応最後まで検証してみます)
自動リサイズを切れない、ポップアップウィンドウがタップで閉じれず、スクロールもできない。

5.「Image Lightbox」
自動リサイズを切れない、オーバーレイ部分をタップしてもウィンドウが閉じない、ポップアップウィンドウ上でピンチ操作ができない。

6.「TosRUs」
自動リサイズを切れない、ポップアップウィンドウがタップで閉じれず、スクロールもできない。

7.「Featherlight」
自動リサイズを切れない、ポップアップウィンドウのスクロールが不安定。
 

はーーい、検証終了!! お疲れ、オレ!

結果として「Responsive Lightbox by dFactory」の7つの lightbox機能の内、自動リサイズされずに画像の原寸表示ができたのは 3.「FancyBox」だけでしたね。
当サイトのポップアップ表示にはこれを使う事に決めました。

⑤「FancyBox for WordPress」が未検証ですが、(一時的にとはいえ)セキュリティを切ってまで試したいとは思わないので。 英語だし。

あ、そうそう「Responsive Lightbox by dFactory」はだいたい日本語化されてます。だいたい。
これも決め手の重要な一因ですね。 これまでお世話になってた「Easy FancyBox」は日本語解説サイト見ながらでないと設定いじれませんでしたから。
 

追記
記事執筆中にこのプラグイン『Responsive Lightbox by dFactory』は大幅なアップデートがなされ、Responsive Lightbox & Galleryへと名称が変更されました。
機能面でも8つ目の lightboxとして「Magnific Popup」が加わった他、ギャラリー作成機能が追加されたようです。
しかし、これらの新機能は日本語化されておらず、解説サイトもまだできていないため、私にはこれ以上の説明はできません。 すまぬ。

 

さーーて、そんじゃ最後に完成品のスクショでも載せて終わりとしましょうかね。

ほい。

原寸大ポップアップ表示

これがスマホから画像をタップしてポップアップされた物です。

写真が原寸大で表示され、当然スマホのモニターには納まらないため写真がはみ出ています。
最初に表示されるのは写真の左上となるようです。
 

おそらくこの画像を見た人は、「写真がはみ出してしまっている」とか「ちゃんとモニターに納まっていない」とか、仕様外の画像形式――つまり、さもバグかのように言われるかと思います。

実際、各種ポップアッププラグインを検討していく中で多くの解説サイトを渡り歩くことになりましたが、やはり「自動リサイズ機能はオンにしておくのが推奨」と書かれているのをよく見かけました。
 

それでも私はピンチ操作無しで画像の拡大表示を実装する方法を他に思い付きませんでしたし、そもそも画像をタップした時点で拡大して見ようとしているはずなので、最初から拡大した状態でポップアップした方がピンチアウトの手間が省けて便利なんじゃないかな~、なーんて思っていますが、実際のところは分かりませんね、まだ。

あとはこのまま使い続けてみて意見を求めるしかないでしょうね。
……はよガンプラの記事書かな。

 

そんじゃーこれで今回の記事は終わり……といきたかったのですが、もう1個だけ。

この記事の中で私は「画像表示の理想形は、PC表示時はポップアップ形式・スマホ表示時にはフルサイズ形式」と言いましたが、実装方法にまるで目処が付かなかったので早々に諦めましたが、lightbox系プラグインを漁っていく中でちょっと可能性を感じる物を見つけたので、メモがてら書き留めておきます。

Boxers and Swipers』というプラグインです。
このプラグインも複数の lightbox機能を備えており、それらをユーザーエージェント毎に個別に設定しておけるという物です。

つまり、PC・タブレット・スマートフォンそれぞれで異なる lightbox効果を設定しておけるらしいのです。

そう、「らしい」。 自分では試してません。
もう……疲れ果ててしまいましてね()´д`()ゲソ…

 

おわりに

ではではではでは、いよいよこれが本当に最後。
 

えー……前回の投稿が4月21日だったのでもう2ヶ月以上更新しなかったことになりますね……

どんなに忙しくても最低月1更新を目指していたのですが……

更新が途絶えた理由は、いつも通り「サボリ」です、ハイ。
 

今回のブログカスタマイズは確かに今までの作業量と比較しても量は多かったんですが、
それでも作業自体は2週間っくらい、5月初旬には終わっていたんですが、
それを文章に起こそうとするとまーーーやる気が出なくって出なくって……

いちおう、少しずつでも進めようと思ってはいたんですが、1000文字くらい書いては1週間サボって……また1000文字書いては1週間サボって……
とまぁそんな感じでした。

この記事のリビジョン(下書き保存機能みたいなヤツ)を見てみると、本日6月29日の執筆完了までに18回ほど中断した履歴がありますね。
一番始め、この記事を書き始めたのは5月5日みたいです。
 

まーだからなんだっつー話ではあるんですが、私はどうも記事を書いても書いても終わりが見えんような長文記事になってしまうとガッツリやる気が削がれてしまうっぽいですね。
この記事も2、3回に分けて書いてれば例え同じ内容の文だったとしてももーちょい早く書きあがっていたような気もします。

ま、今書いてるWordPressカスタマイズ記は私のブログ練習も兼ねてるんで、ここまでの長文を(2ヶ月かかったけど)書き切ったというのは多少の経験値にはなったかな、と。

悔やんだところで過ぎた時間は戻ってこねーので、次はこうならんように頑張るほか無いですね。

 

というわけで次回の予定。 サボらんよーにするには目標を公言しとくと効果があるような無いような?

次回でいよいよブログカスタマイズも最後となります。 おそらくたぶん。

最後に挑むのは、ズバリ「サイト表示の高速化」です。

なんかこのサイト、体感でも分かるくらいにどんっどん遅くなり続けていってるんですよね……
特にスマホ表示。 クッッッソ遅いです、このサイト。 マジで。

『PageSpeed Insights』で表示速度をチェックしてみましたが、当然の如く赤点
こんなんじゃまともに運営していけるとは思えません。

なのでこれの改善は必須。
……なのは分かっているんですが、具体的にどうすればいいのかまるで分かりません(´;д;`)

一応、過去に PageSpeed Insights でチェックした時に、「画像の圧縮」だけはやって多少は点数を上げていたんですが……

これ以上の速度改善のためには「JavaScript」だの「レンダリング」だの「キャッシュ」だのをなんやかんやすることになっていくんですかね??
 

あっ、そういえば少し前にロリポップから『コンテンツキャッシュ機能正式版』だかが全員に使えるようになったよ、みたいなメールが来てましたね。
なんでも「WordPressが最大で24倍速くなる」んだとか∑(゚∀゚)

なんというグッドタイミング……!
とりあえずはコレを試してみるところから、ですかね。
 

おっと、その前に今回の新ポップアップ表示形式の使い方の注釈を付けねばなりませんね。
当サイト唯一のガンプラレビュー記事『HG エールストライクガンダム 【レビュー】』にやっとかねば。 たまーーに閲覧されてるらしい。 ……ついでにリライトしとこ
 

それと、今回の検証で使ったポップアッププラグイン各種を削除しておかねば。 まだいっぱい残ったままだ。

そういやプラグインって無効化してただ残しておいてるだけでもWordPressが重くなる要因になってるんですかね??
私今後使おうと思ってるプラグインを忘れないようにとりあえず有効化せずに入れておいてるんですが……?
 

まだまだサイト完成に向けてやるべき事は残ってるっぽいですが、今回はここまで!!

19000字オーバー!!!!

-ウェブサイト作成

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