【WordPress】サイドバー内のカテゴリを画像に置き換えましたっ!!

殺風景なサイトから徐々にカラフルになってきたんじゃないかと思います。

前回のヘッダー内メニューを画像に置き換えた(参照記事:【WordPress】ヘッダー内メニューを画像に置き換えましたっ!!)のに引き続き、カテゴリーも画像に置き換えて、この際、区分まで整理し直しました。

忘れないようにメモっておきます。

カテゴリー用の画像を作成しようっ!!

画像は僕が撮影した写真もしくはフリーの画像を使用させて頂きました。
僕のよく使うフリー画像のサイトはコチラ

20140530001
photoAC
(http://www.photo-ac.com/)

文字の画像への挿入は僕のお得意のパワポでの力技。ちょっとやり方が古風というかダサいですかね。

フォントは手書き風の”YS手書き”というフリーのフォントを使用しました。

画像の縦横比はパッと見た感じ綺麗に見えるように黄金比を採用してみました。縦横比の計算にはコチラのサイトが便利です。

20140530002Metallic Ratio
(http://ratio.kish.in.net/)

カテゴリの画像はこのような感じにしました。

サイドバーにリンク付の画像を挿入!!

画像ができましたら、後は貼るだけです。
僕の場合は「外観」→「ウィジット」→「メインサイドバー」にテキストを挿入して、そのテキスト内に下記のhtmlを書きました。

[html autolinks=”true”]
<a href=’リンク先のURL’ target=’_blank’>
<img src=’画像のURL’ alt=’カテゴリ名’ width=’横幅ピクセル数’ height=’高さピクセル数’>
</a>
[/html]

メインサイドバーのウィジットはこのように設定しました。

20140530003

これをカテゴリーごとに記載していけば完了。

まとめ

カテゴリがページ内で鮮やかに主張するようになりましたね。ジコマンの世界だぁ。