HTML-CSS

行間や文字の大きさ等を調節したい時

外観 → カスタマイズー → 追加CSSで編集。

スペースや文字の大きさ等、変更したい部分にカーソルをあわせ、

右クリックでInspect(もしくはCont + Shift + I)。

 

ハイライトされている部分を見ながら、

margin等がCSSのどこに記載されているか確認。

その部分をコピーして、追加CSSに貼り付ける。

 

margin, padding etc.の数字を変えると、画面上でどう変更されるか現れる。

それを確認しながら微調整。

 

eg. フロントページの枠内のスペースを変更したい場合。

/** フロント枠内のスペース */
.blog .site-main > article,
.archive .site-main > article,
.search .site-main > article {
padding: 1.5em;
border: 1px solid #ccc;
border-radius: 8px;
margin-bottom: 2em
}

最後に「公開」を押して終了。

References

にほんブログ村 子育てブログ ワーキングマザー育児へ