質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1665閲覧

wordpressで親テーマのCSSを子テーマで調節したい

退会済みユーザー

退会済みユーザー

総合スコア0

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/12 19:54

編集2018/07/12 20:53

Wordpressのtwentyseventeenというテーマを使っています。

子テーマを作って使っているのですが、親テーマのCSSが邪魔をして、

余計な余白ができてしまっています。

そこで親テーマをいじってもアップデートとかで上書きされてしまうので

子テーマで親テーマのCSSを変更したいのですが、方法はありますでしょうか?

「試したこと」

「子テーマ」
(html)

<header class="head"> <!-- line --> <div class="line"></div> <!-- line --> <nav> <h1><a href="http://example.com/"><span>テスト</span></a></h1> <div id="ham-menu"> <ul> <li class="menu01"><a href="http://example.com/concept.html"><span class="menu_title">コンセプト</span><br> <span class="menu_subtitle">CONCEPT</span></a></li> <li class="menu02"><a href="http://example.com/flow.html"><span class="menu_title">制作の流れ</span><br> <span class="menu_subtitle">FLOW</span></a></li> <li class="menu03"><a href="http://example.com/price.html"><span class="menu_title">料金</span><br> <span class="menu_subtitle">PRICE</span></a></li> <li class="menu04"><a href="http://example.com/company.html"><span class="menu_title">会社概要</span><br> <span class="menu_subtitle">COMPANY</span></a></li> <li class="menu05"><a href="http://example.com/contact.html"><span class="menu_title">お問い合わせ</span><br> <span class="menu_subtitle">CONTACT</span></a></li> </ul> </div> <!-- ham-menu --> </nav> </header>

(CSS)

.line { width:100%; padding-top:10px; background:#43A1E1; } .head { width:1000px; background-color:#fff; width: 100%; /* 長さ */ position: fixed; potision: -webkit-fixed; top: 0; /* 固定する位置 */ left: 0; /* 固定する位置 */ right: 0; /* 固定する位置 */ box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.2); z-index:1; } header input { display:none; } header label { display:none; } h1 { width:250px; height:70px; background-image:url("/img/logo.jpg"); background-repeat:no-repeat; margin-right:20px; } h1 span { display:none; } h1 a { display:block; width:250px; height:100%; } nav { padding-top:20px; margin:0 auto; /* ブロック要素の中央揃え */ max-width:900px; display: -webkit-flex; display: flex; /* flexコンテナ化 */ flex-direction: row; /* 横向きに配置 */ -webkit-flex-wrap: wrap; flex-wrap: wrap; } nav ul { list-style:none; text-align:center; max-width:900px; display: -webkit-flex; display: flex; /* flexコンテナ化 */ flex-direction: row; /* 横向きに配置 */ -webkit-flex-wrap: wrap; flex-wrap: wrap; } nav .menu01, .menu02, .menu03, .menu04, .menu05 { width:126px; background-color:#FFF; } nav .menu01, .menu02, .menu03, .menu04, .menu05 { border-left: solid 1px #CCC; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } nav a { width:100%; display:block; } nav .menu_title { color:#43A1E1; } nav .menu_subtitle { color:#CCC; line-height:3em; }

「親テーマのCSS(一例)」

h1, h2, h3, h4, h5, h6 { clear: both; line-height: 1.4; margin: 0 0 0.75em; padding: 1.5em 0 0; }

親テーマのこの部分を削除すると子テーマのロゴ(h1)の部分が変わります。
「削除前」
イメージ説明

「削除後」
イメージ説明

ロゴ(h1)の一が下がってしまいましたがロゴの下のmargin-bottomが削除後は狭くなっています。(ロゴの位置を下げず調節して狭くさせたいです)

これは親テーマを直接変更しているのでアップデートなどがあると上書きされてしまいますね。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

ロゴのh1にmargin:0 20px 22px 0;と追加したところ、編集ができました。

投稿2018/07/13 07:50

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

どのスタイルが影響しているかを確認して、優先度の高いスタイル指定で上書きします。

【簡単なブラウザの開発者ツールの説明(Chrome)】
https://qiita.com/takihiyoshi/items/95c9bde8b7b8bda86ce1#スタイルビュー

【!importantはもう使わない!CSSの優先順位をおさらいしよう | アライドアーキテクツのクリエイターブログ】
http://creator.aainc.co.jp/archives/4947

「外したときの値」がどこにも指定されていないときは、初期値が割り当てられていることが多いので、リファレンスで確認してその値をいれます。

【CSS リファレンス - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/Reference

投稿2018/07/13 01:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/13 05:02

ありがとうございます。検証ツールなどは使って見ているのですが親テーマのCSSが見当たりません…。リファレンスで確認なんですね。やってみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問