MENU

フォロー

LOST ARK（ロストアーク）の攻略を多数掲載中！

SimplicityのヘッダーデザインをSTORK風にカスタマイズ！

2017.11.5｜6年前69

こんにちは、SHUMiSTです。

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

前回は、ヘッダー部分のSimplicity（シンプリシティー）テーマの流用だけでは対応できない箇所、STORK（ストーク）テーマを再現できない箇所にソースを追加しました。

これにより、ヘッダーのソースはSTORK（ストーク）テーマにより近づいた状態になりましたが、Simplicity（シンプリシティー）テーマを土台にしておりCSS（スタイルシート）が適用されているため、デザインが乱れた状態になっています。

今回からは、ヘッダーの乱れたデザインをCSS（スタイルシート）に手を加えることでSTORK（ストーク）テーマ風に仕上げていきます。

なお、ヘッダー全体に手を加えると記事が長くなるので、今回はナビゲーションメニュー部分まで手を加えます。モバイルメニューはヘッダー全体が完成した後に対応します。

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

スポンサーリンク

第３回：ナビゲーションメニューのデザインを整えよう！

まず、ナビゲーションメニューのデザインに手を加える前に下準備をします。

外観のメニューからメニューを作成

前回までのカスタマイズの状態だと、メニューにサンプルページしかなくデザインが整えにくいので、適当なメニュー項目を追加していきます。
追加するにあたり、サブメニューのデザインもあるため、下記のスクリーンショットのようにレベル３までのメニューも追加します。

メニュー追加にあたってのポイント

先ほどのメニュースクリーンショットを見たらわかるようにレベル１メニューのナビゲーションラベルが下記のようになっていると思います。

カテゴリー<span class="s-en">Category</span>

今回行うナビゲーションのデザインは、上記のナビゲーションラベルにしないとレイアウトに若干違和感がある状態になるため、必ず上記のナビゲーションラベルのような状態で入力してください。
ニュアンス的には、メインラベルにサブラベルをつける感じです。

ナビゲーションラベルには、HTMLタグを使用することが可能で出力時にはきちんとHTMLタグとして出力されます。
また、この方法を使用することで画像のメニューやWEBフォントを表示したりすることもできます。

サイト全体のスタイルを設定

デザインに影響するサイト全体のスタイル設定を行います。
これからカスタマイズを行っていく上でサイト全体の基本となるフォントの設定や見出しなどの文字の設定、背景などの画像設定、リンクの設定などのスタイルを設定します。

