今回は、CSSを使って「特定のsrcを持つ画像」だけ見た目を調整する方法を紹介します。
特定のドメインだけ見た目をカスタマイズしたり、任意の文字列が入っていれば調整できました。
WordPressやはてなブログのカスタマイズで活用できるので、ぜひ試してみてください。
はじめに
今回紹介する内容は「特定のsrcを持つ画像だけにCSSを割り当てる方法」です。
HTMLで画像を設置しようとすると、以下のように記述すると思います。
<img src="http://画像のURL.png">
srcで表示したい画像のURLを指定しているのですが、実は、CSSでは「srcに入っている文字列」で条件分岐ができちゃうんです。
同じような方法を使えば「href」などの属性でも条件を作れるので試してみてください。
特定の画像だけに割り当てるCSS
では実際に、特定の画像だけで動作するCSSをチェックしていきましょう。
以下のように記述してみてください。
img[src="http://tokuteinogazou.png"] {
border: 1px solid black;
}
このようにすると、画像のアドレスが「ｈttp://tokuteinogazou.png」だった場合のみ、黒い縁が描画されます。
ただ、注意点は「文字列全てがマッチしていなければならない」ので、1つの画像だけに対してCSSを割り当てる機会はあまりないと思います。
そこで、ドメインごとや特定の文字列で終わる画像に対してCSSを指定していきましょう。
特定のドメインだけに割り当てるCSS
次は、srcが特定のドメインだった場合に動作するCSSをみていきましょう。
先ほど同様、CSSで以下のように記述します。
img[src^="http://tokuteinodomein.com"]{
border: 1px solid black;
}
このように記述すると、先ほどとは違い「srcがtokuteinodomein.comで始まる画像」だった場合のみborderを1pxにすることができました。
正確には「" "」で始まる場合の条件分岐なので、httpとhttpsを区別したい時にもオススメ。
「" "」内の部分は、自分が指定したい画像のURLに合わせて書き換えてください。
はてなブログの場合は「ｈttps://cdn-ak.f.st-hatena.com」と「外部の画像」で区別することもできますね。
特定の文字列で終わる画像
画像によっては、ドメインがバラバラな場合もありますよね。
例えば「ｈttp://abc.com」と「ｈttp://www.abc.com」みたいな時は、先ほどのドメイン指定ではうまくいきません。
このような時は、CSSを以下のように記述してみてください。
img[src$="abc.com"] {
border: 1px solid black;
}
このように記述すると、imgのsrcが「abc.comで終わる場合」のみCSSを適用させることができます。
サブドメインの有無や「https」などに関わらず、広い範囲でCSSを限定できました。
また、同じ方法を使えば「.png」や「.jpg」というように、特定の拡張子だけに割り当てるというような使い方もできると思います。
どこかに文字列が入る画像に対して割り当てる
最後は、特定の文字列が「src内のどこか」に入っていれば適用されるCSSを紹介します。
img[src$="0601"] {
border: 1px solid black;
}
例えば、画像の名前が「スクリーンショット20180601000000.png」というように「撮影時の日付」だった場合にも使えるCSSです。
今回の例だと「06月01日」に撮影したスクリーンショットだけにCSSを割り当てることができました。
srcの真ん中に入る文字列や、どこに入るか特定できない場合に便利ですね。
ただ、今回の例だと「前年の6月1日」や、意図せず「0601」が名前に入った画像でも動作してしまうので、その辺りは各自調整してみてください。
まとめ
「^=」や「*=」を使えば、CSSだけで「画像のスタイル」を調整できるようになりました。
今回はsrcで紹介しましたが、そのほかに「href」など、htmlで指定したパラメータによって分岐できて便利なので、ぜひ覚えてみてください。
ではまた。
