意外と知らない掟がある・・・
WordPressにデフォルトで備わっている「テキスト」ウィジェット。基本的なHTMLの記述ができるので、リンク付き画像を表示させたり、広告を表示させたり、幅広く利用できる”汎用ウィジェット”です。
そんなテキストウィジェット内に、オリジナルの画像リンクを貼って利用したい。でも、「表示させたい大きさぴったりにリサイズした画像」をアップロードし、そのまま貼っても、高解像度ディスプレイでは綺麗に表示されません。
例えばRetinaディスプレイで閲覧した時にも元画像のクオリティーを再現したいなら、表示させたい2倍のサイズの画像をギュッ！と凝縮して表示させる必要があります。だから、ウィジェット内でも画像をギュッ！と縮小表示させる必要があるわけですね。
関連記事
で、こんな風に「width」を付けて、サイズ指定しようとしても・・・
<img src="https://..." width="150">・・・アレ？小さく表示されない？ナンデ？width指定が効いてない？
という残念な結果になります。heightを追加しても同じ。なぜでしょう？
実は意外と知られていない、【ウィジェットの掟】が存在するからなんです。
テキストウィジェットで必ず有効な幅指定
通常のwidth指定が効かない場合はどうしたらいいんでしょう？「なぜ効かないのか」の理由は後回しにして先に答えを出します。スタイル指定をすればOK。つまり、こんな感じで記述してあげればいいということです。
<img src="https://..." style="width:150px;">この指定方法であれば、画像を小さくすることも、逆に大きくすることも可能になります。
ただしウィジェット内では、アップロードしたオリジナル画像よりも大きく表示させるスタイル指定は出来ません。これもウィジェットならではの特徴として、ついでに覚えておきましょう。
ウィジェットでスタイル指定をするソース例
具体例を挙げます。例えばこんなGIFアニメーションのロゴを表示させたい場合。
このコが入っているウィジェット内では、このように記述します。
<div align="center">
<img src="https://...gif" alt="レク.ログ" style="width:150px;">
</div>余談ですが、画像や広告がウィジェット枠内の左に寄ってしまっているのをたまに見かけます。好みによるかもしれませんが、このように中寄せ指定もすると綺麗に収まるのでオススメです。
TCDテーマであれば、<div class=”align1″></div>で挟めばOK。
「通常のwidth指定」が出来る場合と、出来ない場合
おれ、通常のwidth指定でうまいこと縮んでくれてるねんけど・・・？
実は、そんなことも起こります。もちろん、運やタイミングで左右されるわけではなくて、ちゃんと理由があります。答えは、「使用している画像形式（拡張子）による」、です。
つまり使用する画像形式によっては、通常のwidth指定が効くということ。独特な「ウィジェットの掟」を以下にまとめます。
「ウィジェットの掟」-画像形式ごとの特徴
「JPEG」「GIF」「PNG-8」「PNG-24」の4つの画像形式に分けてまとめています。
…？？「PNG-8」？…「PNG-24」？ という方はこちらを参照下さい。
JPEG
GIF
PNG-8
PNG-24
つまり、GIFアニメとPNG-24形式の場合のみ、スタイル指定が必要ということですね。
画像をPNGで書き出している場合、なんとなくPNG-24で書き出している人も多いと思います。「アレ？widthが効かない？」という場合の多くはそのパターンが多いのではないでしょうか。なお、GIFやPNGにおける透過処理の有無は関係なく、同様の結果となります。
【まとめ】ウィジェット内でのサイズ指定
GIFアニメ、PNG-24形式のみスタイル指定が必要
スタイル指定はいずれの画像形式に対しても有効
高解像度ディスプレイに対応させるためには、画像のファイルサイズは大きくなりがちです。静止画像でリンクを作る場合も、やはり画像形式の使い分けをした方がいいでしょう。
また、【記事がメインであること】【ウィジェットのせいでページ表示を遅延させない】観点から、バランスをとったサイジングに抑える、という方法も考えられます。
Retinaディスプレイ対応まとめ
