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

   

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

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

   

こんにちは、管理人@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が優先的
に効いている可能性が高いので、チェックしてみましょう。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


【カテゴリ】 - webサイト制作 【タグ】 - ,

Message

メールアドレスが公開されることはありません。

  関連記事

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

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

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事 …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …