【件名】author_boxショートコードのとき、margin-bottomがない
現象

- author_boxショートコードのとき、「プロフィール」ブロックと異なり、
margin-bottom
が付かない(図1参照)。 - コンテンツ上部、下部に、プロフィールを配置したとき、ウィジェットの全体に枠線が付く。
原因
- 「プロフィール」ブロックは、CSSクラス
author-box
が、CSSクラスblock-boxでラップされ、margin-bottom
が付く。
しかし、author_boxショートコードは、ラップされないため、margin-bottom
が付かない。 - コンテンツ上部、下部は、CSSクラス
main
に含まれる。そのため、投稿本文だけなく、枠線が付いた。
対策
以下に変更する。
.author-box {
align-items: center;
display: flex;
padding: var(--padding15);
}
.body .nwa .author-box {
border: 0;
border-radius: var(--border-radius10);
display: block;
margin: 0;
overflow: hidden;
padding: 0;
}
.body .main :not(.widget-index-top, .widget-index-bottom) .author-box {
border: 1px solid var(--border-color);
border-radius: 0;
margin-bottom: var(--gap30);
}
- 投稿本文(コンテンツ上部、コンテンツ下部以外)のとき、CSSクラス
author-box
にmargin-bottom
を付ける。
他エリアは、ウィジェットごとに分かれるため、margin-bottom
は不要。 - 投稿本文(コンテンツ上部、コンテンツ下部以外)のとき、枠線を付ける。
変更一覧
パス | ファイル名 |
---|---|
/skin-made-in-heaven/ | style.css |