Twenty Seventeen、キャプチャーの”枠線”をCSSで自動化

写真を掲載するときは”枠線”なし、キャプチャーを掲載するときは自動で追加するCSSを書いてみました。

写真はjpg、キャプチャーはpngファイル

今回、”枠線”を自動で追加するにあたっての、必須前提条件として、写真はjpgファイル、キャプチャーはpngファイルでアップロードしなければならなくなりました。

変に世の中の流れに逆らったこだわりを持たず、普通に作業していれば、意識しなくても写真は大抵jpgファイル(jpegの場合もあり)で、キャプチャーはpngファイルになっていると思います。

枠線を入れるかどうかの分岐をファイル形式にしても、私が困らないので、こんな書き方になりました。

キャプチャー限定の”枠線”サンプル

ファイル形式、pngのサンプル↓
キャプチャー画像は背景が白いとどこまでが画像かが分かりにくいので、境界線を明確にした方が親切な気がします。

twenty seventeen wider main
上段左はデフォルトメイン(ピンク)、上段右はデフォルトサイド(ブルー)。下段左は修正後メイン、下段右は修正後サイド

ファイル形式、jpgのサンプル↓
写真は白い背景のままの方がきれいに見えます。

conwy police station
ウェールズ、コンウィーの警察署

自動で”枠線”のCSS

div.entry-content  img[src$=".png"] {   
	border: 4px solid #ffd700;
}
  • 投稿・固定ページの記事の部分だけに反映されるように、div.entry-contentの範囲指定をしています。
  • img要素で、srcのアドレスが.pngで終わる場合のみ反映されます。
  • 太さは4pxで、線のタイプは単線、色は山吹色です。

ん。簡単。

指定はHTMLではなく、CSSで行うのが、最近のはやり

CSSでの指定がはやりというか、HTMLで指定するのが廃れただけなんですけどね…笑

枠線をHTMLで指定した際のW3Cバリデーターの警告
枠線をHTMLで指定した際のW3Cバリデーターの警告

W2C, HTML Validator, 警告より抜粋

The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.

ボーダー属性は、廃止されました。代わりにimg { border: 0; } の部分をCSSで指定するようご検討ください。

といった感じでしょうか?
CSSで指定した方が、自動化できて便利ですしね。

外観のCSS編集にコピペでOK

外観→CSS編集、もしくは外観→テーマの編集→Twentyseventeenの子テーマ→style.cssの末尾のどちらに入れても動きました。

コメントを残す

メールアドレスが公開されることはありません。