teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップWordPressに関する質問
WordPress

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

Q&A

解決済

1回答

724閲覧

wordpressの上部にできる空白について

ooo9999
ooo9999

総合スコア6

WordPress

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

0グッド

0クリップ

投稿2019/09/07 11:19

編集2019/09/07 11:47

0

0

今、自分で作ったポートフォリオのLPをwordpress化するという作業をしているのですが、
cssやjsの読み込みなども終わり、トップページを確認すると
上部に空白ができていました。。。

調べたところ、管理画面のボードのせいだといっている記事がたくさんあったので
一度ログアウトしてからトップページを確認したら、やはりまだ空白がありました。。

デベロッパーツールで見てみると、このようなものがbodyの直下に入っていました。。。
イメージ説明

それで、もしかしてheader.phpに空白が。。。？と思い見てみたのですが
特に何も空白もなくでして。。。

どうすればこちら解決できますでしょうか。。。( T_T)

一応、どんな感じか写真を貼らせていただきます。
管理画面へ入るボード（ログイン時）とログアウト時でみたトップページの空白です。。

イメージ説明

イメージ説明

どなたかアドバイスください、、( T_T)

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title><?php wp_title('｜', true, 'right'); ?><?php bloginfo('name'); ?></title>

  

    <!-- ______________css______________________ -->
    <link rel="stylesheet" type="text/css" href="css/html5reset-1.6.1.css">
    <link rel="stylesheet" type="text/css" href="css/common_pc.css">
    <link rel="stylesheet" type="text/css" href="css/common_sp.css">
    <!-- css/animsition -->
    <link rel="stylesheet" type="text/css" href="css/animsition.min.css">
    <!-- css/animate -->
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
    <!-- css/font-awsome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
    <!-- google-font -->
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">




    <!-- ______________js______________________ -->
    <!-- google -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <!-- js/animsition -->
    <script type="text/javascript" src="js/animsition.min.js"></script>
    <!-- js/wow -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>



    <!-- favicon/touch-icon -->
    <link rel="icon" type="image/x-icon" href="http://hemmel.naa09.work/wp-content/uploads/2019/09/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="http://hemmel.naa09.work/wp-content/uploads/2019/09/apple-touch-icon-180x180.png">
	
	<style>
	
		#header{
			background-image: url('<?php echo get_template_directory_uri(); ?>/img/header_bg.jpg');
		}
		.introduction .main_bg_01{
			background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_01.jpg');
		}
	
		 .main_bg_02{
        background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_02.jpg');
        
    }
		  .main_bg_03{
           background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_03.jpg');
       }
		
		    .main_bg_04{
           background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_04.jpg');
       }

		  .main_bg_05{
        background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_05.jpg');
    }

		  .main_bg_06{
        background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_06.jpg');
    }
	
		  .main_bg_07{
        background-image: url('<?php bloginfo('template_directory') ?>/img/fixed_bg_07.jpg');
    }
	
	</style>
	<?php wp_head(); ?>
</head>
<body>
    <div id="wrapper" class="animsition">
        <!-- header -->
        <header id="header">
			<div class="header_fixed">
                <div class="h1_logo"><a href="index.html">Hemmel</a></div>
                <div class="sp_icon"> <i class="fas fa-align-justify"></i></div>
            </div>


            <div class="header_catch wow flash"
            data-wow-duration="1.5s"
            data-wow-delay="0.5s"
            data-wow-iteration="1.5">
                <p>Learn Coffee to be Barista</p>
            </div>



            <!-- drower_nav -->
            <nav class="navigation">
                <div class="sp_close_icon">
                    <i class="far fa-window-close"></i>
                </div>
                <ul>
                    <li><a class="direction" href="#introduction">講師紹介</a></li>
                    <li><a class="direction" href="#course">コース案内</a></li>
                    <li><a class="direction" href="#advantage">このスクールを選ぶメリット
                        </a></li>
                    <li><a class="direction" href="#question">よくある質問
                        </a></li>
                    <li><a class="direction" href="#contact">お問い合わせ
                        </a></li>
                    <li><a class="direction" href="#location">アクセス</a></li>
                    <li><a class="direction" href="#instagram">INSTAGRAM</a></li>
                </ul>
            </nav>

            <div class="overlay"></div>
        </header>

index.php

<?php get_header(); ?>

        <!-- main -->
        <main id="main">
            <div class="container">

                
   
</div>
        </main>

<?php get_footer(); ?>

css

@charset "utf-8";
/* CSS Document */



/*------------------------------
 font-family: 'Lato', sans-serif;
 ------------------------------ */



html{
    font-size: 62.5%;
}
body{
    position: relative;
}

body, input, textarea { 
    font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic",
     "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",
      "メイリオ", "Meiryo", "verdana", sans-serif; 
      font-size: 1.6rem;
      color: #fff;

	
    }

    a{
        color: #fff;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    a:hover{
        opacity: 0.7;

    }
    
    li{
        list-style: none;
    }

    img{
        width: 100%;
    }

    *{
     box-sizing: border-box;   
    }

    .sp_br{
        display: none;
    }
    .sp_each{
display: none;
    }

    /* ふわっとfadein */

