WPlogs

WordPressを中心にWeb関連の情報発信。PHP、CakePHP、HTML5、SEOなど。 ※旧名称「SEO人」、旧URL「http://seo.net-luck.com/」

*

WordPressテーマ「STINGER5」の記事内の画像に枠線を表示するカスタマイズ

      2015/06/04

STINGER5

出典:http://wp-fun.com/

記事の内容がわかりやすいように補足となるような画像をよく使用しますが、文章と画像の境界がよくわからなかったりします。

特に、背景が白色の画像とか。

なので、画像に枠線を表示させた方が個人的には見やすいと思っています。

今回は、WordPressテーマ「STINGER5」の記事内の画像に枠線を表示させます。

なお、今回のバージョンは以下です。

  • stinger5ver20150505b

スポンサード リンク

スタイルのカスタマイズ

カスタマイズは、子テーマを作成して行いましょう。

詳細はこちらを参照してください。

WordPressテーマ「STINGER5」で学ぶ子テーマの作成方法

今回は、「style.css」に以下のようにスタイルを追加しました。

記事内の画像全てに枠線を表示させるようにし、枠線を表示させたくない場合は、「.no-border」クラスを指定すればいいようにしています。

「box-sizing」プロパティ

CSS3の「box-sizing」というプロパティを使用していますが、これがめちゃくちゃ便利でした。

設定値は、以下のようです。

  • 「content-box」…paddingとborderを幅と高さに含めない(デフォルト)
  • 「border-box」…paddingとborderを幅と高さに含める
  • 「inherit」…親要素の値を継承する

これを指定しないで、横幅がフルサイズの画像の場合、枠線(border)の幅のせいで領域をオーバーしてしまい、見切れてしまいます。

ところが、「border-box」を指定すると枠線(border)の幅も含めてくれるので、見切れることなく正しく表示されます。

見切れてしまってはカッコ悪いのでね。

是非お試しあれ!

参考サイト

box-sizing-CSS3リファレンス
CSS3 の box-sizing が便利すぎる!! padding や border に依存しない width, height 指定 | TM Life

 - HTML/CSS, STINGER5