グローバルメニュー内のアイコンを設定している人をよく見かけますよね。しかし、こんなのどうやってやるんだ！って人も多いでしょう。この記事の通りにすればコピーするだけで3分くらいで作れてしまいます。
アイコンを変更してどうするのか？
文字だけでなく、視覚でも認識してもらえるようになります。それ以外にも、ただ単にカッコイイという理由もあります。プロフェッショナル感が漂いますよね。
またこの知識はメニュー以外にもアイコンを付けたい時に役立ちます。
またアピールエリアの活用も有効でしょう。
画像でアイコンの変更を紹介します
ワードプレスへログインして、「外観→メニュー」をクリックして、メニュー設定の画面へ移動します。
今回はグローバルメニューの設定をしていきます。「メニュー項目を追加」にある「カスタムリンク」をクリックします。
今回の例として、ホームページへ移動をしてもらうアイコンを作ります。
カスタムリンクをクリックすると、カスタムリンクを設定できるようになるので「URL」に自分のホームページのURLを貼り付けます。
リンク文字列に関しては、無記入でこのまま「メニューに追加」ボタンをクリックします。
そうするとメニュー構造にナビゲーションラベルの設定ができるようになるのでココにアイコンを貼り付けていきます。
まずFontAwesomeへ移動します。FontAwesomeはcocoon公式でもアイコンを作る際にオススメされています。世界でも代表的な無料アイコンサイトです。
クリックする下記の画面へ移動します。日本語訳にしましたが、実際は英語のサイトになりますが検索の場所だけで覚えてください↓
検索スペースに自分の使いたいアイコン名で検索します。
今回は「home」と検索してみます。
検索した結果homeのアイコンが見つかりました。これ以外にも色々な種類のhomeがありましたが、これを選択しました。
そして下にコードをそのままコピーします。難しそうですが、思考停止でこの手順でします。
コピーしたコードをナビゲーションラベルに貼り付けます。
コードの最後にある</i>の後ろに使いたい名前を入力します。日本語でも英語でも大丈夫です。私は「home」と入力しました。
全て設定したので自分トップ―ページを確認してみます。私のサイトはこのように家のマークが付きました。
1度できると簡単です
アイコン？htmlコード?と拒否反応を起こさずにこの手順でやりましょう。
アイコン画像は視覚にうったえられるので有効的です。またブログ内で画像を使ってない人は下記をチェックしてみましょう。
FontAwesomeには、他にもたくさんのアイコンがあって色々カスタマイズができて楽しいですよ。このカスタムリンクでURLを作って、アイコンのコードを貼り付ける知識は他のページを作る時に役立ちます。
必須の知識です！
コメント