昨日の花見にはカメラ持参しなかったので、昼に散歩がてら街路樹の桜を撮ってきました。
さて、写真は刺身のツマで、今回は大きな画像を記事の幅いっぱいに表示したい時の小技です。テンプレをこまめに変更する方や可変幅のエントリエリアを使っている方向き。<img src="X.jpg" style="width:100%;">でも良いのですが、拡大縮小が綺麗にレンダリングされない場合もあります。そこで、<a>のbackgroundに表示したい画像を指定します。
<p style="padding: 5px; border: 1px solid #666;"><a href="画像のURI" style="display: block; background: url('画像のURI') no-repeat X% Y%; height: 10em; text-indent: -1000em; overflow: hidden;" title="タイトル">リンク文字列</a></p>background: url('画像のURI') no-repeat X% Y%;のpositionプロパティで表示したい部分を設定します。画像の中心を表示の中心に合わせるにはbackground: url('画像のURI') no-repeat 50% 50%;になります。
これは、そのままテンプレのヘッダなどにも使いまわしできます。お試しあれ。
< それで桜はどうした？ | ”探偵儀式”を読んだ > | 表紙へ戻る |