.fadein {
    opacity: 0;
    transform: translateY(20px);
    transition: all 1s;
  }
  

   /* page-top */

   #page_top a{
    display: block;
width: 50px;
height: 50px;
position: fixed;
right: 3%;
bottom: 5%;
background-color: rgba(0, 0, 0, 0.3);
line-height: 50px;
border-radius: 50%;
text-align: center;
color: #fff;
font-size: 2.5rem;
}


/* wrapper */
#wrapper{
    width: 100%;
}

    /* header */

    #header{
background-image: url('../img/header_bg.jpg');
        background-attachment: fixed;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
    }

    /* header_fixed */
.header_fixed{
  padding: 3% 0% 2%;
        display: flex;
    justify-content: space-between;
    width: 100%;
    position: fixed;
    
     
    }
    .header_bg_fixed{
        background-color:rgba(0, 0, 0, 0.2);
    }

    .h1_logo{
       
        font-size: 2.5rem;
        font-family: 'Lato', sans-serif;
		margin-left:5%;
    }

    /* header_g-nav */
    .sp_icon{
        font-size: 3rem;
        cursor: pointer;
    }

    .sp_close_icon{
        text-align: right;
        font-size: 3rem;
        cursor: pointer;
		margin-right:5%;
    }


    .navigation ul{
        line-height: 2.7;
    }

    .navigation{

    position: fixed;
    right: 0;
    top: 0;
    z-index: 10;
    background-color: rgb(90, 44, 44);
    padding: 3% 5%;
    height: 100%;
    transition:all .6s ease;
    transform: translate(400px);
    
    }

    .overlay{
        /* display: none; */
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    transition: all 1s ease;
    }


    .open{
        overflow: hidden;
        transform: translate(0px);
    }
    .o_open{
     
        visibility: visible;
        background: rgba(0,0,0,.6);
        width: 100%;
        height: 100%;
    }

    
/* header_catch */
    .header_catch{
        display: flex;
    align-items: center;
        
    }

    .header_catch p{
       
      
        padding: 3% 0;
        margin: 0 auto;
        font-size: 3.5rem;
        font-family: 'Lato', sans-serif;
        border-top: 2px solid;
        border-bottom: 2px solid;
        text-align: center;
    }
    

/* main */


.sub_catch_01{
    background-color: #5A7260;
    padding: 9%;
}

.sub_catch_01 p{
    font-size: 2.3rem;
    text-align: center;
    line-height: 1.8;
    letter-spacing: 1rem;

}


/* common_part */

.section_h1{
    text-align: center;
font-size: 3rem;
letter-spacing: 1rem;

}

.fixed_bg{
    background-attachment: fixed;
    padding: 25% 0;
background-repeat: no-repeat;
background-size: cover;
}



    /* page-top */

    #page_top a{
        display: block;
    width: 50px;
    height: 50px;
    position: fixed;
    right: 3%;
    bottom: 5%;
    background-color: rgba(0, 0, 0, 0.3);
    line-height: 50px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 2.5rem;
    }

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

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

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

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

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

kyoya0819
kyoya0819

2019/09/07 11:38

ログアウト時は余白がないと言う解釈でよろしいでしょうか？ それともまだ余白はあるのでしょうか？
kyoya0819
kyoya0819

2019/09/07 11:39

header.phpとindex.phpとCSSのご提示をお願いします。
ooo9999
ooo9999

2019/09/07 11:39

画像を押していただけますとわかるかと思いますが、 ログアウト時も余白があります、、( T_T)
ooo9999
ooo9999

2019/09/07 11:39

かしこまりました！
ooo9999
ooo9999

2019/09/07 11:48

すみません、文字数の関係でindex.phpの多分関係ないと思われるmainの部分だけ消しましたm(_ _)m よろしくお願いします。。
kyoya0819
kyoya0819

2019/09/07 12:00

本当にこれであっていますか？ 大変申し訳ございませんがサイドのコード拝見させていただきました。 favicon.icoとapple-touchの間にheadの閉じタグとbodyの開始タグが入っています。
ooo9999
ooo9999

2019/09/07 12:03

すみません、どの部分でしょうか、、、 探し出せずです、、、 ただ、確かにファビコンとアップルタッチのURLを入れてからおかしくなったので きっとそいのせいだと思います、、！！！
kyoya0819
kyoya0819

2019/09/07 12:04

一回消してみてください。
ooo9999
ooo9999

2019/09/07 12:08 編集

一度消してみたら余白消えました。。。！！！！( T_T) ただ、タグ側では閉じタグなどの位置は間違っておらずです。。
guest

回答1件

0

ベストアンサー

類似の事例がありました
wp_headで出力されるmetaタグがheadではなくbodyに入ってしまい、ページ上部に余白ができてしまう時に確認すること | WEMO

原因はheadタグ内に紛れ込んだ「全角スペース」でした。

投稿2019/09/07 12:07

kyoya0819
kyoya0819

総合スコア10429

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

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

ooo9999
ooo9999

2019/09/07 12:18

この記事通り全ての余白をなくすといけました！！！！ 本当に本当にありがとうございます！！！！！( T_T)！！！！！
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップWordPressに関する質問

wordpressの上部にできる空白について