【WordPress】固定ページタイトル上の余白を無くす【SWELL】

  • URL Copied!

WordPressの外部テーマを用いて固定ページを作成すると、ページトップに余計な余白が出現しスッキリしない。
そこでCSSをカスタムして余白を消す事にした。

修正箇所

修正箇所をWebインスペクタ(Safari)で検証。

さらに細かく見てくと、

余白を構成している2クラスが存在している事が判明した。

1, .c-pageTitleクラス

2, .post_contentsクラス

の2つである。

CSSの修正

SWELL_CHILDのCSSを修正する。main.cssファイルを開き、まずは .c-pageTitleクラスを修正する。
現状、

.c-pageTitle{position:relative;font-size:1.3em;line-height:1.4}
.c-pageTitle::after{display:block;clear:both;height:0;visibility:hidden;content:""}
.l-mainContent 
.c-pageTitle{margin-bottom:2em}

となっているので、margin-bottom:2emを0emにする。

次に.post_contentsクラスを見ると、

.post_content{max-width:100%;margin:4em 0;padding:0;line-height:1.8}
.post_content>*{clear:both;margin-bottom:2em}

となっているので、margin:4emを0emに。

  • URL Copied!
目次
閉じる