Q&A
CSSコードだけではなく、HTMLコードも記載し、具体的にどこの余白を消したいのかを質問文に書かれると、回答がつきやすくなると思います。
WorpdressでTwenty Seventeenというテンプレートの子テーマを使っています。
静的HTMLページで作ったサイトをWordPressに持ってきたのですが、
静的ページより全体的に余白ができてしまって困っています。
画像と画像の間やヘッダーの上部です。
style.cssで追加したmarginやpaddingをいじっているのですが、静的ページと同じになりません。
余白を削る良い方法はありますでしょうか。
試したこと
img { vertical-align:bottom; }
で画像間の隙間を無くしてみました。
vertical-align:bottom;
を追加する前とした後では隙間の出来が違うのですが、それでも静的ページと同じになりません。
「ヘッダー」もfunctions.phpに
add_filter( ‘show_admin_bar’, ‘__return_false’ );
を追加したら追加する前よりは余白が減りましたがそれでも静的ページより余白ができてしまいます。
atyle.css以外の場所で余白を削るのかもしれません。
一応私のstyle.cssのコードを掲載しておきます。
「HTML」
<header class="clearfix"> <h1><a href="../index.html"><span>xxxx</span></a></h1> <p class="header_p stripe1">xxxx</p> </header> <nav> <ul class="clearfix"> <li class="menu01"><a href="../index.html"><img src="../img/btn1.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu02"><a href="../business.html"><img src="../img/btn2.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu03"><a href="../recruit.html"><img src="../img/btn3.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu04"><a href="../live.html"><img src="../img/btn4.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu05"><a href="../link.html"><img src="../img/btn5.png" width="170" height="155" alt="xxxx"></a></li> </ul> <ul class="menu02grade clearfix"> <li class="menu06"><a href="../contact.html"><img src="../img/btn6.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu07"><a href="../office.html"><img src="../img/btn7.png" width="170" height="155" alt="xxxx"></a></li> <li class="menu08"><a href="../tieup.html"><img src="../img/btn8.png" width="170" height="155" alt="xxxx"></a></li> </ul> </nav> <!-- main_box --> <section id="main_box" class="clearfix"> <!-- banner_box --> <section id="banner_box"> <!-- box1 --> <div class="box1 clearfix"> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr1.png" width="140" height="50" alt="xxxx"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr2.png" width="140" height="50" alt="xxxx"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr3.png" width="140" height="50" alt="xxxx"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr4.png" width="140" height="50" alt="xxxx"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr5.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p2"><a href="xxx"><img src="../img/banner/bnr6.png" width="140" height="50" alt="XXXX"></a></p> </div> <!-- box1 --> <!-- box1 --> <div class="box1 clearfix"> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr7.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr8.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr9.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr10.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr11.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p2"><a href="xxx"><img src="../img/banner/bnr12.png" width="140" height="50" alt="XXXX"></a></p> </div> <!-- box1 --> <!-- box2 --> <div class="box2 clearfix"> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr13.png" width="140" height="50" alt="XXXX）"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr14.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx><img src="../img/banner/bnr15.png" width="140" height="50" alt="XXXX"></a></p> <p class="box_p1"><a href="xxx"><img src="../img/banner/bnr16.png" width="140" height="50" alt="XXXX"></a></p> </div> <!-- box2 --> </section> <!-- banner_box --> <section> <!--article_txt --> <article id="article_txt"> <p class="article_p">XXX/p> </article> <!--article_txt --> </section>
「CSS」
* { margin:0 auto; padding:0; } html { height: 100%; } body { width:100%; color:#333; background-image:url("/img/bg.png"); } img { vertical-align:bottom; } a:hover img { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; } header { width:930px; margin-top:20px; } h1 { display:block; width:247px; height:100px; background-image:url("/img/main_logo.png"); background-repeat:no-repeat; float:left; } .header_p { width:663px; padding:10px 0 10px 10px; font-weight:bold; margin-left:10px; float:left; } .stripe1 { color: #ffffff; font-size: 16px; line-height: 20px; background: repeating-linear-gradient(45deg, #ff8fcd, #ff8fcd 10px, #e4007f 10px, #e4007f 20px); border-radius: 10px; /* CSS3草案 */ -webkit-border-radius: 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px; /* Firefox用 */ margin-top:15px; } h1 span { display:none; } h1 a { display:block; width:247px; height:100px; } nav { width:930px; } nav li { list-style:none; float:left; margin-top:20px; } nav .menu01, .menu02, .menu03, .menu04 { margin-right:20px; text-align: justify; text-justify: inter-ideograph; } nav .menu06 { margin-right:20px; text-align: justify; text-justify: inter-ideograph; } nav .menu07 { margin-right:20px; text-align: justify; text-justify: inter-ideograph; } nav .menu08 { margin-right:20px; text-align: justify; text-justify: inter-ideograph; } nav .menu02grade { width:570px; margin: 10px auto; overflow:hidden; } #main_box { width:930px; margin-top:40px; } #main_box img { vertical-align: bottom; } #sub_box img { vertical-align: bottom; } #main_box .box_txt { border:4px solid #ED1E79; box-sizing:border-box; } #main_box .box1 img { width:auto; height:auto; max-width:100%; max-height:100%; } #main_box .box1 { width:560px; float:left; } #main_box .box3 { width:330px; float:left; margin-left:30px; height:250px; } #sub_box { width:930px; margin-top:40px; margin-bottom:40px; } #sub_box .box2 { width:560px; float:left; } #sub_box .box4 { width:330px; float:left; margin-left:30px; } #sub_box .box_txt { border:4px solid #ED1E79; box-sizing:border-box; background-color:#FFF; } .wp li { margin-bottom:15px; border-bottom: 1px dashed #333; padding-left:30px; list-style:none; } .wp li img { border:none; vertical-align:-2px; margin-right:2px; } #banner_box .box1,.box2 { width:930px; margin-bottom:5px; } #banner_box .box_p1,.box_p2 { float:left; } #banner_box .box_p1 { padding-right:15px; } #banner_box .box2 { width:620px; } .clearfix { *zoom: 1; } .clearfix:after { content: ''; display: table; clear: both; }
「静的ページ」
「WordPress」
ピンク部分はフッター、宝箱部分はメニューです。ここに掲載したHTMLやCSSには文字数制限でフッターは掲載していません。
ありがとうございます。のちほど修正してみます。
回答1件
0
ベストアンサー
画像はインライン要素でデフォルトは画像の下端に余白があります。
それをなくすには、
display: block;
にするだけで、下端の余白が消えます。
『ヘッダーの上部』については、掲示していただいたCSSでは、分からないので、できれば、質問者のサイト、URLを貼って頂ければ、、どこが余白があって、ｈｔｍｌとCSSはどうなっているか？を調べることができます。
投稿2017/12/04 12:33
総合スコア179
display: block;
試しましたが、少ししか隙間はうまりませんでした。本当はサイトをお見せしたいのですが、ちょっと諸事情で見せられません。
何度もすいません。静的ページのCSSやHTMLをそのままWordPressに持ってきただけなのですが、やっぱりWordPressの何かが原因で隙間が空いてしまうようです。
display: block;の表記場所が悪かったのとネガティブマージンも一緒に使ってみたらうまくいきました。お騒がせしました。
あなたの回答
tips
プレビュー
