MENU

スマートフォン用サイドメニューウィジェットエリアにウィジェットを設定して下さい。

サイトデザインを自作テーマに変更しました。

Simplicityのヘッダー(背景)デザインをSTORK風にカスタマイズ!

こんにちは、SHUMiSTです。

Simplicity(シンプリシティー)テーマを使用して、STORK(ストーク)テーマを再現というかデザインを近づけるカスタマイズ第4回目です。

前回は、ナビゲーションメニューの作成と全体のヘッダーのナビゲーション部分のデザインを行いました。STORK(ストーク)テーマとそっくりになっている状態だと思います。

今回は、まだ不格好でバランスの悪い残りのヘッダー(背景)部分のデザインをカスタマイズしていきます。

追加ソースはなるべく、子テーマのスタイルシート(style.css)に追加しましょう。

第4回:ヘッダー(背景)部分のデザインを整えよう!

今回も、ヘッダー(背景)部分のデザインを手を加えて整えていく前に下準備をします。

外観のカスタマイズのヘッダーからヘッダー画像を設定

外観->カスタマイズ->ヘッダーからヘッダー画像の設定をします。

Simplicity(シンプリシティー)テーマでは「現在のヘッダー」と「ヘッダー外側背景画像」の2種類のヘッダー画像設定があります。

2種類のヘッダー画像設定の違いは、下記の通りです。

現在のヘッダー
.h-topに設定され、中央寄せのヘッダー画像を設定できます。
ヘッダー外側背景画像
#headerに設定され、画面幅いっぱいに広がるヘッダー画像を設定できます。

STORK(ストーク)テーマでは、画面幅いっぱいに広がるヘッダー画像を採用しているので、今回は「ヘッダー外側背景画像」の設定をします。

①ヘッダー背景画像に設定したい任意の画像(サイズ:1920×1080以上を推奨)を選択
②保存して公開

たったこれだけで、Simplicity(シンプリシティー)では画面幅いっぱいに広がるヘッダー画像を設定することができます。一応、参考画像を添付しておきます。

ヘッダー(背景)部分のデザインを設定

ヘッダー(背景)部分のデザインを設定する上で必要な下準備は先ほどの手順で完了しました。
現状は、下の添付画像のようにヘッダー背景部分の高さがヘッダーテキスト分の高さしかないため、ほとんど見えていない状態になっていると思います。

この状態をスタイルを設定することで、STORK(ストーク)テーマのデザインに近づけていきます。

ナビゲーションメニューのスタイルに要素を追加

第3回でナビゲーションメニューのスタイルを追加しましたが、同様のスタイルをヘッダー(背景)部分にも適用するため、そのスタイルに要素を追加し変更します。

追加前のソース

#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・・・ヘッダー(背景)部分の内側ボックス

疑似要素でのclearfix(clear:both)は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。
#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;
}

全体のリンクスタイルを設定

リンクとリンク画像のアニメーションとリンク画像のマウスオーバー時のスタイルを設定します。
ヘッダー(背景部分)では、ボタンにマウスオーバーした際のアニメーションやスタイルに使用します。

第3回のサイト全体のスタイル設定を行っている場合は不要です。
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;
}

メディアクエリにスタイルを追加

第3回で追加してある以下の2つのメディアクエリ(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;
    }

ヘッダーテキストにスタイルを設定

第2回のカスタマイズでソースを追加したヘッダーテキストスタイルを設定します。

.header-heading・・・見出しテキスト
.header-description・・・説明や補足テキスト
.header-button・・・メニューボタン

3種類のテキストとボタンを設定することができます。
設定するテキストやボタンの内容は自由なので各自、自由に使用してください。

追加ソース

#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(ストーク)テーマには存在しないページトップフォローボタンですが、第1回で書いた通りせっかくなので有効活用します。

ページトップフォローボタンは外観->カスタマイズ->SNS->ページトップフォローボタンの表示で表示/非表示を切り替えられます。

外観->カスタマイズ->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(ストーク)テーマを購入してご利用ください。

今回のカスタマイズ前後のスクリーンショット

カスタマイズ前

カスタマイズ後

第3回:ヘッダーデザイン編を読む

第5回:検索ボックスのモーダルウィンドウ表示編を読む

SimplicityをSTORK風にカスタマイズシリーズ目次へ

この記事が気に入ったら
いいね!しよう!

最新記事をお届けします。