Utility log

concave and monotonically increasingなブログです。買い物や欲しいものを記録します

画像のサイズを揃えてみた

ブログのデザインについて。
興味のある人は、プログラミング初心者のコメントであることを念頭に置いて読んでね。

今日ようやくPC向けのテンプレートを設定してすっきりした弊ブログだが、プレビューしてみて思ったのは「画像がでかくて鬱陶しいな…」ということである。

そこで、とりあえず画像のサイズを一律で揃えたらいいのでは、と思い、CSSに手書きでちょっとしたスクリプトを埋め込んだ。
具体的には以下の手順。

  1. 管理画面→デザインの設定
  2. レンチのアイコンをクリック
  3. {}デザインCSS
  4. img~部分のスクリプトを挿入。
/* <system section="theme" selected="11696248318753279893"> */
@import url("http://hatenablog.com/theme/11696248318753279893.css");
/* </system> */

img.hatena-fotolife{
	width: 400px;
	height: auto;
}

/* <system section="background" selected="default"> */
/* default */
/* </system> */


たったこれだけだが、雑然とした印象はいくぶん緩和されたように思う。
必要であれば、javascriptを使ってif分岐を取り入れるなりして小さい画像についてはそのままのサイズで表示するとか工夫ができそうだ。
なお、周知のように、ブログ本文中で別途サイズを指定する場合は、

<div height="400px" width="200px"> [f:id:から始まる画像コード] </div>


と追加すれば簡単にサイズが変更できるが、上記のCSSと併用した場合は文中の指定サイズで命令が上書きされるようだ。