WordPress個別サポート

style.cssなどにスタイルを定義する場合、同じような名前を持つCSSセレクタをまとめて定義するため、ワイルドカードや正規表現を使いたくなる場面があります。

たとえば、WordPressで画面に表示するアイキャッチ画像のスタイルを変更する場合を考えてみましょう。

スタイルを適用するセレクタを決めるため、HTMLソースを見てアイキャッチ画像に付加されたclass属性「attachment-post-thumbnail」を参考に、次のようなスタイルを定義するかもしれません。

img.attachment-post-thumbnail {
    border-radius:25px;
}

表示イメージは次のようになります。

アイキャッチ画像の角を丸くする

アイキャッチ画像の角を丸くする

アイキャッチ画像(1)のスタイルだけが変更され、投稿内の画像(2)にはスタイル変更は適用されません。

これで良いような気がしますが、アイキャッチ画像のclass属性は固定ではないことに注意が必要です。

多くの場合、アイキャッチ画像はテンプレート内で「the_post_thumbnail()」で表示されていますが、「the_post_thumbnail('thumbnail')」のように表示する画像の種類が指定されている場合は、「attachment-thumbnail」のようなclass属性が付加されます。

そもそも「the_post_thumbnail()」は「the_post_thumbnail('post-thumbnail')」のことなので、the_post_thumbnailで表示するアイキャッチ画像には、

attachment-画像名

というclass属性が割り振られるということです。

この場合、考えられるclass属性をまとめてスタイルを定義しておけば良いかもしれませんが、次のように記述するのは面倒です。

img.attachment-post-thumbnail,
img.attachment-thumbnail,
img.attachment-medium,
img.attachment-large {
    border-radius:25px;
}

また、「the_post_thumbnail(array(150, 100))」のようにサイズを指定してアイキャッチ画像を表示した場合、class属性は「attachment-150x100」になることを考えると、1つずつCSSセレクタを定義するのは非常に面倒です。

その場合、CSSの属性セレクタに「*」を使って「class属性に attachment- が含まれるimgタグ」と定義しておけば便利です(CSS3)。

CSSセレクタにワイルドカードや正規表現を使って条件を指定するイメージでしょうか。

img[class*="attachment-"] {
    border-radius:25px;
}

※Twenty Twelve、Twenty Thirteen、Twenty Fourteenのstyle.cssにも、このような属性セレクタを使ったスタイル定義があります。参考にしてください。

これで、幅と高さを指定してアイキャッチ画像を表示した場合でも、「attachment-150x100」のようなclass属性に対してスタイルが適用されます。

アイキャッチ画像のサイズを変更してもスタイルが適用される

アイキャッチ画像のサイズを変更してもスタイルが適用される

ちなみに、アスタリスク「*」は「~に~を含む」のように使えますが、その他、次のような文字も使うことができます。

  • 「*」 --- を含む
  • 「^」 --- で始まる
  • 「$」 --- で終わる

記述例は次のようになります。

img[class^="attachment-"] {
    border-radius:25px;
}
img[class$="-image"] {
    border-radius:25px;
}

以下、アイキャッチ画像の表示に使うthe_post_thumbnail関数の呼び出し方と表示されるアイキャッチ画像、付加されるclass属性をまとめておきます。参考にしてください。

 
アイキャッチ画像の表示 表示される画像 class属性
the_post_thumbnail() アイキャッチ画像 attachment-post-thumbnail wp-post-image
the_post_thumbnail('thumbnail') サムネイル画像 attachment-thumbnail wp-post-image
the_post_thumbnail('medium') 中サイズ画像 attachment-medium wp-post-image
the_post_thumbnail('large') 大サイズ画像 attachment-large wp-post-image
the_post_thumbnail(array(150, 100)) 任意のサイズの画像 attachment-150x100 wp-post-image
この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート