ヘッダー画像上下に余白。

  • kururu

    (@kururu)


    8年、 11ヶ月前

    いつも、お世話になってます。

    ヘッダー画像の上と下に設定していない筈なのに
    余白が生じてしまい困っています。

    また、カテゴリーをタイトルの横に並べて表示にしたつもりなのに
    段違いのようになっています。

    携帯で確認しても同じような感じです。
    携帯で見た画像
    サイトURLはこちらです。

    style.css

    /* ヘッダー */
header        {border-bottom: solid 1px #dddddd;
               margin-bottom: 40px;
               background-color: #0FE6CA}
header a      {text-decoration: none}
.siteinfo     {overflow: hidden}

/* ナビゲーションメニュー */
#mainmenu     {display: none}

.mainmenu ul	{margin: 0;
                 padding: 0;
                 list-style: none}

.mainmenu li a	{display: block;
                 padding: 10px 30px;
                 color: #606C67;
                 font-weight:bolder;
                 font-size: 18px;
                 font-family: 'Poiret One', cursive}

.mainmenu li a:hover	{background-color: #0FE6CA}

/* トグルボタン */
.header-inner	{position: relative}

#navbtn	{position: absolute;
         top: 15px;
         right: 0;
         padding: 6px 12px;
         border: solid 1px #aaaaaa;
         border-radius: 5px;
         background-color: #ffffff;
         cursor: pointer}

#navbtn:hover	{background-color: #dddddd}

#navbtn:focus	{outline: none}

#navbtn i	{color: #888888;
             font-size: 18px}

#navbtn span    {display: inline-block;
                 text-indent: -9999px}

@media (min-width: 768px) {
/* サイト名とナビゲーションメニューを横に並べる設定 */
.header-inner:after	{content: "";
      display: block;
        clear: both}

.site	{float: left;
         width: auto}

.sitenav	{float: right;
             width: auto}

/* ナビゲーションメニューのリンクを横に並べる設定 */
#mainmenu	{display: block !important}

.mainmenu	{margin-top: 10px}

.mainmenu ul:after	{content: "";
                     display: block;
                     clear: both}

.mainmenu li	{float: left;
                 width: auto}

.mainmenu li a	{padding: 10px 15px}

/* トグルボタン */
#navbtn	{display: none}
}

/* メニュー */
.blogmenu ul      {margin: 0;
                   padding: 0;
                   list-style: none}

.blogmenu .widget {margin-bottom: 30px;
                   padding: 20px;
                   background-color: #e8e8e8;
                   border-radius: 10px}

.blogmenu .widgettitle
                  {margin-top: 10px;
                   margin-bottom: 20px;
                   font-family: 'Poiret One', cursive;
                   border-right: solid 10px #4a5f7e;
                   color: #4a5f7e;
                   font-size: 14px}

.blogmenu li a    {display: block;
                   padding: 10px 5px;
                   color: #666666;
                   font-size: 14px;
                   text-decoration: none}

.blogmenu li a:hover {background-color: #ffffff}

    header.php

    <!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="UTF-8">
<title>
<?php wp_title( ' | ', true, 'right'); ?>
<?php bloginfo( 'name' ); ?>
</title>

<meta name="viewport" content="width=device-width">

<link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css"
rel="stylesheet">
<link rel="stylesheet"
 href="<?php echo get_stylesheet_uri(); ?>">

<?php if (is_singular()) wp_enqueue_script("comment-reply"); ?>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<header>
<div class="header-inner">
<div class="site">
<h1><a href="<?php echo home_url(); ?>">
<img src="<?php echo get_template_directory_uri(); ?>/966.png"
 alt="<?php bloginfo( 'name' ); ?>" width="224" height="50">
</a></h1>
</div>
</div>

<div class="sitenav">
<button type="button" id="navbtn">
<i class="fa fa-leaf"></i><span>MENU</span>
</button>

<?php wp_nav_menu( array(
   'theme_location' => 'sitenav',
   'container' => 'nav',
   'container_class' => 'mainmenu',
   'container_id' => 'mainmenu'
) ); ?>
</div>

</header>

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • モデレーター のむらけい (Kei Nomura)

    (@mypacecreator)

    8年、 11ヶ月前

    上部の余白はロゴマークを囲んでいるh1要素のmargin-topによるものです。
    CSSの細かい話になるので詳細はご自身で調べていただきたいですが、現状h1に何もスタイルが指定されていないので、ブラウザのデフォルトスタイルにしたがって上下にmarginが自動で付きます。

    ↓参考
    http://taghtml.com/css/defaultstylesheet.html

    リセットCSSを指定するなどして対応しましょう。

    また、カテゴリーをタイトルの横に並べて表示にしたつもりなのに
    段違いのようになっています。

    これはsitenavにwidth:autoが指定されている＝sitenavが横幅一杯になっているため、カラム落ちしています。左右カラムのwidthの数値を計算して横幅に収まるようにしましょう。

    ※こちらも、直接WordPressの機能に関する質問ではないので詳しくはお調べいただきたいのですが、こういったところがヒントになると思います^_-☆
    http://homepagelecture.web.fc2.com/css_float.htm

    あとはブラウザで右クリックすると出てくる「要素の検証」「要素の調査」などの機能を使うと、HTMLやCSSでどこに問題があるか調べられるので、ぜひ使いこなしてみてください！

    トピック投稿者 kururu

    (@kururu)

    8年、 11ヶ月前

    返信、有難う御座います！
    なるほど、そうだったんですね・・

    もう少し自分でも勉強してみようと思います！

    また、何かあった時は宜しくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • トピック「ヘッダー画像上下に余白。」には新たに返信することはできません。