ワードプレスで投稿した記事の画像だけに一括してCSSをかける方法

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

ワードプレスでサイト運営をしていると「エディター内から投稿した画像にだけデザインの調整を加えたい」場面が出てきます。当研究所のように『スクリーンショットを記事に引用する場合』など。以下のスクリーンショットを実際に見れてもらえれば「文章と画像の線引きがどこか判断しづらい」というのがわかるはずです。

文章のなかに「記事のスクリーンショットを差し込んでいる」ので、ぱっと見では判断がつきません。色分けの線をつけなかった例を見てみましょう。以下に同じスクリーンショットの色分け線なし版をアップしました。

どこまでが記事の本文でどこまでが記事に差し込んだスクリーンショットがまったく判断がつきませんね。本記事で紹介すると『記事のなかに、記事のスクリーンショットを入れた画面をスクリーンショットしている』状態になるので余計にややこしいですね。これらは「画像に枠線を付けることで視覚的に解決」ができます。

ワードプレスで投稿した記事の画像だけに一括してCSSをかける方法
まとめ

ワードプレスで投稿した記事の画像だけに一括してCSSをかける方法

ワードプレスでは「メディアを追加」から記事へ差し込んだ画像に対してclassで「wp-image-12345」という番号が振られます。どの記事でも「wp-image-」という部分は共通です。この共通性を使えばメディアを追加から差し込んだ画像のみに対してCSSでデザイン調整を行えます。CSSの書き方は以下となります。

classにwp-image-があるhtmlの例

<img class="aligncenter size-full wp-image-12345" src="/image.png" alt="Sample" />

CSSの指定方法

img[class*="wp-image-"] {
	border: 3px solid #dcdcdc;
}

上記の書き方ではclassに「wp-image-」がつくimgに対してCSSを追記可能です。もし投稿ページのみで有効にしたい場合は以下のように記述すればOK。single.phpでbodyに自動振り分けされているclassから指定。

bodyから指定する書き方

body.single-post img[class*="wp-image-"] {
	border: 3px solid #dcdcdc;
}

ただし、テーマ側に以下のコードが指定されていない場合はbodyに自動でclassが付与されません。

bodyにclassを自動付与する命令文

<body <?php body_class(); ?>>

最近のテーマであれば大体は付与されているはずです。ごく稀にbodyにclassを振っていない場合もあります。

bodyに付与したbody_classが出力された例

<body class="post-template-default single single-post postid-12345 single-format-standard logged-in admin-bar no-customize-support left-content default">

他にもある特殊なCSS記述例

CSSは他にも色々な指定方法があります。

/* 後方一致  */
img[class$="abcde"] {
	/* 例）<img src="https://" class="imageabcde" /> に該当 */
	border:1px solid #333333;
}

/* 前方一致 */
img[id^="abcde"] {
	/* 例）<img src="https://" id="abcdeimage" /> に該当 */
	border:1px solid #333333;
}

/* 部分一致  */
img[id*="abcde"] {
	/* 例）<img src="https://" id="imageabcdecss" /> に該当 */
	border:1px solid #333333;
}

html記述例

上記CSSが適用されるhtml側の参考例です。

<div id="sample">
	<img src="https://" class="imageabcde" />
	<img src="https://" id="abcdeimage" />
	<img src="https://" id="imageabcdecss" />
</div>