オープンソースの画像生成AIをセットアップから使い方まで解説する『Stable Diffusion AI画像生成ガイドブック』(ソシム刊)発売中(→本のサポートページ

calendar2photoモジュール(d:id:hatenadiary:20031119#1069200045)

恐ろしく早い仕事にびっくり(でもたまには「はてなダイアリーへの要望」もチェックしてほしいです。URL判別文字についてなど、すぐに対応できそうな要望が上がってました→id:hatenadiary)。

スタイルシートは、「hatena.css」にさらに下の内容が追加されました。昨日のd:id:Imamura:20031118:1069081200とあわせてご覧ください。

td.calendar-day img {
	width: 15px;
	height: 15px;
	border: 0;
}

カレンダー内の写真の表示サイズを変えたい時には、上の「width」「height」の数字を変えて指定すればよい…のですが、上の「hatena.css」ではカレンダーらしくするために「width」と「height」が同じ数値に指定されており、その結果、正方形にリサイズされるようになっています。すなわちよく見ると、縦長の写真は横方向に、横長の写真は縦方向に引き延ばされているのです。

「width」だけ、たとえば「width:40px;」などと指定して、同時に「height:15px;」を省略すれば、画像の横幅が広がり、かつ画像の縦横比は維持されるようになります。カレンダーは大きくなりますが、画像を判別しやすくなるでしょう。

縦長の写真が多い人、横長の写真が多い人、またその内容も含めて、人によっていろいろな調整方法がありそうです。好みに応じて、たとえば「width」の指定をなくして、「height」だけを指定してみるのもよいかもしれません。

正方形にリサイズされて、写真が横や縦に延びるのを味わいと感じる方なら、「width:30px;height:30px;」というように、「width」と「height」を同じ数値に指定しつつ、数値を大きくする方法もあります。

なお、「px」はピクセル数のことです。calendar2photoモジュールの表示に使われている画像は、長辺が最大60ピクセルです。画像の縦横比にもよりますが、指定する数値は「60px」までに抑えるのが、画像をきれいに表示するコツです。