omitsublog

自分がいいと思ったもの、チャレンジしたこと、試したものなどを紹介してくブログ。いろんな分野のハンドメイドに挑戦中。クズ男ガチャの引きなら誰にも負けない自信あり

画像に枠をつける方法

こんにちは。おみつです。

今日は画像に枠をつける方法を実践してみました。

 

 

私も記事内でよく画像を貼り付けます。写真を貼る場合はいいんですけど、スマホのスクリーンショットを貼り付ける場合、背景色が白なのでどこからどこまでが画像なのかが分かりにくいんですよね。


f:id:omitsublog:20181110203752j:image

 

↑こんな感じ。緑枠の[はてなキーワード]から[…]までが画像なんです。

見にくいですよね。

なので、画像に枠をつけました。

 

 

あ、ちなみにこのページの画像に枠がついてるのは、設定後だからです。わかりづらくて申し訳ないですが、画像の中の画像を見ていただきたいです。ここでいうと緑枠の[はてなキーワード]から[…]までです。

 

 

例のごとく、他のブログ様にコピペさせてもらいました。

 

 

コード

 img {
    border : 1px solid #DADADA ;
    border-bottom : 1px solid #757575 ;
    box-shadow : 0 2px 4px rgba(0, 0, 0, 0.2) ;
}

 

引用元

yossense.com

 

こちらのブログを参考にさせてもらいました。

 

 

コードをコピーして

デザイン > スパナマーク > デザインCSS

で貼り付けるだけです。


f:id:omitsublog:20181110203808j:image

 

変更を保存するのを忘れずに。

 

 

確認してみるとこうなってます↓


f:id:omitsublog:20181110203827j:image

緑枠の[はてなキーワード]から[…]までが枠で囲われました。

この方が圧倒的にわかりやすいし、見やすいですよね。

 

 

このままでもよかったんですけど、もう少しわかりやすい枠にしたかったので、少しいじりました。




f:id:omitsublog:20181110214443j:image

 

borderとborder-botomのサイズ1pxを2pxに変更。

色も#a8a8a8に変更しました。

 

 

そしたらだいぶ枠がハッキリしましたよ↓


f:id:omitsublog:20181110203856j:image

かなり見やすくなりましたよね。

 

 

最終的にはこれだけ未設定と差が付きましたよ↓

左:未設定   右:設定後

f:id:omitsublog:20181110214343j:image

 

うん、よくなった!

たったこれだけなので絶対やった方がいいと思います。

私ももっと早くやっておけばよかったと思ってます。

 

 

いろんな方のブログを参考にさせてもらってではあるんですが、どんどんレベルアップしていけてる気がして、とても楽しいです。

 

 

多くの人が興味ないとは思いますが、今日でブログ初めて一か月になりました。

ちょいちょいサボってますけど、今後も楽しんでやっていけたらいいなと思います。

 

 

おみつ。