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

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

ただいまの
回答率

90.53%

  • HTML

    8927questions

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

  • WordPress

    7177questions

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

  • CSS

    5755questions

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

  • HTML5

    4000questions

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

  • CSS3

    2055questions

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

Wordpressでリストに変な余白ができる。

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 227
退会済みユーザー

退会済みユーザー

静的ページで作ったソースをWordpressのTwenty Seventeenの子テーマにコピーしました。
すると下記のリストが静的ページのように綺麗に並んでくれませんし余白がすごいできます。
何が原因があるのでしょうか?

「Wordpress画面」
イメージ説明

「静的ページ」
イメージ説明
[HTML]

<!-- sitemap_box -->
<section id="sitemap_box" class="clearfix"> 
 <!-- box1 -->
  <div class="box1">
    <ul>
      <li><span class="title_span">メインメニュー</span></li>
    </ul>
    <p class="map_p1"><a href="concept.html">コンセプト<span class="sp_span"></span></a></p>
    <p class="map_p2"><a href="flow.html">制作の流れ<span class="sp_span"></span></a></p>
    <p class="map_p3"><a href="price.html">料金<span class="sp_span"></span></a></p>
    <p class="map_p3"><a href="company.html">会社概要<span class="sp_span"></span></a></p>
    <p class="map_p4"><a href="contact.html">問い合わせ<span class="sp_span"></span></a>
    </div>
  <!-- box1 --> 

  <!-- box2 -->
  <div class="box2">
    <ul>
      <li><span class="title_span">事業内容</span></li>
    </ul>
    <p class="map_p5"><a href="qa.html">事業内容<span class="sp_span"></span></a></p>
  </div>
  <!-- box2 --> 

  <!-- box3 -->
  <div class="box3">
    <ul>
      <li><span class="title_span">制作実績</span></li>
    </ul>
    <p class="map_p6"><a href="performance.html">制作実績<span class="sp_span"></span></a></p>
  </div>
  <!-- box3 --> 

  <!-- box4 -->
<div class="box4">

<ul>
<li><span class="title_span">その他</span></li>
</ul>
<p class="map_p7"><a href="privacy.html">プライバシーポリシー<span class="sp_span"></span></a></p>
<p class="map_p8"><a href="sctl.html">特定商取引法に基づく表記<span class="sp_span"></span></a></p>
<p class="map_p9"><a href="sitemap.html">サイトマップ<span class="sp_span"></span></a></p>

</div>
<!-- box4 -->

</section>
<!-- sitemap_box -->

[CSS]

#sitemap_box {
    margin-top:80px;
    max-width:100%;
    -webkit-justify-content: center;
    justify-content: center;
    display: -webkit-flex;
    display: flex;        /* flexコンテナ化 */
    font-size:100%;

}

#sitemap_box .box1,.box2,.box3,.box4 {
    vertical-align: middle;
}

#sitemap_box .box2 {
    margin-left:20px;
    margin-right:20px;
}

#sitemap_box .box4 {
    margin-left:20px;
}

#sitemap_box ul {
    list-style-image: url("/img/sitemap_arrow.jpg");
}

#sitemap_box li {
    vertical-align:middle;
}


#sitemap_box .title_span {
    color:#000;
}

#sitemap_box .map_p1 {
    margin-top:20px;
    color:#43A1E1;
}

#sitemap_box .map_p2,.map_p3,.map_p4 {
    color:#43A1E1;
}

#sitemap_box .map_p5 {
    margin-top:20px;
    color:#43A1E1;
}

#sitemap_box .map_p6 {
    margin-top:20px;
    color:#43A1E1;
}

#sitemap_box .map_p7 {
    margin-top:20px;
    color:#43A1E1;
}

#sitemap_box .map_p8 {
    color:#43A1E1;
}

#sitemap_box .map_p9 {
    color:#43A1E1;
}



#sitemap_box .title_span {
    font-weight:bold;
}

#sitemap_box .sp_span {
    display:none;
}

#sitemap_box a {
    cursor:pointer;
}

#sitemap_box a:link { color: #43A1E1;}
#sitemap_box a:visited { color: #43A1E1; }
#sitemap_box a:hover { color: #f5b45b; }
#sitemap_box a:active { color: #f5b45b; }

#sitemap_box .sp_span {
    display:none;
}

「試したこと」
・ネガティブマージンを使って余白を無くそうとしたが、ネガティブマージンがきかなかった。
・function.phpに余白で削れる物は全て書き込んで削ってみたが何も変化はなかった。

