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が削除後は狭くなっています。(ロゴの位置を下げず調節して狭くさせたいです)
これは親テーマを直接変更しているのでアップデートなどがあると上書きされてしまいますね。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。