ブログの画像に枠をつける ~ CSSのimgタグとWordPress

スポンサーリンク

今回は、ブログ記事の画像に枠をつける、という設定をしました。

スポンサーリンク

画像の文字がリズムを壊している

このブログ記事で使う説明画像は、説明資料や講義でも使うので文字が入っています。

しかし、これまで本文と画像内の文の見分けがつきにくく、記事を読むときに文章が繰り返されたりして、リズムが悪いように感じていました。

なんか自分でも違和感があったんですよね

そこで、違和感の原因を考えたところ「読む順番がわかりにくいから」と思い至りました。例えば、漫画でも上から下へ自然な順番で読むことができるように、文字の配置は工夫されていますよね。これが不自然な配置だと、それだけで読みにくいことがあります。ブログ記事でも同様です。

そこで、「ここからここまでは説明画像!」というのがわかりやすくできないか、と考えました。

追加CSS

このページはWordPressなので、スタイルは「追加CSS」に記述します。

「外観」→「カスタマイズ」→「追加CSS」の順番で選択します。

そこに、以下のように記述しました。

.wp-block-image img {
    border: 3px solid #f0c020;
}

CSSの中身をちょっと解説

まずは、基本はこのように書きます

img {
    border: 3px solid #f0c020;
}

意味は、「すべての画像(img)に、オレンジ色(#f0c020)の3 ピクセルの枠(border)をつける」

しかし、これだと、ブログ記事以外の画像も枠がついてしまいます。

そこで、「ブログ記事内だけ」にする必要があります。

.wp-block-image img {

このように書くと、class「wp-block-image」の「img」タグにだけスタイルが適用されます。

このクラスは、HTMLソースコードを見ることで調べることができます。

ブラウザGoogle Chromeの場合は、画像の上で右クリックすると「検証」できますので、近くのコードから「class=」と書いてある場所を参考にしてください。

このclassを探すのは慣れがありますよね

こちらもどうぞ

タイトルとURLをコピーしました