function MyFunction() {
echo '';
}
add_action('wp_head', 'MyFunction');
*/
/* コード削除 */
remove_action( 'wp_head', 'wp_generator' ); 
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head');
remove_action( 'wp_head', 'wp_shortlink_wp_head');

「Wordpressでアップした全コード」

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

get_header(); ?>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>テスト会社 -</title>
</head>

<body>
<header class="head"> 
  <!-- line -->
  <div class="line"></div>
  <!-- line -->

  <nav>
      <h1><a href="index.html"><span>テスト会社</span></a></h1>
    <input id="menu-cb" type="checkbox" value="off">
  <label id="menu-icon" for="menu-cb"></label>
  <label id="menu-background" for="menu-cb"></label>

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

  </nav>
</header>

<!-- main_box -->
<section id="main_box">
  <p><span class="title_span">NEWS</span><br>
  <span class="eng_title_span">新着情報</span></p>
</section>
<!-- main_box --> 

<!-- sub_box -->
<section id="sub_box">


            <?php
            /* Start the Loop */
            while ( have_posts() ) : the_post();

                get_template_part( 'template-parts/post/content', get_post_format() );

                // If comments are open or we have at least one comment, load up the comment template.
                if ( comments_open() || get_comments_number() ) :
                    comments_template();
                endif;

            endwhile; // End of the loop.
            ?>
<!-- logo_box -->
<section id="logo_box">
  <p><a href="index.html"><img src="/img/sub_logo.jpg" alt=""></a></p>
</section>
<!-- logo_box --> 

<!-- sitemap_box -->
<section id="sitemap_box" class="clearfix"> 
 <!-- box1 -->
  <div class="box1">
    <ul>
      <li><span class="title_span">メインメニュー</span></li>
    </ul>
    <p class="map_p1"><a href="concept.html">コンセプト<span class="sp_span"></span></a></p>
    <p class="map_p2"><a href="flow.html">制作の流れ<span class="sp_span"></span></a></p>
    <p class="map_p3"><a href="price.html">料金<span class="sp_span"></span></a></p>
    <p class="map_p3"><a href="company.html">会社概要<span class="sp_span"></span></a></p>
    <p class="map_p4"><a href="contact.html">問い合わせ<span class="sp_span"></span></a>
    </div>
  <!-- box1 --> 

  <!-- box2 -->
  <div class="box2">
    <ul>
      <li><span class="title_span">事業内容</span></li>
    </ul>
    <p class="map_p5"><a href="qa.html">事業内容<span class="sp_span"></span></a></p>
  </div>
  <!-- box2 --> 

  <!-- box3 -->
  <div class="box3">
    <ul>
      <li><span class="title_span">制作実績</span></li>
    </ul>
    <p class="map_p6"><a href="performance.html">制作実績<span class="sp_span"></span></a></p>
  </div>
  <!-- box3 --> 

  <!-- box4 -->
<div class="box4">

<ul>
<li><span class="title_span">その他</span></li>
</ul>
<p class="map_p7"><a href="privacy.html">プライバシーポリシー<span class="sp_span"></span></a></p>
<p class="map_p8"><a href="sctl.html">特定商取引法に基づく表記<span class="sp_span"></span></a></p>
<p class="map_p9"><a href="sitemap.html">サイトマップ<span class="sp_span"></span></a></p>

</div>
<!-- box4 -->

</section>
<!-- sitemap_box -->

<footer> <small>© TEST All right reserved.</small> </footer>
</body>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • 退会済みユーザー

    退会済みユーザー

    2018/07/01 17:30

    htmlは変化ありません。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/07/01 17:30 編集

    検証での隙間の件は調査中です。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2018/07/02 21:15

    検証機能で調べたところ、wordpress側のCSSにおかしなPタグの隙間がありました。そこをPではなくリストタグにしたところ直りました。

    キャンセル

回答 3

checkベストアンサー

+1

レイアウトに問題がある場合、他の回答にもあるように、適用されるCSSが違うと「margin」「padding」等、変わりますのでgoogleであればデベロッパーツールを使い、適用されているCSSを確認されるのが良いかと思います。

参考
初心者向け!Chromeの検証機能(デベロッパーツール)の使い方


(補足)
あくまでも個人的な意見ですが、HTMLの「リスト部分」の組み方についてです。絶対ではありませんが「メニュー」等で良く使う<ul><li>タグは「入れ子」が出来ますので「リスト」を再考されるのも良いかと思います。

