酒屋ブロガーカズユキです
今回は主に、グローバルナビについて
Simplicity(シンプリシティ)2
カスタマイズの続きです。
サイトに訪れてくれた方というのは
良いも悪いも、もれなくお客さん!
価値を提供する側としては
しっかりナビゲーションして
差し上げなければなりません!
※グローバルナビとは、ヘッダー下の
いわゆる「メニュー」のことです。
訪問者さんの道しるべとも言える
グローバルナビですので、ある程度目立たせつつ
でもシンプルに使いやすくしておきたいもの。
おすすめのスキンは
オレンジメニュー(リンクホバーが魅力的)
ホワイティ(透けるので、背景画像に凝った方向け
あと、ビジネスメニューなども
見た目もスタイリッシュでシンプルです。
とにかく、実際に触ってみるのが一番早い。
では早速、取りかかってみましょう。
目次
シンプリシティ2おすすめカスタマイズ*オレンジメニューでカスタム
ではまず、
「外観」から
「カスタマイズ」を選択して
グローバルナビの背景や
文字の色を変更していきます。
今回は「スキン」から
「オレンジメニュー」を
選択して進めていこうと思います。
この「スキン」から
「オレンジメニュー」を
選んだだけの状態でも、
ご自身のサイトカラーによっては
しっくりくる方も中にはいるかもしれません。
色合い等、差し支えなければ、全然
そのままの状態で完了しても構いませんが、
もし、カラーの変更が必要であれば
次の手順でどうぞ~
オレンジメニューをカラーリング
「スキン」から
「オレンジメニュー」を選択した上で、
まず「色」のボタンを選びます。
出てきたメニューの中から、
「グローバルナビ色」
「グローバルナビリンク色」
「グローバルナビリンクホバー色」
それぞれに色の設定を行っていきます。
各色デフォルト(初期設定値)で
見栄えするようになってはいますが、
ご自身のサイトに合わせて、
好みのカラーに仕上げてみてください。
参考までに、下記のサイトから
ウェブカラーの一覧が閲覧できます。
横幅いっぱいにする
では色が決定しましたら、
最後に「ヘッダー」から
「グローバルナビを横幅いっぱいにする」
を選択すれば、
違和感なく仕上がります。
これで基本的なカスタマイズは完了です。
今回は「オレンジメニュー」を選択して
進めてみましたが、冒頭でもお伝えした様に
「スキン」を色々見ていただくと
様々な種類が並んでいるかと思います。
それぞれに特徴がありますので、
ご自身の好みのモノを選んで
好きにカスタマイズされても
全く問題ありませんのでご自由に♪
シンプリシティ2おすすめカスタマイズ*アイコンで装飾
では、グローバルナビにアイコンをつける作業です。
最近では、よく見かけるようになった
「アイコンフォント(WEBアイコン)」を使って
グローバルナビを装飾してみましょう。
画像を用意しなくても手軽に使えて便利です。
Font Awesome 4 Menusのインストール
まずはプラグインのインストールです。
「プラグイン→新規追加」から
「Font Awesome 4 Menus」と検索して
インストールを行ってください。
インストールが終了したら有効化します。
CSSクラスを有効化
次にメニュー設定の
表示オプションの変更を行います。
表示オプションを変更するには、
「外観→メニュー」に移動して
「表示オプション」ボタンをクリック。
3番の表示オプションをクリックすると
「オプション」が表示されるので、
「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通話も受け付けてます♪
お気軽にお問い合わせください♪
酒屋ブロガー
一幸(カズユキ)でした。
お気に召しましたら、ぜひ記念に
下記ボタンから応援下さると励みになります♪
最後までお付き合い、ありがとうございました!