WordPressのサイトにもっと余白を

wpmudevのブログに新しい記事がありました。

 

WordPress White Space: Getting More Breathing Room on Your Site
http://premium.wpmudev.org/blog/wordpress-white-space/

 

テーマファイルのmarginやpaddingをいじって十分な余白(white-space)を手に入れよう!という内容でした。

 

CSSの基礎知識

marginとpaddingはそれぞれ余白を指定します。marginはその要素の外側、paddingはその要素の内側です。

padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;

これはそれぞれTOP,RIGHT,BOTTOM,LEFTの余白の数値を指定しています。

これは

padding: 5px 10px 5px 10px;

と同じです。

これは

padding: 5px 10px;

とも同じです。

marginやpaddingは、その後に数値を1つだけ指定すると、TOP,RIGHT,BOTTOM,LEFTすべて同じ数値を指定したのと同じ。

2つ指定すると、最初の数値が上下、次の数値が左右の指定と同じ。

 

で、これらをWordPressのいろんなところに指定すると、余白が作れますよ。ということです。

例えば記事の中のPタグ<p>ほげほげ</p>に空白が欲しい場合は、記事の中はentry-contentというクラス指定があるので、

.entry-content p {
 padding: 0 0 40px 0;
 }

とすることで、Pタグの下に40pxの余白ができます。

 

他にも特定の画像のまわりにも欲しい、という場合は、スタイルシートを探すのではなく、クラスを指定して、

そのクラス名でmargin(画像の場合はpaddingのほうが綺麗かも。内側を拡張したほうが色の問題をクリアしやすい)を指定することで余白が作れます。

クラスの指定は、投稿の編集で画像の上にマウスを乗せるとえんぴつアイコンが出てきます。画像の詳細画面になるので、その中の画像CSSクラス、に独自のスタイルを設定します。

スクリーンショット 2014 05 19 18 55 06

毎回毎回は面倒なので、いくつかmarginの違うクラスを改めていくつか作っておくといいですね。

CSSのクラスは同じ名前のを複数作らないようにご注意下さい。

変更しても変わらないぞ??という場合は他の指定がイキになっていたりします。

 

 

.entry-content p {
 padding: 0 0 40px 0;
 }

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です