Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonのグローバルナビメニューにアイコンフォントとカスタマイズ

スポンサーリンク
カスタマイズ

Cocoonのメニューは、補足説明を出せる機能があります。グローバルナビメニューの設定方法とアイコンフォントを表示する方法、更に少しデザインカスタマイズもしてみます。

 

スポンサーリンク

グローバルナビの設定

グローバルナビの背景色と文字色は以下から任意の色に設定出来ます。

Cocoon設定ヘッダータブ

Cocoon設定

 

Cocoon設定・ヘッダー

 

グローバルナビに関する設定は、下の方にあります。

グローバルナビの設定

設定項目
  • グローバルナビメニューの色・文字色
  • グローバルナビメニュー・サブメニューの幅

 

メニューを作成する

メニュー自体の作成方法が不明な場合は以下をご覧ください。

 

 

補足説明を表示する

グローバルナビの設定

グローバルナビに補足説明を表示する方法は以下をご覧ください。

 

 

アイコンフォントを表示する

グローバルナビの設定

メニューの設定で「ナビゲーションラベル」の欄にアイコンフォントコードを入れるだけで表示出来ます。

 

アイコンフォントを選ぶ

Font Awesomeフリーフォント

上記リンクより、使いたいフォントを選びます。

Ver.4.7をお使いの場合は以下をご覧ください

Font Awesome Ver.4.7

  4.7のアイコンフォント検索&コピペにすごく便利なサイト
FontAwesome4.7のアイコンをクリックでコピーできる一覧表【日本語検索対応】
WebアイコンフォントFontAwesome4.7.0のコピペが面倒だったのでお目当てのアイコンをクリックでコピー出来るようにした一覧表です。自分用に作った物ですが頑張ったので公開。簡易的な検索とか絞り込みとかも出来ます。2019-07-0

 

 

CocoonでのFont Awesomeのバージョンは以下で確認出来ます。

Cocoon設定 → 全体タブ

Font Awesomeのバージョン

 

アイコン選択

 

使いたいアイコンをクリックします。

 

Font Awesome

アイコン詳細画面が開きます

 

 

上にコードが出ていますのでクリックするとコピー出来ます

 

Font Awesome

 

よく使うアイコンなどは以下からもコードのコピー可能ですのでご利用下さい。

よく使うアイコンフォントのコード74選まとめでサクっとコピー | 綾糸.net
    「Font Awesome」のフリーフォントです。 なんとフリーのものだけで1,500もあるので、よく使う、または使えそうなアイコンフォントのコードをま...
SNSなどのカラーコードとアイコンフォントまとめ | 綾糸.net
  Twitter・Facebook・LINE・Instagram・YouTube・Tumblr・LinkedIn・はてなブックマーク・feedly・RSS・mixi・S...

 

アイコンフォントをセット

 例 
<i class="fas fa-home"> </i> Home

 

グローバルナビの設定

 

アイコンやラベルの色を変えたい場合

アイコンフォントだけを色分けしたり

グローバルナビのアイコンフォント

ラベルにも色分けする事も出来ます。

グローバルナビのアイコンフォント

 

この方法は、以下にまとめています。

簡単!グローバルメニューのアイコンやラベルを色分けする
グローバルナビメニューには、簡単にアイコンフォントを設定できますが、そのアイコンフォントの色を変更したり、ラベル(メニュー)ごとに色分けする方法についてです。 Cocoonに限らず、FontAwes...

 

デザインカスタマイズ

ホバー時の色やアクション、枠線を付けるなどのデザインカスタマイズは簡単なCSS追記のみで可能です。

 

CSS追記は以下のいずれかから行って下さい。

外観→カスタマイズ追加CSS

外観→テーマエディターstyle.css

 

 

ホバー時に色を変え少し浮かび上がる

グローバルナビのカスタマイズ

CSS

/*ホバー時*/
#navi .navi-in a:hover {
background-color: #c1c78d; /*背景色*/
-webkit-transform: translateY(-2px);
-ms-transform: translateY(-2px);
transform: translateY(-2px);
box-shadow: -2px -2px 1px #dce0b1; /*影の色・上下左右のずれ*/
color: #5d5855; /*文字色*/
}

 

box-shadowは2~4つの値で定義します。

  1. 水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動
  2. 垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動
  3. ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなります
  4. 広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小

 

上記CSSでの設定では(box-shadow: -2px -2px 1px)

左へ2px、上へ2px、ぼかし1px となります。

 

表示しているページの色を変える

グローバルナビのカスタマイズ

 

表示しているカレントページの背景色を変え、アンダーラインを出しています。

CSS

/*カレントメニュー*/
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
border-bottom: 3px solid #bcfa89; /*下線色*/
background: #5d5855; /*背景色*/
}
.menu-header .current-menu-item .item-label,
.menu-header .current-post-item .item-label,
.menu-header .current-menu-ancestor .item-label,
.menu-header .current-post-ancestor .item-label,
.menu-header .menu-item .item-label:hover {
color:#fff; /*文字色*/
}

 

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

 

コメント

タイトルとURLをコピーしました