サポート » 使い方全般 » ヘッダーのマージンを詰めたい

  • 解決済 chiroromama

    (@chiroromama)


    現在テーマtwentytenをカスタマイズして使っていますがマージンの詰め方が分からないので恐れ入りますがどなたがご教授願います。

    ヘッダーのサイトタイトルを画像に変更していますが、画像の上下のマージンが空きすぎていて詰めたいのですが、どこでどうやって詰めればいいのかさっぱり分かりません。

    いろいろいじりましたがいまだに分からず・・・教えていただこうと。

    基本的なことは分かっているのですが人が作っているテンプレートを読みこなすのはなかなか難儀です・・・

    恐れ入りますがよろしくお願いいたします。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • 外観>カスタマイズ>ヘッダー画像

    でアップした画像のことですよね?

    それでしたら style.css

    .header-image {
    	margin-top: 24px;
    	margin-top: 1.714285714rem;
    }

    で上のマージンを詰めるのですが

    「基本的なことは分かっているのですが」とおっしゃっているので、もしかしたら私の勘違いで回答になってなかったらゴメンなさい。

    ちなみに画像の下は

    .site-content {
    	margin: 24px 0 0;
    	margin: 1.714285714rem 0 0;
    }

    で詰まると思います。

    トピック投稿者 chiroromama

    (@chiroromama)

    お返事ありがとうございます!

    すいませんが・・・.site-contentはどこにあるのでしょうか?

    style.cssには記載がないみたいなので。

    基本的なこと・・・と正直分からないことの方が多いので・・・初心者に近いと思っていただいていいです。。

    トピック投稿者 chiroromama

    (@chiroromama)

    すいません。ヘッダー画像というのはカスタマイズのところで画像を取り換えた画像ではなくてタイトルを画像にテーマで変更した画像です。

    中からタイトル画像を出しているんですが、それだと面倒でしょうか?だとしたら元に戻そうかと思います。

    辺に間が空いているので・・

    「中からタイトル画像を出している」というのは、御自身でテーマの header.php の

    <hgroup>
    			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    		</hgroup>

    ここを書き換えたという意味ですか?

    それでしたら、どのように書き換えたか教えてもらえると分かりやすいです。

    ちなみに site-content は style.css にあります。

    探すときは、もしブラウザでイジるなら CTRL+F で探すと良いです。

    トピック投稿者 chiroromama

    (@chiroromama)

    タイトルを画像タイトルに切り替えたのはstyle.cssで変えました。

    #site-title a { /* タイトル文字を画像に差し替え*/
    width: 400px;
    padding-top: 60px;
    background: url(http://kuchikomi-life.info/wp/wp-content/uploads/2014/11/kuchikomi_03.jpg) no-repeat left top;
    display: block;
    background-position: left center;
    background-repeat: no-repeat;
    text-indent: -9999px

    }

    このように直して表示はできているのですが、上下の余白が気になります。

    style.cssを検索してみたが、どうやらsite-contentが検索できなかったです。

    バージョンとか関係しているのでしょうか?

    ごめんなさい! twentyten だったのですね!
    twentytwelve だと勘違いしてまして本当にごめんなさい。

    #header {
      padding: 0;
    }
    #site-title {
    	float: left;
    	font-size: 30px;
    	line-height: 36px;
       margin: 0;
    	width: 700px;
    }
    #site-title a { /* タイトル文字を画像に差し替え*/
             width: 400px;
             padding-top: 60px;
             background: url(http://kuchikomi-life.info/wp/wp-content/uploads/2014/11/kuchikomi_03.jpg) no-repeat left top;
             display: block;
             background-position: left center;
             background-repeat: no-repeat;
             text-indent: -9999px
     }

    header の padding
    site-title の margin
    を上記のようにしたらご希望にあいますか?

    トピック投稿者 chiroromama

    (@chiroromama)

    ありがとうございました。詰まりました!!
    感謝です!

    こちらこそ 御質問を正しく理解せずに混乱させてしまったようで申し訳なかったです。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ヘッダーのマージンを詰めたい」には新たに返信することはできません。