記事内の画像マージンを設定する WordPress
2013年8月26日
Categories | ブログ（WordPress)
ワードプレスの小技ネタです。
記事内に画像を入れて公開したら「画像と文章の上下マージンが狭くない？」
って経験ないですか。じゃ改行を入れ隙間を作る対処を・・・
いちいちそんな事をしなくても、スタイルシートに画像のマージンを指定すれば
対処出来ます。
いじるファイルはテーマフォルダ内のstyle.css と、content.php の2つ。
まず content.php の「 <?php the_content(); ?> 」を
ボックス「<div class=”content”>」で囲む。
<div class="content"> <?php the_content(); ?> </div>
次にstyle.cssにこう記述。
div.content img {
margin-top:36px;
margin-bottom:36px;
border: solid 4px #ffffff;
-moz-box-shadow: 0px 0px 16px #777777;
-webkit-box-shadow: 0px 0px 16px #777777;
box-shadow: 0px 0px 16px #777777;
/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
}※ margin-top/margin-bottom は、自分の好みで増減してください。
また４行目以下は画像に枠を付け影を装飾しました。必要なければ削除してください。
コメントを残す