ヘッダーもレスポンシブにカスタマイズ~WordPress Twenty Twelve

更新

header structureTwenty 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;
}
}

実際の見え方

最後に、各デバイスでヘッダーの見え方をScreenfly by QuirkTools Test Your Website at Different Screen Resolutionsで確認します。

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

スマホ(幅320px)の場合

タブレット(幅800px)の場合

PC(幅1280px)の場合

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です