イントロダクション
今日はヘッダーのメニューに手を加える事になりました。
↑現在のヘッダーはこんな感じなんですが、メニュー部分の文字の前にアイコンを付与して見栄えを良くしたいそうなんですよね。
またまた細かい設定ですが、これがあるのとないのとでは視覚的効果が違うようです。
ｴｰ､ﾎﾝﾄﾃﾞｽｶ？
正直、かなり懐疑的ですが頑張ってやっていきましょう。（遠い目）
ヘッダーメニューにアイコンを付与する
さて。アイコンの追加方法ですが、今回はCSSの追記をしなくてもいいとの事。
ここ数日、あの訳の解らない文字列を前にして精神的に疲弊してましたから物凄く嬉しいです。（……まあ、大半はコピー＆ペーストでしたが。）
で、アイコンの付与方法ですが、CSS追記に関しては↑上記サイト様を参考にさせて頂きました。
とりあえずCocoonには既に標準機能で『Font Awesome』が入っているそうなので、使用するアイコンに関しては↑上記サイト様から使いたいものを選んでコードをコピペする事になるそうです。
<i class="アイコンのコード fa-fw fa-lg"></i>グローバルメニューの名前具体的には↑上記のような感じでダッシュボードから『外観』→『メニュー』を選択し、アイコンを付与したい所の『ナビゲーションラベル』の欄にコードを入力すると追記されるようです。
※ちなみに『fa-fw』というのはアイコンと文字との隙間を意味し、『fa-lg』というのはアイコンのサイズを表しているそうですので、変えたい人は適当に調べて変更してくださいね。
変更後のヘッダーメニュー
と、いう事でアイコンを付与した後のヘッダーメニューです。
赤丸で囲んだ4ヵ所がそれですね。
確かに前の文字だけのメニューよりは見栄えが良いです。
何も解らない状態から1時間もかからずに変更できたので、お薦めのカスタマイズですよ。
今回使用したコード
一応、今回私の方で使用したコードをバックアップ的な意味を込めて記載しておきます。
<i class="fa fa-home fa-fw fa-lg"></i>TOP
<i class="fa fa-user-circle fa-fw fa-lg"></i>Profile
<i class="fa fa-globe fa-fw fa-lg"></i>企画概要
<i class="fa fa-envelope fa-fw fa-lg"></i>お問い合わせ上から順に『TOP』、『Profile』、『企画概要』、『お問い合わせ』です。
今回の経費＆記事作成時間
今回の記事作成時間：約2時間
記事作成時間：約2時間
（CSS追記作業込み）
良かった。前回までのCSSの追記やらと違って特に問題なく終わりました。
ここ数日、初回でエラーが出てつまずくのはデフォルト状態でしたからね。
では、恒例の累計出費＆記事作成時間を発表して今回は終わりにしましょう。
最後まで読んでくださった方はありがとうございました。
総制作時間：約71時間
累計支出：17,080円
※フォーマット統一用のリライト作業済みの記事です。