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

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

ただいまの
回答率

91.36%

  • PHP

    15159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    4766questions

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

  • CSS

    3871questions

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

worpdressで出来る余計な余白を消したい。

解決済

回答 1

投稿 2017/12/04 19:01 ・編集 2017/12/05 15:40

  • 評価
  • クリップ 0
  • VIEW 73

ryuunosuke

score 17

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には文字数制限でフッターは掲載していません。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miz

    2017/12/04 21:16

    CSSコードだけではなく、HTMLコードも記載し、具体的にどこの余白を消したいのかを質問文に書かれると、回答がつきやすくなると思います。

    キャンセル

  • ryuunosuke

    2017/12/04 21:17

    ありがとうございます。のちほど修正してみます。

    キャンセル

回答 1

checkベストアンサー

0

画像はインライン要素でデフォルトは画像の下端に余白があります。
それをなくすには、

display: block;


にするだけで、下端の余白が消えます。

ヘッダーの上部』については、掲示していただいたCSSでは、分からないので、できれば、質問者のサイト、URLを貼って頂ければ、、どこが余白があって、htmlとCSSはどうなっているか?を調べることができます。

投稿 2017/12/04 21:33

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/05 15:22

    display: block;
    試しましたが、少ししか隙間はうまりませんでした。本当はサイトをお見せしたいのですが、ちょっと諸事情で見せられません。

    キャンセル

  • 2017/12/05 15:28

    何度もすいません。静的ページのCSSやHTMLをそのままWordPressに持ってきただけなのですが、やっぱりWordPressの何かが原因で隙間が空いてしまうようです。

    キャンセル

  • 2017/12/05 18:38

    display: block;の表記場所が悪かったのとネガティブマージンも一緒に使ってみたらうまくいきました。お騒がせしました。

    キャンセル

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

ただいまの回答率

91.36%

関連した質問

同じタグがついた質問を見る

  • PHP

    15159questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • WordPress

    4766questions

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

  • CSS

    3871questions

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