Luxeritas ウィジェットエリアの気になる余白を調べる
WordPress Luxeritas Theme でウィジェットを挿入した時に何故か現れる余白。
ウィジェットでショートコードを使ってファイルを呼び出し、更に条件分岐で表示するページを振り分けるといった使い方をしていると、表示されないページにも余白が出現してしまいます。
ソースを見てみると、ウィジェットの中身は読み込まれなくてもウィジェット自体は読み込まれているので、中身の無い空のウィジェットがウィジェットエリアのクラス名を付加される形で挿入されている様です。
読み込む必要の無いページには、子テーマのスタイルシート等で、このクラス名に対し Margin Padding の値を 0 にして上書きする事で余白を消す事が出来ます。
又、通常の使い方であっても、このクラス名を使ってウィジェットのスタイルをカスタマイズ出来ます。
ウィジェットエリアのクラス名と適用されるCSS
ヘッダー下ウィジェット
クラス名
head-under
適用されるCSS
.head-under{margin-top:20px;margin-bottom:20px}
記事タイトル上ウィジェット
クラス名
post-title-upper
適用されるCSS
.post-title-upper{margin-bottom:20px}
記事タイトル下ウィジェット
クラス名
post-title-under
適用されるCSS
.post-title-under{margin-bottom:20px}
記事下ウィジェット
クラス名
posts-under-1
適用されるCSS
.posts-under-1{padding:20px 0}
記事下ウィジェットよりさらに下
クラス名
posts-under-2
適用されるCSS
.posts-under-2{padding-bottom:40px}
CSSの記述
記事下ウィジェットよりさらに下にウィジェットを挿入した場合、余白を打ち消すには
.posts-under-2{padding-bottom:0}
を子テーマのCSSファイルに記述します。
固定ページで消したい場合は
.page .posts-under-2{padding-bottom:0}
投稿ページなら
.single .posts-under-2{padding-bottom:0}
特定のページだけならページの固有の ID かクラス名を調べる必要が有りますが、投稿ページの編集画面からそのページのみに適用するスタイルシートを記述出来るので、そちらの方が簡単かもしれません。