【訪問者様は神】CSSで投稿記事内の画像を見やすくしよう

投稿日： 2018年2月28日
最終更新日： 2018年10月3日

アップロードした画像の境界線が分かりにくい。。。

筆者はIT技術系のHowTo記事を多く挙げているため、よく作業時のキャプチャ画像等を記事に添付しています。

しかし、使用しているWordPressテーマによってはテキスト部分と画像の境界線が分かりにくく、結果として記事が読みにくく感じてしまう場合があります。

今回はCSSファイルを調整して、テキスト部分と画像部分の境界線が分かりやすくなるようなレイアウト調整を入れてみようと思います。

ブログ全般の共通レイアウトの修正を行いたいので、CSSファイルに記述を追加する必要があります。
ダッシュボードから外観>テーマ編集>スタイルシート(style.css)を選択しましょう。

今回は記事エリア内のimg要素全てにCSSを適用したいので以下のコードを追加してください。

/* 記事内画像の枠 */

.post img{
    border: solid 1px #808080;
    box-shadow: 0px 0px 5px #808080;
}

/* 記事内画像の枠ここまで */

/* 記事内画像の枠 */

.post img{

border: solid 1px #808080;

box-shadow: 0px 0px 5px #808080;

}

/* 記事内画像の枠ここまで */

記事エリアを囲んでいるdiv要素に「post」クラスが自動で振られるので、その中のimg要素を対象に指定します。
上記のCSSルールは、img要素の周囲に枠線と影を追加する記述です。

追記したら、ファイルを更新ボタンをクリックします。

では、実際に記事ページを開いて確認してみましょう。

画像の周囲に枠線と影が出ていますね。

あとは好きなようにもっとCSSファイルを設定すれば自分好みのデザインにすることが出来ます。

CSSファイルにちょっと記述を追加するだけでブログデザインを変更することが出来ます。

CSSの指定には、他にももっといろいろな指定をすることでブログデザインの調整が可能なので、ぜひ独学で勉強してみてください♪