シンプリシティ2おすすめカスタマイズ②「グローバルナビ」

酒屋ブロガーカズユキです

今回は主に、グローバルナビについて

Simplicity(シンプリシティ)2

カスタマイズの続きです。

サイトに訪れてくれた方というのは

良いも悪いも、もれなくお客さん!

価値を提供する側としては

しっかりナビゲーションして

差し上げなければなりません!

グローバルナビとは、ヘッダー下の

いわゆる「メニュー」のことです。

訪問者さんの道しるべとも言える

グローバルナビですので、ある程度目立たせつつ

でもシンプルに使いやすくしておきたいもの。

おすすめのスキンは

オレンジメニュー(リンクホバーが魅力的)

ホワイティ(透けるので、背景画像に凝った方向け

あと、ビジネスメニューなども

見た目もスタイリッシュでシンプルです。

とにかく、実際に触ってみるのが一番早い。

では早速、取りかかってみましょう。

シンプリシティ2おすすめカスタマイズ*オレンジメニューでカスタム

ではまず、

「外観」から

「カスタマイズ」を選択して

グローバルナビの背景や

文字の色を変更していきます。

今回は「スキン」から

「オレンジメニュー」

選択して進めていこうと思います。

この「スキン」から

「オレンジメニュー」

選んだだけの状態でも、

ご自身のサイトカラーによっては

しっくりくる方も中にはいるかもしれません。

色合い等、差し支えなければ、全然

そのままの状態で完了しても構いませんが、

もし、カラーの変更が必要であれば

次の手順でどうぞ~

オレンジメニューをカラーリング

「スキン」から

「オレンジメニュー」を選択した上で、

まず「色」のボタンを選びます。

出てきたメニューの中から、

「グローバルナビ色」

「グローバルナビリンク色」

「グローバルナビリンクホバー色」

それぞれに色の設定を行っていきます。

各色デフォルト(初期設定値)で

見栄えするようになってはいますが、

ご自身のサイトに合わせて、

好みのカラーに仕上げてみてください。

参考までに、下記のサイトから

ウェブカラーの一覧が閲覧できます。

⇒原色大辞典:ウェブカラー色見本

横幅いっぱいにする

では色が決定しましたら、

最後に「ヘッダー」から

「グローバルナビを横幅いっぱいにする」

を選択すれば、

違和感なく仕上がります。

これで基本的なカスタマイズは完了です。

今回は「オレンジメニュー」を選択して

進めてみましたが、冒頭でもお伝えした様に

「スキン」を色々見ていただくと

様々な種類が並んでいるかと思います。

それぞれに特徴がありますので、

ご自身の好みのモノを選んで

好きにカスタマイズされても

全く問題ありませんのでご自由に♪

シンプリシティ2おすすめカスタマイズ*アイコンで装飾

では、グローバルナビにアイコンをつける作業です。

最近では、よく見かけるようになった

アイコンフォント(WEBアイコン)を使って

グローバルナビを装飾してみましょう。

画像を用意しなくても手軽に使えて便利です。

Font Awesome 4 Menusのインストール

まずはプラグインのインストールです。

プラグイン→新規追加から

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通話も受け付けてます♪

お気軽にお問い合わせください♪

酒屋ブロガー

一幸(カズユキ)でした。

お気に召しましたら、ぜひ記念に

下記ボタンから応援下さると励みになります♪

最後までお付き合い、ありがとうございました!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る