酒屋ブロガーカズユキです
今回は主に、グローバルナビについて
Simplicity（シンプリシティ）２
カスタマイズの続きです。
サイトに訪れてくれた方というのは
良いも悪いも、もれなくお客さん！
価値を提供する側としては
しっかりナビゲーションして
差し上げなければなりません！
※グローバルナビとは、ヘッダー下の
いわゆる「メニュー」のことです。
訪問者さんの道しるべとも言える
グローバルナビですので、ある程度目立たせつつ
でもシンプルに使いやすくしておきたいもの。
おすすめのスキンは
オレンジメニュー（リンクホバーが魅力的）
ホワイティ（透けるので、背景画像に凝った方向け
あと、ビジネスメニューなども
見た目もスタイリッシュでシンプルです。
とにかく、実際に触ってみるのが一番早い。
では早速、取りかかってみましょう。
目次
シンプリシティ2おすすめカスタマイズ＊オレンジメニューでカスタム
ではまず、
「外観」から
「カスタマイズ」を選択して
グローバルナビの背景や
文字の色を変更していきます。
今回は「スキン」から
「オレンジメニュー」を
選択して進めていこうと思います。
この「スキン」から
「オレンジメニュー」を
選んだだけの状態でも、
ご自身のサイトカラーによっては
しっくりくる方も中にはいるかもしれません。
色合い等、差し支えなければ、全然
そのままの状態で完了しても構いませんが、
もし、カラーの変更が必要であれば
次の手順でどうぞ～
オレンジメニューをカラーリング
「スキン」から
「オレンジメニュー」を選択した上で、
まず「色」のボタンを選びます。
出てきたメニューの中から、
「グローバルナビ色」
「グローバルナビリンク色」
「グローバルナビリンクホバー色」
それぞれに色の設定を行っていきます。
各色デフォルト（初期設定値）で
見栄えするようになってはいますが、
ご自身のサイトに合わせて、
好みのカラーに仕上げてみてください。
参考までに、下記のサイトから
ウェブカラーの一覧が閲覧できます。
横幅いっぱいにする
では色が決定しましたら、
最後に「ヘッダー」から
「グローバルナビを横幅いっぱいにする」
を選択すれば、
違和感なく仕上がります。
これで基本的なカスタマイズは完了です。
今回は「オレンジメニュー」を選択して
進めてみましたが、冒頭でもお伝えした様に
「スキン」を色々見ていただくと
様々な種類が並んでいるかと思います。
それぞれに特徴がありますので、
ご自身の好みのモノを選んで
好きにカスタマイズされても
全く問題ありませんのでご自由に♪
シンプリシティ2おすすめカスタマイズ＊アイコンで装飾
では、グローバルナビにアイコンをつける作業です。
最近では、よく見かけるようになった
「アイコンフォント（WEBアイコン）」を使って
グローバルナビを装飾してみましょう。
画像を用意しなくても手軽に使えて便利です。
Font Awesome 4 Menusのインストール
まずはプラグインのインストールです。
「プラグイン→新規追加」から
「Font Awesome 4 Menus」と検索して
インストールを行ってください。
インストールが終了したら有効化します。
CSSクラスを有効化
次にメニュー設定の
表示オプションの変更を行います。
表示オプションを変更するには、
「外観→メニュー」に移動して
「表示オプション」ボタンをクリック。
３番の表示オプションをクリックすると
「オプション」が表示されるので、
「CSSクラス」にチェックして完了です。
メニューにFont Awesomeクラスを追加
上記させてもらった設定を行うと、
ナビゲーションの個々のメニューに
「CSS class (オプション)」という
設定項目が追加されているかと思います。
ここにFont AwesomeのCSSクラスを記入します。
Font AwesomeのCSSクラスを取得するには、
Font Awesome Iconsから探して取得します。
例えば、ホームアイコンを取得するには、
まず目当てのアイコンを探し出します。
CSSクラス名を表示するには
使いたいアイコンをクリックすると
コードが表示されます。
この場合だと fa-home の部分になります。
この fa-home を、「CSS class (オプション)」に
入力すれば、アイコンが表示されます。
Font Awesome Iconsからアイコンを探す作業が
最初の内は面倒に感じるかも知れませんが、
慣れれば簡単に挿入できますのでご安心を。
グローバルナビを自分なりに装飾して
ぜひ見た目の変化を楽しんでみて下さい。
カスタマイズはほどほどに
グローバルナビはトップページだけでなく
本文ページなどにも表示されるものですので
自分らしさを発揮できる場所ではあります。
ただ、あまりごちゃごちゃせず、ある程度
シンプルさを保ちつつ、綺麗に仕上げてみましょう！
あくまでも、お客さんの誘導がメインですので。
特にスマホ版だと、表示されないものもあったり
カスタマイズにあまり時間をかけるよりは、
簡単なものだけパパッと済まして、
先に記事を書くことを優先された方が良いです。
カスタマイズは後からいくらでも出来ますしね♪
シンプリシティ2おすすめカスタマイズ＊CSSコード：予告編（貼り付け位置）
次回の記事からは「CSSコード」を使って、更に
グローバルナビをカスタムしてみたいと思います。
（基本コピペなので、使うと言うほど複雑じゃない）
今回は予告編として「CSSコード」を
貼り付ける位置だけでも覚えておいてください。
基本的に、貼り付けるコードとは、
Simplicity2の子テーマ「style.css」の
一番下の部分に貼りつけることになります。
※上記画面「style.css」は
ダッシュボード画面から
「カスタマイズ」→「テーマの編集」で
選択していくと出てきます。
ネット上で説明してくれている
CSSのカスタマイズ方法も含め、全般的に
特に指定が無い場合、上の画像のように
スタイルシートの最下部に、どんどん
コードを追加していくという形で
カスタマイズが成されていく事になります。
活字で書くと、何だかややこしそうに見えますが
基本コピペなので、特に知識も必要なく
誰でも簡単にカスタマイズできますのでご安心を。
では、次回から実際にCSSコードを貼り付けて
更なるカスタマイズに着手してみましょう！
では今回はこの辺で
ありがとうございました
お問い合わせ＆メルマガ
「ブログではちょっと・・・」
という内容に関しては
僕のメルマガから発信していく予定です。
裏情報も混じるかも知れませんので
登録しておいて損はないかと思います。
（不定期ですし、やかましくはしません）
※万が一お気に召さなければ解除して
全力でゴミ箱に投げ捨ててやって下さい！
現状、稼げてる人なんて
みんな結構どん底味わってたりしますよ♪
ネットビジネスというのは
少しの努力さえあれば、
必ず結果の出るビジネスです。
諦めさえしなければ
失敗は永遠にやってきません！
今後とも、よろしくお願いいたします。
また、ご質問はこちらから
必要であればSkype通話も受け付けてます♪
お気軽にお問い合わせください♪
酒屋ブロガー
一幸（カズユキ）でした。
お気に召しましたら、ぜひ記念に
下記ボタンから応援下さると励みになります♪
最後までお付き合い、ありがとうございました！
