お問い合わせ

SWELL|CSSからmarginを上書きできない時の対処方法

SWELLにはブログパーツという機能があります。

ブロックエディタで作成したブログパーツのマージンをCSSから調整しようとした時に、どうやっても上書きできない時がありました。

その時の対処方法をメモしておきます。

SWELLのCSSにある上書きできないimportantの記述

SWELLには以下のようなCSSが書かれています。

.post_content dd>:last-child, .post_content div>:last-child, .post_content>:last-child {
    margin-bottom: 0!important;
}
.post_content div>:first-child, .post_content>:first-child {
    margin-top: 0!important;
}

この記述は優先順位が高く、.post_content配下にある全てのdiv要素の直後の要素のmarginが上書きできなくなります。

上書きするためには、インラインstyleで書くか、同じ詳細度で記述する必要があります。

通常のブロックを並べているだけの場合は、あまり問題にならないのですが・・・

HTMLブロックでHTMLを自分で書いていて、divブロックがwrapperなどでネストしていると、途中のdiv要素のmarginを上書きしたいところが上書きできなくなったりします。

上書きできないimportantを上書きするためのCSS記述

marginを調整したい要素のclass名がhogeだとします。

優先順位の高い記述の後に、class名を追加すればimportantで上書きできます。

.post_content div>:first-child.hoge{
margin-top: 0!important;
}

検証ツールでセレクタを確認できれば、それに追加するだけなので比較的簡単に対応できますが、検証ツールを知らなかったり、使えない場合はかなり困難な作業になります。

親要素をdiv以外の要素に変更する

SWELLのセクションブロックは、要素をsectionかdivか選ぶことができません。

SnowMonkeyでは、セクションブロックの要素をsectionかdivか選ぶことができます。

もし、SWELLのセクションブロックの要素を変更することができるならば、今回の問題は無くなります。

まとめ

SWELLの場合、全てのdiv要素の直後と最後の要素について、marginを無くそうというCSS記述になっていますので、marginではなくpaddingで調整する方が素直です。

しかし、問題となるのはmarginでマイナスにして位置調整したい時にpaddingでは対応できません。

その場合は、この記事の内容で対応することになるでしょう。

div以外の要素の子要素であれば上書きできるので、親要素を変更できる場合はdiv以外の要素に変更すると避けられる可能性があります。

役に立ったら他の人にもシェア!
コメントを閉じる

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

クリックできる目次