文章と対応する画像が分かりにくかったのでCSSで余白を調整してみた

どうも、スマコマのコマ太郎です。

このサイトでは説明用にスクリーンショット画像を多数使っていますが、どうもわかりにくいというお声を頂戴しました。

自分自身も書いているときに迷うのですが、前後の文がどっちの画像を指しているのか わからないわけです。

とは言え、すでに書いた記事すべて直すのは大変。ということでCSSでちょちょいと直そうと思ってカスタムしてみたら、意外とよく出来たので備忘録がてら記事にしてみます。

CSSのサンプルコードは後半に載せておきました。

起こっていた２つの問題

説明を補足するために用意したスクリーンショット画像を文章の間あいだに入れていたのですが、文章の下の画像がそれなのか、文章の上の画像がそれなのかわかりにくかったのです。

さらにスクリーンショット画像に文字が入っていると、記事の文章なのか、スクリーンショットにたまたま入っている文字なのか、わかりにくかった。

そこでそれを改善するために、スクリーンショット画像に枠（ボーダーライン）をつけ、さらに文章と画像の対応がわかりやすいように画像と文章のマージンを調整してみました。

画像に枠をつけ、マージンを調整

上のマージンを広く取ることで、画像の下の文章が画像の説明であることがわかりやすくなったと思います。

文と画像の対応

こちらの画像のほうが文と画像の対応（マージン）がわかりやすいかな？ （※上図の赤い矢印は無視してください）

ついでにメディアリンクになっている画像はマウスオーバーすると、ボーダーラインが青（リンク色）になるようにしてみました。

このサイトでは画像はできるだけ大きめのものを用意し、画像をクリックすることで大きい画像で見ることができるようになっています。これは Easy FancyBoxプラグインを使って実現しています。

しかし今までは画像をクリックすると大きい画像になることが分かりませんでした。リンク色のボーダーラインをつけることで画像がリンクになっていることが分かりやすくなったと思います。

画像の余白を調整するカスタムCSS

さて。このサイトに追加したCSSコードがこちら。

CSSコード

.pt-post-main は、このサイトのテーマで使っているコンテンツ領域（記事本文の枠）のクラス名です。ここはあなたが使っているテーマのコンテンツ領域のクラス名、またはID名に変更してください。よくあるのが、contents ですね。

margin-top で、画像の上側のマージンを調整しています。下側マージンは、margin-bottom で調整します。

padding で、画像とボーダーラインの間に余白を設けてみました。これは なし にするのもいいです。

border でボーダーラインの太さ、色、線の種類を指定しています。この辺りはお好みでカスタムしてください。

自動的に追加されるクラス名

なお、img[class*=”wp-image-“] の意味ですが、WordPress の機能を使って画像を追加するとクラス名に wp-image-番号 が自動的に追加されます。これを利用して識別することでアフィリエイトバナーやインプレッション画像には反応しないように加工しています。

まとめ

CSSが使えると、このようにサイト全体を一括で修正でき便利ですよ。

記事１つ１つ手直しするのは、さすがに大変過ぎますからね。