追加ソース

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    font-family: Arial,Helvetica,"游ゴシック",YuGothic,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
    font-size: 103%;
    line-height: 1.5;
    color: #3e3e3e;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    word-wrap: break-word;
    background: #f7f7f7;
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    background: transparent;
    color: #1BB4D3;
}
a:focus {
    outline: thin dotted;
}
a:hover {
    color: #E69B9B;
}
a:active, a:hover {
    outline: 0;
}
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 img {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
a:hover img {
    filter: alpha(opacity=70);
    -ms-filter: "alpha(opacity=70)";
    opacity: 0.7;
}
a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
h1, h2, h3, h4, h5 {
    text-rendering: optimizelegibility;
}
h1 a, h2 a, h3 a, h4 a, h5 a {
    text-decoration: none;
}
h1 {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.333em;
}
h2 {
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: bold;
    margin-bottom: 0.375em;
}
h3 {
    font-size: 1.3em;
    font-weight: bold;
}
h4 {
    font-size: 1.2em;
    font-weight: 700;
}
h5 {
    font-size: 1em;
    font-weight: 700;
    line-height: 2em;
    text-transform: uppercase;
    letter-spacing: 1px;
}
nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

子テーマのfunction.phpにGoogleフォントの呼び出しを設定

STORK（ストーク）テーマでは、Googleフォント「ConcertOne」が度々使用されているためGoogleフォントを読み込むようにします。

ナビゲーションメニュー部分では、先ほどメニューを作成した際に設定したサブラベルとサイトタイトルに使用されています。

追加ソース

下記の追加ソースを子テーマの”function.php”の最後に追加してください。

//必要なファイルをヘッダーに読み込む
function add_files() {
  //Googleフォントを読み込む
  wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Concert+One', array('simplicity-style') );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

サイトタイトルとナビゲーションメニュー部分のデザインを設定

今までの内容を追加することで下準備は完了したため、サイトタイトルとナビゲーションメニュー部分のデザインを設定します。

以下の追加ソースを子テーマのスタイルシートにコピペ（コピー＆ペースト）することでデザインが設定されます。細かい解説は省きますが、大まかに要素の説明をしておきます。

要素の解説

  • header・・・ナビゲーションヘッダー部分の外側のボックス
  • #header-in・・・ナビゲーションヘッダー部分の内側のボックス
  • .top-title-catchphrase・・・サイトタイトルのボックス
  • #site-title・・・サイトタイトルの見出し
  • nav・・・ナビゲーション部分の外側のボックス
  • #navi・・・ナビゲーション部分の内側のボックス
  • #navi-in・・・ナビゲーション部分の最も内側のボックス
  • .menu・・・ナビゲーションメニューリスト
  • .sub-menu・・・ナビゲーションサブメニューリスト
  • .s-en・・・ナビゲーションサブラベル用（今回のカスタマイズで追加）

追加ソース

疑似要素でのclearfix（clear:both）は、本来は各所で何度も使用するため専用のクラスを用意した方が良いですが分かり易いように下記のように記載しています。
.top-title-catchphrase, .s-en {
    font-family: 'Concert One', cursive;
    font-weight: normal;
}
#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;
}
header {
    color: #ffffff;
    position: relative;
    z-index: 2;
}
#header-in {
    position: relative;
    background: #1bb4d3;
    padding: 0;
    margin: 0 auto;
    zoom: 1;
}
.top-title-catchphrase {
    padding: 0 1em;
}
.top-title-catchphrase #site-title {
    font-size: 2em;
    margin: 0;
    padding: 0;
}
.top-title-catchphrase #site-title a {
    color: #eeee22;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
}
.top-title-catchphrase #site-title a:hover {
    color: #e5e5e5;
}
#navi ul li a {
    font-size: inherit;
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 0.75em;
    position: relative;
}
#navi ul.menu {
    border-bottom: 0;
    background: transparent;
}
#navi ul.menu li a {
    color: #edf9fc;
}
#navi ul.menu > li > a {
    padding: 12px .7em 6px;
}
#navi ul.menu li a .s-en {
    display: block;
    text-align: center;
    width: 100%;
    font-size: 0.85em;
    font-weight: normal;
}
#navi ul.menu li a:hover {
    color: #e5e5e5;
    background-color: transparent;
}
#navi li li {
    text-align: left;
}
#navi li ul.sub-menu li a, #navi li ul.children li a {
    padding-left: 15px;
}
@media only screen and (min-width: 768px) {
        .top-title-catchphrase {
        display: inline-block;
        float: left;
    }
    .top-title-catchphrase #site-title {
        display: table-cell;
        height: 58px;
        vertical-align: middle;
    }
    .top-title-catchphrase #site-title a {
        display: inline;
    }
    nav {
        float: right;
    }
    #navi-in {
        width: auto;
        margin: auto;
    }
    nav, navi .menu {
        display: inline-block;
    }
    #navi ul.menu {
        margin: 0;
        border: 0;
    }
    #navi ul.menu > li {
        float: left;
        position: relative;
        font-size: .79em;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        font-weight: bold;
        margin-bottom: -6px;
    }
    #navi ul.menu li a {
        border-bottom: 0;
    }
    #navi ul.menu > li > a:after {
        background: #e5e5e5;
        content: "";
        display: block;
        margin: 5px auto 0;
        width: 0;
        height: 1px;
        background: #e5e5e5;
        transition: .25s ease-out;
        -webkit-transition: .25s ease-out;
        -moz-transition: .25s ease-out;
        -o-transition: .25s ease-out;
        -ms-transition: .25s ease-out;
        opacity: .5;
        filter: alpha(opacity=50);
        -ms-filter: "alpha(opacity=50)";
    }
    #navi ul.menu > li > a:hover:after {
        width: 100%;
    }
    #navi ul {
    	margin-top: 0;
        background: #666666;
    }
    #navi ul.sub-menu, #navi ul.children {
        font-weight: bold;
        margin: 0;
        position: absolute;
        z-index: 8999;
        border-radius: 3px;
        border: none;
        min-width: initial;
        width: initial;
        display: block;
    }
    #navi li:hover > ul.sub-menu > li, #navi li:hover > ul.children > li {
        overflow: visible;
        height: 37px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    #navi li ul.sub-menu li, #navi li ul.children li {
        position: relative;
        overflow: hidden;
        height: 0;
        transition: 0.2s;
    }
    #navi li ul.sub-menu li a {
        color: #f7f7f7;
    }
    #navi li ul.sub-menu li a, #navi li ul.children li a {
        display: block;
        width: 240px;
    }
    #navi li ul.sub-menu li ul, .nav li ul.children li ul {
        top: 0;
        left: 100%;
        position: absolute;
    }
}
@media only screen and (min-width: 1166px) {
    header {
        margin: 1em 0;
    }
    #header-in {
        min-height: 55px;
        width: 1166px;
    }
    #navi ul.menu > li > a {
        display: block;
        text-decoration: none;
        line-height: 1.3;
        padding: 15px 1.8em 7px;
    }
}

カスタマイズまとめ

今回のカスタマイズにより、ナビゲーションメニューのデザインがSTORK（ストーク）テーマ風になっていると思います。
ソースもスタイルもなるべくSimplicity（シンプリシティー）テーマの流用でSTORK（ストーク）テーマに近づけるようにしていますが、それでもここまで近づくことができました。

次回は、まだ不格好でバランスが悪いナビゲーションメニュー下のヘッダー（背景部分）のデザインのカスタマイズをしていきます。

Simplicity（シンプリシティー）テーマの元々の機能やソースを流用して、STORK（ストーク）テーマに近づけているため、STORK（ストーク）テーマのソースをそのまま丸ごと利用したりはしておりませんので中身はまったく別物です。

STORK（ストーク）テーマの機能面などを利用したい方はSTORK（ストーク）テーマを購入してご利用ください。

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

カスタマイズ前

カスタマイズ後

第２回：ヘッダーソース追加編を読む

第４回：ヘッダー（背景）デザイン編を読む

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

スポンサーリンク

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

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

書いている人

SHUMiST

趣味人

書いている人”SHUMiST（シュミスト/趣味人）”は自他共に認める「割と極度に面倒くさがり」です。 よく人に「極度に面倒くさがりだよね。」とか「変な所で几帳面だよね。」とか自分はＯ型なんですけど「本当にＯ型？」とか言われることが多い。なぜ、WEB関係に手を出したのかが自分でも疑問。

Follow Me

カテゴリー

アーカイブ