cocoon*ヘッダーメニューのアイコン下に文字を入れた話

こんにちは。

ヘッダーに置こうとしたメニューバー。
cocoonの機能を駆使してアイコンと、短い文字のキャプションを付けたかったのですが、アイコンが思ったところに入らない~!

というわけで、
少し調整してみました。

今回の目標

・アイコンを良い位置にもってくる
・アイコンの下に文字を入れる

 

こんな感じに仕上がります。(右上のメニュー)

 

 

スポンサーリンク

メニューにアイコンを入れる

メニューバー(グローバルナビ・ナビバー・ヘッダーメニュー)の設置方法が分からない!という方は、下記記事をご参考ください。

cocoonでトップページにメニューバーを設置する方法
こんにちは。 ようやくカテゴリー的なものが少し増えたのでトップページにメニューバーを設置しました。少ないですね(笑)けど設置したい!見栄えを良くしたい!ということでコンテンツ3つのメニューバーを設置したので今回はその方法です。 ...

 

COCOONのHPでも丁寧に説明されています。

グローバルナビのメニューを設定する方法
主にパソコンなどで表示されるグローバルナビメニューの設定方法です。サブキャプション機能で補足説明を入力することも可能です。

 

Font Awesomeを使用する

Font Awesomeを使ってアイコンを設置していきます。

使用したいアイコンをクリックし、コードを取得します。

 

<i class="fas fa-paper-plane"></i>

使用するのはクラス名なので

”fas fa-paper-plane”

をコピペします。
ダブルクォート ” ” は消してください。

 

クラス名をCSSクラス(オプション)に追加

Font AwesomeでコピーしたCSSクラス名(”fas fa-paper-plane”)を、メニュー設定に追加します。

 

設定の方法

・ダッシュボードを開く
・外観→カスタマイズ(メニュー)から、編集したいメニューを選択
・アイコンを付けたいメニューのCSSクラスにコピペする

CSSクラスと書いてあるテキストボックスに、使用したいアイコンのクラス名を入力します。

右画面はプレビューです。
アイコンとナビゲーションラベル(タイトル)が表示されました。(アイコンと文字がズレていますね。)

コンテンツ一つ一つに違うアイコンを設定することができます。

 

慌てないで

メニューの編集画面にCSSクラスや説明欄などのテキストボックスが見当たらない!!という方は、ヘルプ等を開きCSSや説明にチェックを入れてください。

 

キャプション(説明)を入れる

ナビゲーションラベルとアイコンのCSSクラスを入力しただけでは、プレビューの通り、表示がズレてしまっていました。

私の設定が悪いのかもしれません。ほか、見落としている便利な機能があるのかも…!

 

とはいえ、
キャプション(説明)に文字を入れると、いい感じでアイコンの下に文字が入りました。

 

↓外観のメニューからの設定画面はこんな感じです。

これまでの参考画像で載せている設定方法は
『外観→カスタマイズ』からメニューの編集をしていました。
そちらの方がプレビューを見ながら調整することができます。

キャプション(説明)を消す

せっかく表示したキャプションですが、
アイコンを真ん中にしたかっただけなので…

消します!

臭い物には蓋!の原理です。
世の中ほとんどの臭い物には蓋がされているので問題ありません。

CSSを追加する

外観→カスタマイズ→追加CSS
スタイルシートにCSSを追加していきます。

 

 

使用したCSS

.navi-in > ul .item-description{ visibility:hidden; }

 

キャプションを非表示にするCSSを追加してみました。
”要素を完全になくす”わけではなく、”ただ見えなくした”だけです。

 

メニュー名を細字にCustomize

ついでに、アイコンに影響されてかタイトルまで太字になっていたナビゲーションラベルを細字&小サイズにしてみました。

 

使用したCSS

.navi-in > ul .item-label{
 font-size:0.6em;
 font-weight:300;
 }

 

出来上がり

そんなこんなで、
臭い物には蓋をしながらなんとか出来上がりました。

アイコンの下に文字があるメニューバー!

他にもっと簡単で美しい方法があるのかもしれませんが
小さい物を作りたかったので、これで良しとしましょう。

 

おわり

 

 

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