【WordPress】ヘッダー内メニューを画像に置き換えましたっ!!

コアな方ならきっとこの大変化に気付いたことでしょう。

そうです、ヘッダー内のメニューが今までは文字だったのですが、ちょっと華やかにしようと画像に置き換えてみました。

20140529101
(変更前)

20140529102
(変更後)

そんだけなのに、数時間もかかってしまったっ(汗)
変更前の方がよかったなんて言わないでくださいね。

せっかくなのでメモっておきまーす。

メニュー画像を作成しよう!!

メニューに使用したアイコンはコチラからダウンロードさせてもらいました。
ここのアイコンはどれもオシャレなので便利です。

20140529301
http://www.iconsdb.com/

このように検索窓にキーワードを入力すると目的のアイコンが見つかりますよ。

20140529302

そして、アイコンの色はコチラから指定が可能デス。

20140529302

オシャレな色の組み合わせはコチラを参考にさせてもらいました。

20140529004
http://www.colourlovers.com/palettes/most-loved/all-time/grid

美しい色を見ていると、心が安らぐなぁ。
んで、この色の組み合わせの5パターンをメニューのアイコンのカラーにしました。

20140529005

HEXの値をアイコンのカラーとして指定します。

さて、アイコンはこれで揃います。今回、僕はアイコンと文字のワンセットの画像をつくりました。

Menu_Home

これは泥臭く、パワポペイント、ピクチャマネージャーを駆使して作りました。
ピクチャマネージャーで色の明るさを編集しました。

編集後のRGB値はペイントから調べることができるので、文字の色も同色にすることができます。
(参考記事:http://q.hatena.ne.jp/1223516461

フォントはアップルのサイトのフォントになるべく近いM+というフリーのフォントを使用しています。

メニューに画像を挿入しようっ!!

コチラの記事(WordPressのグローバルナビ(navi)を画像に置き換える方法)の通りやると、すぐできました。

20140529304
http://kappamigo.com/wp_chukyu/navi_gazou/

まとめ

画像さえ用意できれば作業はすぐです。
僕はこの画像をアレコレといろいろなパターンを作成してたので時間を食ってしまいました。