バナーをつくりました


地味にRetinaディスプレイ対応です。
（↑ここに貼ってあるものはてがろぐ本文でHTMLタグを使えないためRetina非対応です。
Retina搭載端末からご覧の方で表示のされ方の違いに興味がありましたら、Aboutページで表示されているものと比べてみてくださいね。）

【追記】2022.10.18～　サイト改装時に通常の200*40バナーのみに統一しました。

以下は当時の話ひと手間かかってしまいますが、もしRetina対応版を使いたい方がいましたら banner_retina.pngを直リンク（または持ち帰り）していただければ400*80のバナーになりますので、それをHTMLタグやCSSなどでwidth200px height40pxで表示させて使ってやってください。

もちろん、そんなこと一切気にせず通常版のバナーを普通に貼ってもらって全く問題ありません。
高画質版はあくまでただのオプションです。

——

以下は私のサイトだけに関係のある話で、リンクバナーを貼りたいだけの人はあまり気にしなくていいこぼれ話。（読まなくて大丈夫です）

Aboutページにアクセスした端末がRetinaディスプレイであれば高画質版を表示し、そうでなければ通常のバナーが表示されるようになっています。
もし高画質版のバナーだけを表示してしまうと、（高画質版は実のところ”画質”が良いのではなく単に実画像サイズが2倍のものを縮小表示しているだけなので）バナーリンクを貼る作業をする際に必ずリサイズしてもらう手間を取らせてしまうことになり、そのような事態は避けたかったので、閲覧者の環境により表示するバナーを出し分けるという対応にしました。

※Retinaディスプレイは1ドットに4pxを表示できるため小さいサイズのバナーを原寸で表示するとぼやけてしまう。それを避けるには実際に表示したいサイズよりも大きな画像を用意してCSSなどで縮小して表示する必要がある（細かい説明は間違ってるかもなので雰囲気だけ伝わってください;）

今回の作業によりsrcsetというパラメータを初めて知りました。いろいろ進化してんだなぁほんと…。
なおsrcsetは私のサイトでバナー配布するにあたり2サイズのバナーを自動で出し分けしたいという事情のために必要だったものなので、単にリンクバナーを貼っていただく方には関係のない設定です、お気になさらず。

参考：Retinaディスプレイでブログやウェブサイトの画像をぼやけさせない方法 | ワードプレステーマTCD

これによりアバウトページからiPhoneなどのRetinaディスプレイ搭載端末でバナーを保存すると2倍の大きさのバナーが保存されてしまう（＝iPhoneや iPadから保存した人にはバナーのリサイズを強制することになる）という地味な問題があるかと思いますが、バナーリンクを貼る作業をする人は大体PCからやると思うので、見栄えの方を重視することにしました。

そもそもRetina対応しなきゃいいじゃんというツッコミはなしでお願いします。自分がiPad Lover なので自サイトでぼやけたバナーが表示されるのが落ち着かないというのがそもそもの動機でしたので。Retina対応は本当に単なる自己満足です。

———-

その他やったこといろいろメモ。

・画像の直リンク拒否
今までやってなかったというわけでもないですが、狙った挙動をしていなかったことに気づいたので修正しました。
もし画像表示まわりに不具合があったらメールフォームからお知らせいただけるととても助かります。
なおバナーは直リンクOKです。


・その他
・Wordpressテーマの子テーマを作って親テーマと分離しました。
・dnsプリフェッチというサイト高速化の方法を試してみました。
・タブレット端末以下の画面サイズではハンバーガーメニューを復活させました。
・複数ファイルに分かれていたCSSを1ファイルに統合しました。


本当はタイトルロゴとかも作ってみたかったんですがいったん断念。
次にサイトデザインをがらっと変えることがあればまた検討します。

9月はサイト自体の強化月間になりましたがそろそろ切り上げて、10月からは中身の拡充の方に注力します。


#カスタマイズ #Wordpress #高速化