画像に枠線をつけてみやすくします
ブログ内の画像が背景の色 (白) と同化してみづらい。
自分で読んでいて気になったので、画像に枠線をつけて目立つようにしたいと思います。
ブログ内の画像に個別に枠線をつける
まず普通に写真をはってみます
画像の背景 (白) が、このブログの背景 (白) と同化しています。
※ちなみにこの画像は loosedrawing さんから使用させて頂いています。ありがとうございます。
これに枠線を付けていきます。
この画像をHTMLビューでみると下記のようなコードがでてきます。
<div class=”separator” style=”clear: both; text-align: center;”><a href=”https://(ここが写真の情報)” style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”800″ data-original-width=”800″ height=”320″ src=”https://(ここが写真の情報)” width=”320″ /></a></div>
このコードの
src=”https://(ここが写真の情報)” ココ width=”320″ /></a></div>
ココ にコードをたして枠を付けていきます。
① 直線の枠をつける
style=”border: 3px solid rgb(60, 78, 128); padding: 1px;”
上記のコードを下記の場所に挿入します。
<div class=”separator” style=”clear: both; text-align: center;”><a href=”https://(ここが写真の情報)” style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ data-original-height=”800″ data-original-width=”800″ height=”320″ src=”https://(ここが写真の情報)” style=”border: 3px solid rgb(60, 78, 128); padding: 1px;” width=”320″ /></a></div>
② 点線の枠をつける
style=”border: 3px dotted rgb(60, 78, 128); padding: 0px;”
③ 二重線の枠をつける
style=”border: 3px double rgb(60, 78, 128); padding: 0px;”
④ 直線の枠、影ありをつける
style=”border: 3px solid rgb(60, 78, 128); box-shadow: 0px 0px 10px #808080;”
今回は下記の記事を参考にさせて頂きました。ありがとうございます。
http://chillslab.blog52.fc2.com/blog-entry-93.html
https://gobgoblog.com/2018/08/image-border-picture.html
色の指定ですが、#3C4E80 のような指定ではうまくいかず、rgb(60, 78, 128) のような色の指定でないと反映されませんでした。
理由はまた勉強してみます。
まとめ
・ブログ内の画像に個別に枠線を設定することができました。
・枠線の色や形式、影などは自由に設定できるようです。
これで画像が目立つようになりました。
こうみるとブログって画像が大事ですね。
コメント