操作

賢威7のWordPress版に用意されているCSSのスタイルを適用して記事の余白を調整する方法を紹介します。賢威7の標準機能の説明です。

余白は、外側の余白がマージン(Margin)、内側の余白がパディング(Padding)になります。

CSSで余白やページの配置を設定する場合は、下記のサンプルコードをコピー&ペーストして利用してください。


はじめに

注意事項

余白(マージン・パディング)の設定は、記事の中の余白を細かく微調整したい方向けに用意されています。余白を細かく調整したい方のみ利用してください。初心者は無理に利用する必要はありません。

マージン

マージン(外側の余白)の指定方法について説明します。

マージンの記述方法

要素のマージン(外側の余白)を必要に応じて調整できます。
何も記述しなければ、初期設定のマージンの値が適用されます。

見出しの上下にマージンを設定する

文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。

文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。

文章のマージンを0pxに設定する。文章のマージンを0pxに設定する。文章のマージンを0pxに設定する。

<h5 class="m0-t m10-b">見出しの上下にマージンを設定する</h5>
<p class="m100-b">文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。</p>
<p class="m100-b">文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。文章の下に100pxマージンを設定する。</p>
<p class="m0">文章のマージンを0pxに設定する。文章のマージンを0pxに設定する。文章のマージンを0pxに設定する。</p>

マージン 基本形

マージンのCSSには規則性があります。
基本的には下記のようなルールで記述されています。
ルールさえ覚えてしまえば簡単です。

m10 上下左右にマージンを10px設定する
m10-t 上側(Top)にマージンを10px設定する
m10-r 右側(Right)にマージンを10px設定する
m10-b 下側(Bottom)にマージンを10px設定する
m10-l 左側(Left)にマージンを10px設定する

マージンCSS一覧

マージン 0px m0
m0-t
m0-r
m0-b
m0-l
マージン 5px m5
m5-t
m5-r
m5-b
m5-l
マージン 10px m10
m10-t
m10-r
m10-b
m10-l
マージン 15px m15
m15-t
m15-r
m15-b
m15-l
マージン 20px m20
m20-t
m20-r
m20-b
m20-l
マージン 25px m25
m25-t
m25-r
m25-b
m25-l
マージン 30px m30
m30-t
m30-r
m30-b
m30-l
マージン 40px m40
m40-t
m40-r
m40-b
m40-l
マージン 50px m50
m50-t
m50-r
m50-b
m50-l
マージン 60px m60
m60-t
m60-r
m60-b
m60-l
マージン 70px m70
m70-t
m70-r
m70-b
m70-l
マージン 80px m80
m80-t
m80-r
m80-b
m80-l
マージン 90px m90
m90-t
m90-r
m90-b
m90-l
マージン 100px m100
m100-t
m100-r
m100-b
m100-l
マージン 120px m120
m120-t
m120-r
m120-b
m120-l
マージン 150px m150
m150-t
m150-r
m150-b
m150-l
マージン 200px m200
m200-t
m200-r
m200-b
m200-l
マージン 300px m300
m300-t
m300-r
m300-b
m300-l

パディング

パディング(内側の余白)の指定方法について説明します。

パディングの記述方法

要素のパディング(内側の余白)を必要に応じて調整できます。何も記述しなければ、初期設定のパディングの値が適用されます。

見出しの左側のパディングを設定する

Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。

Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。

<h5 class="p30-l">見出しの左側のパディングを設定する</h5>
<p class="p50">Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。</p>
<p class="p50">Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。Pタグの内側にパディングを50px設定する。</p>

パディング 基本形

パディングのCSSには規則性があります。基本的には下記のようなルールで記述されています。ルールさえ覚えてしまえば簡単です。

p10 上下左右にパディングを10px設定する
p10-t 上側(Top)にパディングを10px設定する
p10-r 右側(Right)にパディングを10px設定する
p10-b 下側(Bottom)にパディングを10px設定する
p10-l 左側(Left)にパディングを10px設定する

パディングCSS一覧

パディング 0px p0
p0-t
p0-r
p0-b
p0-l
パディング 5px p5
p5-t
p5-r
p5-b
p5-l
パディング 10px p10
p10-t
p10-r
p10-b
p10-l
パディング 15px p15
p15-t
p15-r
p15-b
p15-l
パディング 20px p20
p20-t
p20-r
p20-b
p20-l
パディング 25px p25
p25-t
p25-r
p25-b
p25-l
パディング 30px p30
p30-t
p30-r
p30-b
p30-l
パディング 40px p40
p40-t
p40-r
p40-b
p40-l
パディング 50px p50
p50-t
p50-r
p50-b
p50-l
パディング 60px p60
p60-t
p60-r
p60-b
p60-l
パディング 70px p70
p70-t
p70-r
p70-b
p70-l
パディング 80px p80
p80-t
p80-r
p80-b
p80-l
パディング 90px p90
p90-t
p90-r
p90-b
p90-l
パディング 100px p100
p100-t
p100-r
p100-b
p100-l

以上