Twenty Twelveのカスタマイズを始めてから、ヘッダーは色々といじくってきました。今回は、デバイスの幅が広がるにつれて1カラム→2カラム→3カラムとレスポンシブな表示をするヘッダーにしてみました。

ヘッダーにgoogle検索窓とsocial buttonを設置した状態から、レスポンシブなヘッダーをつくります。

ついでにタイトルロゴを縮小して、ソーシャルボタンはセンタリングしないようにします。

まずはheader.php修正

header.phpの

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

を

<hgroup>
    <div class="headwrap">
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?><!--Web Shufu<img src="<?php echo get_stylesheet_directory_uri(); ?>/title_logo2.png" style="margin:0;" alt="" />--></a></h1>
    <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
    </div><!--.headwrap -->
</hgroup>

に変えます。

/* Header */と/* Navigation Menu */の間

次に、style.cssの修正です。/* Header /と/ Navigation Menu */の間で、スマートフォンなど画面が狭いデバイスでのスタイルを決めます。

/* Header */
.site-header {
    padding:0;
}
.site-header hgroup{
    margin: 0 auto;
}
.site-header h1 a,
.site-header h2 a {
    color: #515151;
    display: inline-block;
    text-decoration: none;
}
.site-header h1 a:hover,
.site-header h2 a:hover {
    color: #00a48c;
}
.site-header h1 {
    font-size: 49px;
    font-size: 3.5rem;
    line-height: 0.8;
    font-family: 'Sevillana', cursive;
    margin:14px 0 0 0;
    margin:1rem 0 0 0;
    text-align: center;
}
.site-header h2 {
    font-weight: normal;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1;
    color: #777;
    margin:3.5px 0;
    margin:0.25rem 0;
}
.header-image {
    margin-top: 12px;
    margin-top: 0.857142857rem;
}
.site-header .search-social{
    margin:0 auto;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1;
}
.site-header .sb a{
    display: inline-block;
    text-decoration: none;
}
#cse-search-form,
.gsc-control-searchbox-only,
.gsc-control-searchbox-only-ja,
.gsc-search-box,
#cse-search-form input[type="text"]{
margin:0!important;
padding:0!important;
}
#cse-search-form input[type="text"] {
    height:19px!important;
    height:1.357142857rem!important;
}
/* Navigation Menu */

/* =Media queries

最後にメディアクエリを修正します。

ヘッダーにgoogle検索窓とsocial buttonを設置で、以下のようなメディアクエリを新たに作りました。

/* Minimum width of 670pixels. */
@media screen and (min-width: 670px) {
    .site-header hgroup{
        margin: 0 ;
        float:left;
    }
    .site-header .search-social{
    margin: 0;
    float:right;
    }
    .site-header h1,
    .site-header h2{
    text-align: left;
    }
}

これを以下のように書き換えます。

/* Minimum width of 670pixels. */
@media screen and (min-width: 670px) {
    .site-header hgroup{
        margin: 0 -294px0 0 0;
        margin: 0 -21rem 0 0;
        width: 100%;
        z-index: 0;
        float:left;
    }
    .headwrap{
        margin: 0 294px0 0 0;
        margin: 0 21rem 0 0;
    }
    .site-header .search-social{
        float: right;
        margin: 0;
        width:294px;        
        width:21rem;
        z-index: 1; 
        position: relative;
    }
    .site-header h1,
    .site-header h2
    {
    text-align:left;
    min-width:266px;        
    min-width:19rem;
    width:46%;
    margin:14px 0 0 0;
    margin:1rem 0 0 0;
    float:left;
    clear:none;
    }
}

実際の見え方

最後に、各デバイスでヘッダーの見え方を確認します。

以下の画像ではバーの色が緑になっちゃってますがスルーしてください。

スマホ（幅320px)の場合

タブレット（幅800px）の場合

PC（幅1280px）の場合

まずまず思い通りの表示になりました。