wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

cssフレームワーク利用サイトで、意図しないpaddingなどを消すには?→同クラス上書き(例:bootstrap)

      2020/10/22

こんにちは、管理人@SS_mshpです。


今回は、CSSフレームワークなどを使ってサイトを構築していると、たまに出くわすレイアウト上の事項について紹介します。
管理人の状況では『なぜか消えないpadding』みたいな状況がありました。さっそく、状況確認と対処する場合の方法をみていってみましょう。

勝手にpaddingが入っている例の、状況と原因

メインカラムで、指定した覚えのないpaddingが検出


とりあえず、最近はweb開発の実験場になっている(笑)、管理人の著作権フリー曲サイトです。メイン記事部分で、『少し空白多いかな?』と思っていました。ディベロッパーツール(f12押すとでてくるやつ)でレイアウトを確認したところ、謎のpaddingが入っていることが発覚しました。

少し詰めようとして、WordPressでよくメインカラムにくっついてくるクラス(class="container","content-wrap"など)に、padding無しを指定しましたが、無効でした(効きません)。この謎のpaddingを消すには、どうしたらよいのでしょうか。

原因→bootstrapの『col-md-8』クラスに、既にpaddingが指定されていた


実はhtmlソースで見てみると、中央カラム記事表示部分に複数のクラスが(content-areaとcol-md-8)。このサイトは元になったテーマにbootstrapが搭載されており、col-md-8はbootstrapのクラスです。ディベロッパーツールで詳しく見てみると、bootstrapの段階でcol-md-8に左右paddingが指定されていました。

bootstrapの中身を全部チェックしたわけではないので初めて知りましたが(笑)、原因がわかればいくらでも対策できそうです。とりあえず、『同じクラス名で上書き』で対応してみますか。

フレームワークのCSSを上書きして対処する方法

同要素にstyle属性を指定し、paddingをリセット


優先的にCSSを適応させる方法としては、『要素にstyle属性』です。1サイト中1~2か所など該当箇所が少ない場合は、この方法でも大丈夫です。
(*該当箇所が多い場合は、ひとつひとつ適応させていくのは大変です。一括でできる方法も紹介します。)

該当部分を上書きするCSSを、フレームワークより後に読み込んで適応させる


single.phpやpage.php、アーカイブ用などいろいろあったので、一括指定することにしました。まずはヘッダー内で、該当部分を上書きするCSS(テーマCSSに書きました)を、ヘッダー下でincludeする形にしました。bootstrapのCSSが後に読み込む形になってしまうと、bootstrapが優先で効いてしまい、上書きが効かなくなるからです。


あとは、該当の『col-md-8』で、paddingをゼロにします。たぶんこれで大丈夫。

実行結果(後からテーマCSS読み込む方法を採択)


このように、bootstrap由来の勝手に入ってくるpaddingがなくなりました。とりあえず、『なんかわからないけど入っていた』みたいな展開は避けられます。

あとがき・まとめ

  • フレームワーク利用サイトで意図しないstyleが入ってくる場合は、フレームワーク内ですでに指定されていることがある
  • 同じクラス名で上書きすることにより対応可能
  • CSSなどを上書きするときは、読み込み順に気をつける(フレームワークより後)

まとめるとこんなところでしょうか。今回はbootstrapを取り上げましたが、フレームワークによって、独自に指定されているものは異なります。そういったクセみたいなのを押さえつつ、活かしたり無効化したりできると良いかもしれません。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - CSS, webメディア制作運用
【タグ】 - ,

  関連記事

イベントハンドラonClickとopenメソッドで、複数youtube動画をボタンで切り替え、iframe内に表示する方法

今回は管理人が、お取引先のサイトにつけようとしたけど、より便利な ...

【WordPress条件分岐】is_singleとis_singularって違うの?→idやスラッグ指定、投稿タイプ指定の面で違いが

今回は、WPの条件分岐などに使うファンクションで、名前が超似てい ...

【CSS】横並びメニューで、最初だけボーダー無しとかにしたい場合は?→擬似クラスfirst-childを、効かない例も紹介

今回は、『メニューなどで、最初の要素だけボーダー無しにしたい』み ...

【WordPressカスタムフィールド検索】meta_queryで、シリアライズ値が入ったフィールドを持つ記事をヒットさせるには?

今回は、ちょっと需要があるかもしれない『WordPressカスタ ...

WP管理・投稿画面カスタマイズ~『p』『h2』みたいなタグ・定型文をボタン1つで記事に追加したい

今回は、以前サイト制作のお取引先さまと話した、WPの記事を投稿す ...

【WPプラグイン無し】3行のコードで、ブロックエディタ&ブロックライブラリCSSを無効にする方法

今回は、管理人が『お取引先さまのwebサイトでブロックエディタま ...

WPカスタムフィールドを使って、soundcloudみたいに記事一覧でオーディオ再生できるサイトを作る方法

今回は、管理人が持っている著作権フリー曲サイトに、『カスタムフィ ...