本記事のキャプチャ画像は2018年6月10日時点のものです。
わたしはブログを書くにあたり、文字だけだと見にくくなるため、ところどころ画像を使ってます。
ブログ記事をいくつか書いてきて気付いたんですが、画像が白いと背景ページと同化してしまって境目が分からなくなってしまいました。
・・・ということで、今回は画像に枠線を入れてみました。
画像に枠線を表示される方法の調査
別に画像が表示されないわけではなく、表示崩れが起きているわけでもないため、対応する必要は必ずしもあるわけではありません。
ただ、ブログを見に来てくれた人が見づらいと思い、何とかできないかとGoogle先生に聞いてみました。
すると、画像に枠線をつけることはスタイルシートを使うことでカンタンに解決できるとのページを見つけたため、早速試して見ることにしました。
画像に枠線を追加するスタイルシート
どうやら、以下のスタイルシートを追加してやれば、画像に枠線をつけれそうです。
1 2 3 | img { border: 1px solid black; } |
このスタイルシートの意味はシンプルで
「画像ファイルに1ピクセルの黒枠線を追加する」
というものです。
スタイルシートを知っている人からしたら、基本中の基本なんだと思いますが、わたしは初心者なので、そんなことは知りません(笑)
ちなみに、このスタイルシートのコードは過去インストールしたプラグイン「Simple Custom CSS and JS」を使って専用のスタイルシートを追加作成して設定しました。
「Simple Custom CSS and JS」プラグインを追加したときの過去記事はコチラからどうぞ↓
スタイルシートのコード追加後に画像を確認してみます
上記のようにスタイルシートのコードを追加した後にプログサイトの画像を確認してみると・・・画像に黒い枠線が付いてました。
これであれば、画像とページ背景との境界が分かって見やすいと思います。
この方法だと、ソースコードのimgタグを一つ一つ修正することなく、imgタグで表示している画像全てに「枠線」を反映させることができます。
ただ、この方法だとアフィリエイトリンク等の分析でドット画像を埋め込むと、目立ってしまうことになるため、ご注意下さい。
ブログサイトでアフィリエイトリンクを張っている人は注意してください。
