コアな方ならきっとこの大変化に気付いたことでしょう。
そうです、ヘッダー内のメニューが今までは文字だったのですが、ちょっと華やかにしようと画像に置き換えてみました。
そんだけなのに、数時間もかかってしまったっ(汗)
変更前の方がよかったなんて言わないでくださいね。
せっかくなのでメモっておきまーす。
メニュー画像を作成しよう!!
メニューに使用したアイコンはコチラからダウンロードさせてもらいました。
ここのアイコンはどれもオシャレなので便利です。
このように検索窓にキーワードを入力すると目的のアイコンが見つかりますよ。
そして、アイコンの色はコチラから指定が可能デス。
オシャレな色の組み合わせはコチラを参考にさせてもらいました。
http://www.colourlovers.com/palettes/most-loved/all-time/grid
美しい色を見ていると、心が安らぐなぁ。
んで、この色の組み合わせの5パターンをメニューのアイコンのカラーにしました。
HEXの値をアイコンのカラーとして指定します。
さて、アイコンはこれで揃います。今回、僕はアイコンと文字のワンセットの画像をつくりました。
これは泥臭く、パワポ、ペイント、ピクチャマネージャーを駆使して作りました。
ピクチャマネージャーで色の明るさを編集しました。
編集後のRGB値はペイントから調べることができるので、文字の色も同色にすることができます。
(参考記事:http://q.hatena.ne.jp/1223516461)
フォントはアップルのサイトのフォントになるべく近いM+というフリーのフォントを使用しています。
メニューに画像を挿入しようっ!!
コチラの記事(WordPressのグローバルナビ(navi)を画像に置き換える方法)の通りやると、すぐできました。
http://kappamigo.com/wp_chukyu/navi_gazou/
まとめ
画像さえ用意できれば作業はすぐです。
僕はこの画像をアレコレといろいろなパターンを作成してたので時間を食ってしまいました。