概要
注意 ※バージョンや環境によっては正常に動作しない可能性があります。
ワードプレスの無料テーマCocoonを触っていて、どうしてもロゴ画像がぼやけるというか、滲んでしまう現象がありました。
正直これはCocoonが原因ではなく、ワードプレスとiPhoneのRetinaディスプレイなんじゃないかな～と思うのですが、自分の環境で起きたことと、その原因と、対策をメモっておこうと思います。
サイズが小さい画像を設定したらiPhoneでにじむ
PCでの表示の際に、縦をそんなに大きくしたくなかったので、縦横150pxの正方形の画像を、ロゴ画像に設定しました。
表示を確認すると、PCではくっきり見えてますが、iPhoneでみると滲んでいました。
これは多分ですが、iPhoneのretinaディスプレイが影響していると思われます。
retinaディスプレイは通常の倍の解像度で表示しているので、小さい画像を入れるとぼやけてしまうのですよね。
なので、iPhoneで綺麗に表示させるには、150pxよりも大きな画像を入れないといけない、ということになります。
ということで、500pxの画像にロゴ画像を差し替えました。
ただ、PCではこれだとロゴ画像が大きすぎます。
なので、「Cocoon設定」「ヘッダー」タブ内の「ヘッダーロゴサイズ」で縦横150pxに設定しました。
そうすると、iPhoneでは綺麗にくっきりうつりました。
ただ、残念ながらPC環境でぼやけて表示されるようになってしまいました。
困った。
大きい画像を設定して、ヘッダーロゴサイズでサイズを変更したら、今度はPCでにじむ
iPhoneのretinaディスプレイに合わせると、PCではうまく表示できない、という新たな問題にぶつかってしまいました。
画像自体は500pxなのですが、「ヘッダーロゴサイズ」で縮小するとPC表示はぼやけてしまうのです。
iPhoneでは大丈夫なんですけど。
これは500pxを150pxと小さくし過ぎてるのかな？ と思って「ヘッダーロゴサイズ」の値を300pxとか400pxにしてみたんですけど、それでもぼやけていました。
縮小率の大小が原因ではないらしい…。
ただ、ちょっと試行回数が少ないなと思いまして。
次は50pxごとに変えてみました。
そしたらなんと、250pxではにじまなかったのです。
この結果から、縮小サイズは50%ごとに設定しないとダメなのかも？ と仮説を立てました。
試しに125pxにしてみたら、これもぼやけない。
試しに75%の375pxにしてみたところ、これはダメでした。
150pxにこだわりはありません。なんかそのぐらいの縦サイズにヘッダーがなればいいや、ぐらいです。
なので、125pxが採用されました。
よかったよかった。
ただ残念ながら、あくまでも自分の環境だけです。全ての人の解決策になる、とは限らないです。
50%以外でも表示されるポイントがどこかにあるかもしれません。そこまで調べたくなかったので、とりあえずこれでいいやで完了としました。
多分の原因と対策
原因は、縮小サイズの指定っぽいですね。きっちり半分にしていかないと、ぼやけるようです。
これはCocoonというよりはワードプレスの表示なんでしょうかね。それともHTMLなのか、もしくはブラウザなのか。
ただ、この法則が当てはまるのであれば、任意のサイズでPCでもiPhoneでもにじませずに表示できます。
例えばPCでは512pxの幅で表示したいならば、1024px幅の画像を準備して、ヘッダーロゴサイズの幅512にすればよいわけですね。高さもそれに合わせて微調整する感じですね。
1024×576の画像でも試してみたのですが、512×288、256×144でにじまずぼやけず表示できたので、自分の環境化では有効な手段のようです。
多分ベストプラクティスはPCとモバイルで、使う画像を変えることなんでしょうけど、テーマ自体に機能を追加する必要は全然ないと思います。
使わせてもらっているテーマですからね～。今のままでも充分すぎるぐらいのテーマなので。
実は、ヘッダー画像周りで、自分の環境だとぼやける場所がもう一つありまして、それが固定されるヘッダーの画像です。
固定されるヘッダー画像は、縮小されて画面左側に表示されます。そこの画像がぼやけます。とは言ってもロゴだと小さいからそこまで気にならないのですが。
これ、自分の環境ではcocoonの公式サイトでもなってます。他の人の環境だと大丈夫なんですかね～。
デフォルトだとここの高さは決まっていますが、この高さを上手く調整することでなんとかなります。
ナビに使われているliの高さと、画像の高さを調整するとくっきり表示になったんですけど、他のタブにいって戻ってくるとぼやけています。なのでここはまだ対策を考え中です。
といってもこれも自分の環境だけなので、他の環境でどうなのかはわかりませんが。
まとめ
今回の件、他の環境でも再現されるのかはわかりません。
プラグインはxmlサイトマップと旧エディター使用とセキュリティ系のものしか入れていないので、プラグインもりもりの人とはかなり動作が違う気がします。
にじむ系の話は公式のフォーラムにも上がっていましたが、別の原因で治ったみたいなので、自分の件とは違いそうですし。
画像の縮小に関しては、ワードプレスが内部でどんな処理をしているのかとか良くわかっていないので、対処療法的なことしかできませんでした。
他の環境の人が、このサイズ指定をして問題解決するかどうかは、正直わかりません。
また、この対策が永続的である保証もありません。
とりあえず、今回はこれで自分の環境ではなんとかなったので、というメモです。
前述したとおりに、自分の環境だけ治っている可能性があります。
まあ自分だけの解決策かもしれませんが、もしかしたら誰かの参考になるかもです。
ロゴはサイトの顔みたいなものなので、デザインはともかくとして、はっきりくっきりうつっていて欲しい、という願望があります。
全ての環境で、というのはなかなか難しいので、ある程度の諦めは必要ではあるのですが。
とりあえず自分の環境では満足のいくところまで持っていけたので良かったです。
