WordPressのヘッダー上部の余白

解決済

質問者：00yamato00
質問日時：2012/06/28 07:34
回答数：3件

WordPressでテーマを自作しているのですが、ヘッダー上部に余白ができてしまいます。
調べてみると、多くの場合は
http://hello-design-world.com/2011/04/wordpress3 …
のように管理バー関連の設定に問題があったようなのですが、私の場合は管理バーの表示を外しても直りません。

以下のようなソースでやっているのですが、何が原因かわかる方いたら教えてください！
※まだ作成途中なので、ファイルは以下の２つだけです。

----------------------php---------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/TR/xhtml/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;charset=<?php bloginfo('charset'); ?>" />
<title><?php bloginfo('name'); ?></title>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

</head>
<body>


<div id="container">


<div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>



<div id="content">
<?php if(have_posts()): while(have_posts()):
the_post(); ?>

<div class="post">
<h2><a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>

<p class="postinfo">
<?php echo get_the_date(); ?> <?php the_time(); ?>
|
カテゴリー：<?php the_category(', '); ?>
</p>

<?php the_content(); ?>

</div>

<?php endwhile; endif; ?>
</div>

</div>

</body>
</html>

----------------------css---------------------
/*
Theme Name: Testtheme
Theme URI:
Description: テストテーマ
*/

/* コンテナ */
div#container {
width: 1000px;
margin-right: auto;
margin-left: auto;
}

/* ヘッダー */
div#header{background-image: url(header.jpg);
margin-top: 0px;
margin-left: 0px;
margin-bottom: 20px}

div#header h1{font-size: 1.875em;
font-weight: bolder;
padding: 10px 0px 0px 10px;
margin-top: 0px}

div#header h1 a{text-decoration: none;
color: #ff8c00}

div#header p#desc{font-size: 1em;
color: #ffffff;
font-weight: bolder;
padding: 0px 0px 10px 10px}

/* 記事 */
div.post {padding: 15px;
margin-bottom: 30px}

div.post h2{background-color: #1e90ff;
font-size: 1.3em;
padding: 10px;
margin: 0}

div.post h2 a{text-decoration: none;
color: #ffffff}

div.post p{font-size: 0.875em;
line-height: 1.6;
margin-top: 10px}

p.postinfo{color: #0c8bcd;
text-align: right;
margin: 20px 0 0;
clear: both}

p.postinfo a{color: #0c8bcd}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

No.3

回答者： luminums
回答日時：2012/06/28 09:18

あ、失礼しました。

管理バーのことはご存知でしたね・・・。
#wpadminbar{
display:none;
}

で管理バーのところが消せると思います。

- 0
- 件

通報する

この回答へのお礼

いろいろ親切にありがとうございました！

通報する

お礼日時：2012/06/28 22:12

No.2

回答者： luminums
回答日時：2012/06/28 09:14

どうも。

おはようございます。

貼ってもらったソースはindex.phpなのでしょうか？
category.phpやsingle.phpなどでも同じようなことが言えるのですが、必ずWordPressにはwp_head()とwp_footer()を入れないといけません。

> ヘッダー上部に余白ができてしまいます。
ログイン状態であなたのサイトを見たらおそらくあいているのでしょう。
表側（ログインしていない私側）は余白はついていないように思えます。
これは、上部にWordPress側でCSSが読み込まれてはいて、管理バーの高さ分高さが取られているのですが、
肝心の管理バーが上に出ていないのではないかなと思います。

管理バーを出すにはwp_footer()を記述しないといけません。

■wp_head()の入れるところ
<head>内に記述します

～略～
<head>
<?php wp_head(); ?>
</head>
～略～

■wp_footer()の入れるところ
</body>手前に記述します
<?php wp_footer(); ?>
</body>
</html>

■上記に関する記事
http://begi.net/blog/20100114/148
http://eienmukyu.com/2012/04/wphead-wordpress-th …
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0% …
http://eienmukyu.com/2012/04/wphead-wordpress-th …
http://ja.forums.wordpress.org/topic/562