参考
ul、olの中にliが1つだけ。これってアリ!?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/02 17:41

    ありがとうございます。検証機能は使う事はあるのですが、多用しないのでもう1度使ってみます。リストの件もありがとうございます。

    キャンセル

  • 2018/07/02 21:15

    検証機能で調べたところ、wordpress側のCSSにおかしなPタグの隙間がありました。そこをPではなくリストタグにしたところ直りました。

    キャンセル

  • 2018/07/03 07:01

    解決されて何よりです。
    (^^)

    キャンセル

  • 2018/07/03 21:39

    ありがとうございます。wordpessにはわからないところに余白などができるのは知っていましたがstyle.cssにないものもあるのは不覚でした。勉強します!

    キャンセル

  • 2018/07/04 05:14

    HTMLとCSS、これだけでも大変なのに、JSがあったり、wordpressだとPHPも・・・その関係性で悩んだり・・・

    覚える事だらけで大変でしょうが、楽しめる方法で頑張ってください!
    (^^)

    キャンセル

+1

違うと思いますけど一応念のため。。

functions.phpに

// 記事の自動整形を固定ページのときのみ無効にする
function disable_page_wpautop() {
  if ( is_page() ) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

を入れると、固定ページの中に入れたコードで、改行とかpタグとか勝手に入るのを制御できます。

ちなみにうちの環境に入れたらこんな感じになりました。
!(491c27e75a532cff60716e32ec3c8e65.png)

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/01 17:22

    ありがとうございます。試してみましたがききませんでした。

    キャンセル

  • 2018/07/01 17:23

    そうですよね。。

    キャンセル

  • 2018/07/01 17:24

    すいません。私も鋭意調査中です。

    キャンセル

  • 2018/07/01 17:30

    うちで表示されてるスクショ貼ってみました

    キャンセル

  • 2018/07/01 18:51

    ありがとうございます。HTMLをもう1度貼り直したら縦のぐちゃぐちゃはなおりましたが、a hrefリンク間の隙間は直らずです。静的ページのような隙間の量にはならず…。

    キャンセル

+1

正しく指定しているのにレイアウトが崩れる場合、ブラウザキャッシュが有効になっており想定と異なる表示となる場合があります。ブラウザキャッシュをクリア後に再度表示させて見てください。

また、他の可能性として、想定していないスタイル指定が有効となっているため、希望の表示とならない場合もございます。chromeのディベロッパーツール等で実際に有効となっているスタイルと、そのスタイルが指定されているファイルを確認してみてはいかがでしょうか?

本ページをchromeのディベロッパーツールで確認すると、以下のようになります。

イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/02 17:42

    ありがとうございます。ブラウザキャッシュはいつも悩まされていたので毎回最初にクリアにしてからやっています。デベロッパーツールがイマイチ使い方がわからないところもあるので他の方が教えてくれたサイトなどを参考にしながら使ってみます。

    キャンセル

  • 2018/07/02 21:15

    検証機能で調べたところ、wordpress側のCSSにおかしなPタグの隙間がありました。そこをPではなくリストタグにしたところ直りました。

    キャンセル

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

  • ただいまの回答率 90.53%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 受付中

    レスポンシブデザインのメニューの幅のサイズが変更できない

    こちらのサイトを参考にして、ウィンドウ幅が小さくなったときスマホサイト用にメニューが出る設定をしたのですが幅が表示されるときのウィンドウ枠の数値をjquery.meanmenu.j

  • 解決済

    menuバーの中央配置について

    pc-menu内の<h1 class="aburasoba">油そば池袋</h1>を削除した際にliでかこった<li>menu</li>を中央配置にしたいのですがfloat: ce

  • 受付中

    メニューバーのサイズの統一

    pc-menu2のliにメニューの記述や情報を記述しており、サイズを統一したのですがどうすればよろしいでしょうか。 ご教授お願いいたします。 <!DOCTYPE html> <

  • 解決済

    スクリプトが競合しているとこを教えてください

    スクロールのスクリプトを入れるとハンバーガーメニューが効かなくなってしましました。 何かが競合しているのでしょうか? 解決策をご教授お願いいたします。 <!doctype ht

  • 受付中

    2カラムレイアウトをhtmlとcssのみで再現したいですが、うまくできない

    夜分遅くにすみません。 リンク内容 上記のページのような左半分を画像固定、右半分だけはスクロールできるレイアウトを再現したいと思い、作成していたのですが、下記画像のようになっ

  • 解決済

    余白のあるドロップダウンメニュー

    ハンバーガーメニューをクリックすると、ドロップダウンメニューが表示し、下層メニューのあるメニューをマウスオーバーすると下層メニューを表示する仕様です。 上層メニューと下層メニュ

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

  • HTML

    8927questions

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

  • WordPress

    7177questions

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

  • CSS

    5755questions

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

  • HTML5

    4000questions

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

  • CSS3

    2055questions

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