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）の場合
まずまず思い通りの表示になりました。