WPlogs

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

*

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

      2015/06/01

STINGER3

出典:http://stinger3.com/

当ブログは、検索エンジン最適化(SEO)に強いと言われているWordPressテーマ「STINGER3」を使用しています。

今回は、その「STINGER3」の投稿ページの画像に枠線を表示し、中央揃えにしたいと思います。

画像に枠線がなく、背景が白色の画像だと、記事本文と画像の境界が分かりにくく、文章が読みにくくなってしまっていたから改善しようと思うわけです。

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

  • WordPress 3.9.1
  • STINGER3_ver20140327

スポンサード リンク

スタイルシートの変更

「STINGER3」の記事本文箇所のdivタグは、クラス名が「kizi」なので、CSSファイル(style.css、smart.css)に以下を追記しました。

クラス名が「kizi」のimgタグについてスタイルを設定し、1ピクセルで枠線を表示し、中央揃えにしています。

これで、記事本文と画像の境界が分かりやすく、文章が読みやすくなりました。

以上です。

参考サイト

WordPressテーマ「Stinger3」の画像の周りに線を入れる方法 | dmgadget(ディーエムガジェット)
【CSS】スタイルシートを使って画像(IMG)を中央揃えにする方法。

 - STINGER3