Twenty Twelveのデフォルトの状態では、PCなどの幅の広いデバイスで閲覧したとき、ヘッダー右側には広大なスペースが生まれます。ここに、google検索窓とsocial buttonを設置しました。

ちなみに、スマートフォンなど幅の狭い端末で閲覧した際には、以下のように見えるようにしました。

header.phpとstyle.cssを書き換えて実現しました。

header.php

hgroopの直後に、新しいボックス.search-socialを作りました。

その入れ子として.searchと.sbを作りました。

前者にはグーグルカスタム検索のコードを、後者にはdata URI Schemeで表示したsocial iconを設置しました。それぞれ、それなりに苦労しました。

before

<header id="masthead" class="site-header" role="banner">
    <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>

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    <?php endif; ?>
</header><!-- #masthead -->

after

<header id="masthead" class="site-header" role="banner">
    <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>
    <div class="search-social">

        <div class="search">
        （グーグルカスタム検索のコード）
        </div>
        <div class="sb">
        （ソーシャルボタン）
        </div>
    </div>

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
        <div class="assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

    <?php $header_image = get_header_image();
    if ( ! empty( $header_image ) ) : ?>
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
    <?php endif; ?>
</header><!-- #masthead -->

style.css

次にスタイルをあてていきます。

タイトルロゴのfont-size,margin変更

/* Header */のところの

.site-header h1 {
    font-size: 24px;
    font-size: 1.714285714rem;
    line-height: 2;
}

を

.site-header h1 {
    font-size: /**24**/ 60px;
    font-size: /**1.714285714**/ 4.28571428571rem;
    line-height: /**2**/ 0.8;
    font-family: 'Sevillana', cursive;
    margin:3.5px 0;
    margin:0.25rem 0;
}

に変更します。

フロート

hgroopと .search-socialの二つのボックスの幅を320pxにして、幅の狭いデバイスで閲覧したときにはたて並び、幅の広いデバイスで閲覧したときには横ならびになるようにします。

まずは、/* Navigation Menu */の前あたりに、以下を挿入します。

.site-header h1,
.site-header h2,
.site-header .search,
.site-header .sb {
    text-align: center;
    margin:0 auto;
}
.site-header .search-social{
margin:0 auto;
font-size: 13px;
font-size: 0.928571429rem;
line-height: /**1.846153846**/ 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;
}

次に、/* =Media queries—–のところにある

.site-header h1,
.site-header h2 {
    text-align: left;
}
.site-header h1 {
    font-size: 26px;
    font-size: 1.857142857rem;
    line-height: 1.846153846;
    margin-bottom: 0;
}

をコメントアウトします。

次に、/* Minimum width of 960 pixels. */の直前に以下を挿入します。

/* 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;
    width:320px;
    width:22.857142rem;
    }
    .site-header h1,
    .site-header h2{
    text-align: left;
    width:320px;
    width:22.857142rem;
    }
}

最後に以下の部分に

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
}

clear:both;を加えて以下のように変えます。

/* Navigation Menu */
.main-navigation {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    text-align: center;
    clear:both;
}

すると、冒頭の2枚の画像のようなヘッダーになります。