こんにちは、SHUMiSTです。
Simplicity（シンプリシティー）テーマを使用して、STORK（ストーク）テーマを再現というかデザインを近づけるカスタマイズ第４回目です。
前回は、ナビゲーションメニューの作成と全体のヘッダーのナビゲーション部分のデザインを行いました。STORK（ストーク）テーマとそっくりになっている状態だと思います。
今回は、まだ不格好でバランスの悪い残りのヘッダー（背景）部分のデザインをカスタマイズしていきます。
第４回：ヘッダー（背景）部分のデザインを整えよう！
今回も、ヘッダー（背景）部分のデザインを手を加えて整えていく前に下準備をします。
外観のカスタマイズのヘッダーからヘッダー画像を設定
外観->カスタマイズ->ヘッダーからヘッダー画像の設定をします。
Simplicity（シンプリシティー）テーマでは「現在のヘッダー」と「ヘッダー外側背景画像」の２種類のヘッダー画像設定があります。
２種類のヘッダー画像設定の違いは、下記の通りです。
.h-topに設定され、中央寄せのヘッダー画像を設定できます。
ヘッダー外側背景画像
#headerに設定され、画面幅いっぱいに広がるヘッダー画像を設定できます。
STORK（ストーク）テーマでは、画面幅いっぱいに広がるヘッダー画像を採用しているので、今回は「ヘッダー外側背景画像」の設定をします。
②保存して公開
たったこれだけで、Simplicity（シンプリシティー）では画面幅いっぱいに広がるヘッダー画像を設定することができます。一応、参考画像を添付しておきます。
ヘッダー（背景）部分のデザインを設定
ヘッダー（背景）部分のデザインを設定する上で必要な下準備は先ほどの手順で完了しました。
現状は、下の添付画像のようにヘッダー背景部分の高さがヘッダーテキスト分の高さしかないため、ほとんど見えていない状態になっていると思います。
この状態をスタイルを設定することで、STORK（ストーク）テーマのデザインに近づけていきます。
ナビゲーションメニューのスタイルに要素を追加
第３回でナビゲーションメニューのスタイルを追加しましたが、同様のスタイルをヘッダー（背景）部分にも適用するため、そのスタイルに要素を追加し変更します。
追加前のソース
#header-in:before, #header-in:after,
.menu:before, .menu:after {
content: "";
display: table;
}
#header-in:after, .menu:after {
clear: both;
}
#header-in {
width: 96%;
margin: 0 auto;
}追加後のソース
追加する要素
#h-top・・・ヘッダー（背景）部分の内側ボックス
#header-in:before, #header-in:after,
.menu:before, .menu:after,
#h-top:before, #h-top:after {
content: "";
display: table;
}
#header-in:after, .menu:after, #h-top:after {
clear: both;
}
#header-in, #h-top {
width: 96%;
margin: 0 auto;
}全体のリンクスタイルを設定
リンクとリンク画像のアニメーションとリンク画像のマウスオーバー時のスタイルを設定します。
ヘッダー（背景部分）では、ボタンにマウスオーバーした際のアニメーションやスタイルに使用します。
a, a img {
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
a:hover img {
filter: alpha(opacity=70);
-ms-filter: "alpha(opacity=70)";
opacity: 0.7;
}ヘッダー（背景）の外側、内側ボックスにスタイルを設定
#header・・・ヘッダー（背景）部分の外側ボックス
#h-top・・・ヘッダー（背景）部分の内側ボックス
追加ソース
#header {
width: 100%;
text-align: center;
color: #32abc9;
margin-bottom: 1em;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
#header #h-top {
display: block;
padding: 8% 2% 7%;
overflow: inherit;
position: static;
zoom: 1;
}メディアクエリにスタイルを追加
第３回で追加してある以下の２つのメディアクエリ（768px以上、1166px以上）の設定にヘッダー（背景）部分のスタイルを追加します。
追加先のメディアクエリ①
@media only screen and (min-width: 768px) {
//この括弧内に追加する
}追加ソース
#header {
margin-top: -2.5em;
font-size: 1.15em;
}追加先のメディアクエリ②
@media only screen and (min-width: 1166px) {
//この括弧内に追加する
}追加ソース
#header {
font-size: 1.2em;
}
#h-top {
width: 1166px;
}ヘッダーテキストにスタイルを設定
第２回のカスタマイズでソースを追加したヘッダーテキストスタイルを設定します。
Simplicityにヘッダーソースを追加してSTORK風にカスタマイズ！
WordPressのSimplicity（シンプリシティー）テーマの流用だけでは対応できない箇所、STORK（ストーク）テーマを再現できない箇所のテンプレートにソースを追加し、STORK（ストーク）テーマに近づけるカスタマイズ紹介記事です。
.header-description・・・説明や補足テキスト
.header-button・・・メニューボタン
３種類のテキストとボタンを設定することができます。
設定するテキストやボタンの内容は自由なので各自、自由に使用してください。
追加ソース
#h-top .header-heading {
font-size: 2.3em;
font-weight: normal;
margin: 0.3em 0;
line-height: 1;
letter-spacing: -1px;
visibility: visible;
font-family: 'Concert One', cursive;
color: #32abc9;
}
#h-top .header-description {
font-size: .8em;
margin: 0;
line-height: 1.7;
font-weight: bold;
visibility: visible;
}
#h-top .header-button {
margin: 2.5em 0 0;
visibility: visible;
}
#h-top .header-button a {
padding: .8em 1.5em;
color: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.05);
font-size: .82em;
font-weight: bold;
width: 300px;
max-width: 90%;
background: #ed7171;
position: relative;
text-align: center;
filter: alpha(opacity=90);
-ms-filter: "alpha(opacity=90)";
opacity: 0.9;
-webkit-text-shadow: none;
-moz-text-shadow: none;
text-shadow: none;
border-radius: 0.4em;
-moz-box-shadow: 0 3px 5px rgba(45, 45, 45, 0.08);
box-shadow: 0 3px 5px rgba(45, 45, 45, 0.08);
display: inline-block;
text-decoration: none;
}
#h-top .header-button a:hover {
filter: alpha(opacity=40);
-ms-filter: "alpha(opacity=40)";
opacity: 0.4;
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
transform: translate3d(0px, 3px, 1px);
}ページトップフォローボタンに色を設定
STORK（ストーク）テーマには存在しないページトップフォローボタンですが、第１回で書いた通りせっかくなので有効活用します。
外観->カスタマイズ->SNS->フォローボタンに色をつけるにチェックをすることで手軽に各SNSに合った色を設定することができます。
ページトップフォローボタンにスタイルを設定
Simplicity（シンプリシティー）テーマのページトップフォローボタンのスタイルだと少し味気ないのでSTORK（ストーク）テーマ風にします。
追加ソース
#header .alignright {
position: static;
text-align: inherit;
margin: 2.5em 0 0;
height: auto;
}
ul.snsp {
margin: 0;
}
ul.snsp li {
margin-right: 0.5em;
}
ul.snsp li a span {
font-size: 2.5em;
width: auto;
height: auto;
border-radius: 0.1em;
-moz-box-shadow: 0 3px 5px rgba(45, 45, 45, 0.08);
box-shadow: 0 3px 5px rgba(45, 45, 45, 0.08);
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
ul.snsp li a span:hover {
filter: alpha(opacity=40);
-ms-filter: "alpha(opacity=40)";
opacity: 0.4;
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
transform: translate3d(0px, 3px, 1px);
}カスタマイズまとめ
今回のカスタマイズによりヘッダー（背景）部分のデザインが整い、ヘッダー全体のデザインが整いました。
これにより、Simplicity（シンプリシティー）テーマのカスタマイズ機能であるページトップフォローボタンが追加されていることとナビゲーションメニューに検索メニューがないこと以外は、ほぼSTORK（ストーク）テーマそっくりの状態になっていると思います。
もし、下のカスタマイズ後の画像と違う状態の場合は何かのカスタマイズ手順が抜けていると思ってください。
次回は、先ほど言った通りナビゲーションメニューに検索メニューがない状態なので検索メニューを追加し、検索メニューを押した時にSTORK（ストーク）テーマのようにモーダルウィンドウで検索ボックスを表示するカスタマイズを行います。
Simplicity（シンプリシティー）テーマの元々の機能やソースを流用して、STORK（ストーク）テーマに近づけているため、STORK（ストーク）テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。
STORK（ストーク）テーマの機能面などを利用したい方はSTORK（ストーク）テーマを購入してご利用ください。
今回のカスタマイズ前後のスクリーンショット
カスタマイズ前
カスタマイズ後
