独自の画像縁(枠線)をStyle.cssに

投稿内に挿入する画像の縁(枠線)を幾つか用意、当ブログが日記風だと言っても少しは見た目を良くしたいと思い、以前のWeblogのCSSから幾つかを試した。

Style.cssに幾つも書き加える場合は、属性にクラス(Class)名を付ける。クラス名は、アルファベットの最後の3文字(qwxz)あたりを組み合わせた。

1)「メディア」なしで影付き角丸

img.xxx {
border:solid 2px #d0d0d0;
border-radius: 5px; ➡調整(8px,10px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}

2)指定サイズなしの円形・「メディア」なしで影付き

img.xxx {
border: solid 2px #ccc;
border-radius:50px; ➡調整(75px)
box-shadow: 5px 5px 5px rgba(0,0,0,0.4); ➡影付き
}
*画像サイズ(W150xH113)、調整の75pxにすると円形

3)斜め15度ほど回転、「メディア」でOK!

img.xxx {
border:solid 2px #ccc;
border-radius: 5px;
transform: rotate(5deg); ➡逆回転(-5deg)
}

*1)~3)URLでの使用も可:
<img src=”【画像URL】” style=”border-radius: 0px; border:none; box-shadow:none; transform: rotate(0deg)” alt=”【代替テキスト】”> ➡当ブログでは「title=””」で「ふきだし」

取り合えず基本枠として3縁(枠線)を用意した。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)