WordPress カスタマイズ -3

ブロック要素について

ブロック要素の div や p を用い、クラスを指定して、ブロックに枠と背景色を指定した場合
.waku {          クラス名
    width: 50% ;      使用する幅
    margin:15px 30px;   ブロックの外側の余白(上下・左右)
    padding: 15px;     ブロックの内側の余白(四方)
    background: #dddddd; ブロックの背景色
    border:1px solid #aaa; 枠の色
    border-radius: 3px ;  ブロック枠の角を 3px 丸める }

ブロック要素は、レストランやカフェでのメニューで使うことが多い
キャプショーン付きやブロック要素は、指定が無ければ上下になるので、それを横並びにしたい時
※スマホやタブレッでの見え方も指定されていることが多い

  <ul class="gallery-columns-3"> 数字はコンテンツ幅全体に3列並べる、幅を超えると改行される
  <li class="gallery-item"> その中のひとつのブロック
.gallery {
margin-bottom: 1.6em; ・・・続くブロックの下に余白を取りたい時だけ使う、単位は px が分かりやすい
}
.gallery-item {
    display: inline-block; ・・・ディスプレイ上で横に並べる
    padding: 0.5% 1%;    ・・・ブロック内周りの余白
    text-align: center;   ・・・ブロックの真ん中
    vertical-align: top;  ・・・高さをトップに揃える
    width: 100%;      ・・・ブロック幅いっぱい使う(画像がそのサイズを超えても、それに合わさる)
}
.gallery-columns-2 .gallery-item {
    max-width: 50%;   ・・・画像の両サイドに余白を取ってことが多いので、49%などに減らす
}     max-width: 33.33%; max-width: 25%; も然り

コンテンツ幅を分割する gallery-columns に対して、グリッドを組み合わせられる
テーマになければ、追加しておくと便利
  <div class="grid-50 tablet-grid-50 mobile-grid-100">
.grid-50 {
    float: left;
    width: 50%;
}

wp_1  wp_2  wp_3  wp_4  wp_5