wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

WordPress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

      2019/05/27

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

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき、困ったことがあったので、対処方法を紹介します。

ワードプレスのファイル構成やCSSの学習題材にもなるかもしれません。さっそくみていきましょう。

■困る事例(勝手に入ってくるマージン)と、追加で困る理由

■(イメージ)テーマで、ヘッダーと記事の間に大きいマージンが勝手に入る


イメージ画像です。今回の困った件では、イメージ画のように『ヘッダーと記事の間に大きいマージン』が入ってくるという
感じでした。50~60pxなら、まぁいいかなとなるんですけど、明らかに200pxくらいあって、スクロールしないと読みにくい印象だったので、ここを詰めることにしました。

■さらに困る点~基本のCSSに、該当部分の記述がない

さらに困る点は、CSSです。通常読み込んでいる『style.css』に、ヘッダー下やコンテンツ部分上のマージンが書いていません。ここにマージン0とかを書いても、動作しないようでした。少しcssに関して仕掛けがあるかもしれないので、他のファイルもみてみます。

■対処方法~他に読み込んでいるcssがないか探し、該当部分を変更する

■実はヘッダー内に追加CSSが出てた


ヘッダーのHTMLソースをみると、追加のCSSを吐き出してることが発覚しました。マージンと書きましたが、プロパティ名は『padding』とのことです。ここで、多めのpadding(100px+83px)が指定されています。これのせいで、大きめな空きができていました。

これは基本CSSを読み込んだ後に入ってくるので、優先して効いてしまいます(基本CSSにpaddingやマージン0とかいても、これが後から効いてしまう)。

■styles.php.php内で、上記のpadding(100px+83px)を制御している部分を捜す


ワードプレスでは、基本のCSSの他、functions.phpやstyles.phpでも、デザインを制御していることがあります。今回カスタマイズしたテーマでは、『styles.php』内で、追加CSSを出している部分があったので、ここでマージンを調整します。

bootstrapなどをベースにしたテーマの場合は、基本CSSではレイアウトが変わらず、bootstrapのcssなどをeditする必要があるものもあります。

■あとがき・まとめ

  • デザインが気になるとき、基本CSSをいじっても効かないことがある
  • 追加でヘッダーにCSSが出て、それが優先されてた
  • (テーマによるけど)今回はstyles.phpが追加CSSを出力していた
  • 場合によっては、functions.phpやbootstrapのcssを変えるものもあり

といったような感じでした。『ワードプレスで、style.cssを変更しても、デザインが変わらない』場合は、他のcssが優先的
に効いている可能性が高いので、チェックしてみましょう。

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

【カテゴリ】 - CSS 【タグ】 - ,

  関連記事

【CSS・hover/transition/rotateでアニメーション】jquery無し・アイコン画像や要素をくるっと回転させる機能を実装

今回は、当サイトでもよく取り上げているCSSを使ったアニメーション話題で …

【CSSオンリー・超軽量】JavaScriptすら使わない!CSSだけで動くスライダー作ってみた(PC向け横長レイアウト)

今回は、一般的には『クソ重い』とされる、スライダー・スライドショー系の機 …

【jQuery不使用・軽量でお洒落】CSSのみで、タップでふわっと広がって透けるスマートフォンメニューを実装

今回は、CSSのみで動作する、軽量でお洒落なスマートフォンメニューをサイ …

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

(ヘッダーとか見出しの要素を)片方だけ丸い・台形・矢印などおしゃれデザインにできるCSSやってみた

今回はWebサイトでよくある『ガチガチ長方形とか正方形みたいな要素』では …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …

スクロール後に変な位置に移動するタイトルをcssのpositionで直す(wp rootstrapテーマ)

今回は、管理人がワードプレスサイト作ってる時に、要素が変な位置に移動して …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …