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が優先的に効いている可能性が高いので、チェックしてみましょう。2wpサイト制作受付サイトへ*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。...【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る今回は、フレームワークを使ったサイト制作を行ってみます。今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。...【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。検索:このサイト管理人についてこのコラムと『アトリエss』サイトを運営しております、管理人の五十嵐と申します。活動地域は東北の仙台市です。