【はてなブログ】写真や画像のカドを丸くして表示する方法！

今回は、下の例のように写真や画像のカドを丸くして表示する方法をご紹介します。

ちなみに下の写真は我が家のアイドルペットのハムちゃんです。

今日は、画像の表示方法について紹介するよ！
ちなみに、ボクの事については「ペット」カテゴリの記事を見てね！

設定方法

それでは、実際の設定方法について紹介していきます。
ここでは、下記の３点の設定を行うことができます。

1. カドが四角い写真や画像のカドを丸くしてサムネイル表示する
2. サムネイル表示する画像サイズを、記事の幅を基準とした相対的なサイズで表示する
3. サムネイル画像に影を付ける

２番目の「相対サイズ表示」が少し分かりづらいと思うので解説します。

通常、画像を表示すると下の画像のように記事の横幅いっぱいに画像が表示されてしまいます。

スマートフォン等ではあまり気にならないかもしれませんが、PC版だと画像が結構どデカく表示されてしまうため、好ましくありません。

そこで、サムネイル画像を記事の横幅を100%とした相対サイズで表示してやることで、スマホ側の表示も崩すことなく調節できるのです。

例えば、先程の画像を90%で表示すると↓のような感じで記事の横幅の90%のサイズで表示されます。

いかがでしょうか？
少しスッキリしたイメージで、PC版は先程よりこちらの方が見やすいのではないでしょうか。

CSSの設定

「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記します。

/*↓----画像表示----↓*/
.wa_frame {
	text-align: center; /*画像を中央表示*/
}
.wa_frame img {
	width: 90%; /*記事の幅に対する画像サイズ*/
	border-radius: 20px; /*カドを丸くする度合い*/
	object-fit: cover;
	box-shadow: 4px 4px 8px; /*影の設定*/
}
/*↑----画像表示----↑*/

使い方

画像タグを<div class="wa_frame">〜</div>で囲って下さい。

例えば、下記のようなイメージです。

<div class="wa_frame">画像タグ</div>

まとめ

いかがでしたでしょうか？

画像もひと工夫加えるだけで、違った見せ方をする事ができるので、是非試してみて下さい！