アイコンフォントは画像を使わずにアイコンを表示することができます。フォントなので大きさや色をフォントと同じように調整できてとても便利です。このblogの小見出しの頭に出ている顔のマークもアイコンフォントです。
今回はアイコンフォントを使ってメニューの頭にアイコンを表示して、メニューをよりわかりやすくしてみました(^^)/。その方法について書きます。
簡単に使えるアイコンフォント Font Awesome
アイコンフォントは Font Awesome(フォントオーサム) を使います。
http://fortawesome.github.io/Font-Awesome/
以前Font Awesomeについて書いた記事はこちら↓
「fontawesomeで簡単にかっこいいアイコンを使おう！」
「twentyfourteenのh2スタイルにfontawesomeのアイコンを追加する方法」
Font Awesomeで簡単にたくさんのアイコンを使うことができます。
小見出しに出ているこのマーク もFont Awesomeのフォントで表示しています。
Font Awesomeを使えるようにする
Font Awesomeを使えるようにするには「CSSを直リンクする」もしくは「フォントをダウンロードして利用する」の2通りの方法があります。以前書いたblogでは「CSSを直リンクする」方法を書いたので、今回は「フォントをダウンロードして利用する」場合の方法を書きます。
Download をクリック
この画面が出るので(一時的なものかもしれません) Download をクリック
font-awesome-4.4.0.zip(2015/11/20現在) というファイルがダウンロードされます。4.4.0はバージョンなので落とす時期によって変わります。以下同じです。
zipファイルを解凍すると、font-awesome-4.4.0 というフォルダができます。
このフォルダを使っている子テーマに置きます。
テーマにCSSをリンクする方法については、
[WP]WordPressのfunctions.phpでCSSの読み込みを管理・制御する方法
こちらを参考にさせていただきました(^^)/。ありがとうございます。
子テーマのfunctions.phpに
function register_stylesheet() {
// 一括でスタイルシートを登録しておく
wp_register_style('common', get_bloginfo('stylesheet_directory').'/font-awesome-4.4.0/css/font-awesome.css', array(), null, 'all');
}
function load_stylesheet() {
// スタイルシート登録関数を実行させる
register_stylesheet();
// 全ページ共通CSS
wp_enqueue_style('common');
}
add_action('wp_enqueue_scripts', 'load_stylesheet');
この記述を追加します。register_stylesheet というfunctionsで先ほど子テーマに置いた Font AwesomeのCSS を指定して、add_action のタイミングでload_stylesheet というfunctionで先ほど指定したCSSを読み込むという内容になっています。
これで Font Awesome が使えるようになりました。
メニューにアイコンフォントを追加する
変更前のメニューは
こんな感じです。このそれぞれのメニューの頭にアイコンフォントを付けたいと思います。
それぞれのメニューに合ったアイコンを探します。Font Awesome のサイトの Icons をクリックします。すると、
アイコンがすべてこのページで表示されます。この一覧からメニューに合うようなアイコンを見つけます。
メニューの一番左は WordPress なのでちょうどアイコンがありました。
クリックします。
このアイコンのページが表示されて、赤枠で囲った部分にこのマークを出すためのコードが表示されますのでコピーしておきます。
投稿などで
<i class="fa fa-wordpress"></i>
このコードを貼り付けると →→→
こんな感じにアイコンが表示されます(^^)/
これをメニューの頭に付けたいと思います。
ダッシュボード 外観＞メニュー をクリック
メニュー構造 の WordPressの ▼ をクリックして
編集画面にします。ここで、
先ほどコピーしたアイコンフォントのコードを貼り付けます。
メニューを保存 をクリックして、表画面を確認します。
メニューにアイコンが表示されました(^^)/。ただちょっと、アイコンとメニューの文字がくっつきすぎな気がするので、
アイコンフォントの後に 半角スペース を入れてみました。再度表示すると、
若干空きが出て、これでいいかんじです。のこりのメニューにもなんとか合うフォントを見つけて追加してみました。
全てのメニューにアイコンフォントが表示されました(^^)/。文字だけの時より視認性が上がったと思います♪
CSSを直リンクしているときに注意すること
このblogでは子テーマの header.php にCDNのリンクを記述して直リンクする方法でアイコンフォントを使っていました。
今回、メニューにアイコンフォントを付け加えて確認していたとき
2カ所アイコンフォントが表示されていませんでした。これは直リンクしているバージョンが 4.1.0 だったためのようです。おそらく表示されていないアイコンフォントはそれ以降に追加されたものと思われます。
ということで新しい直リンクに置き換えました。最新の直リンクは、
Font Awesome のサイトの Get Started をクリックして、
赤枠部分に表示されている、
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
が本日(2015/11/20)現在の最新のリンクです。これを私の場合はheader.phpに以前のリンクに置き換えて、ペーストしました。
子テーマのどのファイルを使うかについては、<head> </head> タグの記述のあるファイル(無い場合は親テーマからコピー)を探します。そして</head>の前にこのリンクを貼り付けます。
ダウンロードした場合も最新のアイコンを使いたければ再度ダウンロードすれば使えるようになります。そのことを考えると子テーマにコピーするときフォルダのバージョン番号は削除しておいた方がfunctins.phpをバージョン毎に修正しなくて良いので、良いかもしれません。
[amazon_searchlink]
コメント