８月にブログのカテゴリをテコ入れした際、親カテゴリと子カテゴリで整理しました。
「親カテゴリの見た目をもう少し子カテゴリと差別化したい」と考え、ナビゲーションメニューにアイコンをつけてみました。
自分への備忘録としての意味も含め、記事にしています。
今回の記事は私のようなブログ初心者の方向けの記事になります。
どのサイトのアイコンを使うか？
パッと思い浮かんだのFont AwesomeとGoogle Fontsの2つでした。
実際にサイトに遷移して試してみた結果「Google Fontsの方が私には合っていそう」という結論に至りました。
Font Awesome
「ワードプレスのアイコンと言えばFont Awesome！」という方もひと昔前は多かったのではないでしょうか。
私は未だにその口でした。
私のブログテーマはわいひら様が作成されたCocoonを使用していますが、デフォルトの状態ではアイコンはFont Awesomeが使用されています。
今回も、Font Awesomeをナビゲーションメニューのアイコンに実装しようと考えたのですが、有料アイコンの数が多い印象を受けました。
「今は無料アイコンだと思って実装したアイコンが気づかぬうちに有料化したらどうしよう」と感じ、実装はいったん保留にしました。
Google Fonts
一方、Google Fontsはどうでしょうか？
こちらは商用利用可能、かつ無料で使用でき、アイコンの種類も充実しています。
Font Awesomeの無料アイコンだけを見るより、Google Fontsを選択した方がサイトの見た目を改善できそうに感じました。
早速、Google Fontsのアイコンをナビゲーションメニューに表示させるべく、作業に取りかかりました。
Google Fontsで使用アイコンの選択
Google Fontsの公式サイトへジャンプし、「Icons」と書かれたタブをクリックします。
Variable icon fontとStatic icon fontのどちらを使うか
Google Fontsはアイコンの形状をカスタマイズできる機能が備わっています。
カスタマイズせずに、静的なアイコンを使うことも可能。
コピーする前に、アイコンを塗りつぶしたり、線の太さを変えたりとカスタマイズできます。
変更可能な項目はFill（オンオフのみ）、Weight、Grade、Optical Sizeの4つ。
調整後の数値がCSSとして出力されます。
以下、右下が出力後のCSS。
カスタマイズで設定した数値が反映されていますね。
数値の設定をやり直したい場合は、画面左上にある「Filters」のボタンを押下しましょう。
Variable icon font（可変アイコンフォント）
headタグにスタイルシートリクエストを追加し、CSSを使用してアイコンに現在の可変軸設定を追加する
Static icon font（静的アイコンフォント）
headタグにスタイルシートリクエストを追加し、アイコンのデフォルト設定を可変フォントの代わりに静的フォントとして読み込む
【実装手順上の違い】
Variable icon fontはアイコンのカスタマイズとCSSへの記述が必要
Cocoonへの適用
私は静的なアイコンフォントで事足りそうだと思ったので、今回はそちらの導入手順をご紹介します。
Google Fonts外部スタイルシートの読み込み設定
まず、画面右下に表示されている<link>タグのコードをコピーします。
続いてコピーしたタグをCocoon子テーマのhead-insert.phpへ貼り付け。
これでGoogle Fontsのスタイルシートを読み込むことができるようになりました。
メニュー別のアイコン設定
使用したいフォントを選択していることを確認し、Google Fontsの画面右スライドインメニュー下部より、<span>で囲まれたタグをコピー。
ワードプレスの管理画面より、外観→メニューと進み、編集したいメニューを選択。
アイコンを付けたいメニューのナビゲーションラベルで、メニュー名の前にコードをペースト。
当ブログの場合、コードをペーストした後、半角スペースを入れてからメニュー名を入力しました。
詳しい方はCSSで数値を指定しているのではないかと思います。
蛇足ですが、ナビゲーションラベル下にある「説明」に文字を入れると「アイコン+メニュー名・その下に説明に入力した文字」という形で表示されます。
説明の入力欄が表示されていない場合は、画面右上の表示オプションを開きましょう。
チェックボックスを修正すれば入力欄が表示されます。
おわりに
Google Fontsはアイコンをカスタマイズしたい方や、急な有料プラン変更を回避したい方にお勧めできます。
知名度の面からも安心して利用できますしね。
ナビゲーションメニュー変更は好みの問題もあると思いますが、視認性があがりますし、デザイン面からもサイトがちょっぴりかっこよくなった気がしました。
「ブログタイトルに「おっさん」と入れてるやつが何言ってんの」という話ですが笑。
最後まで読んでいただき、ありがとうございました！
コメント