Hatena::ブログ(Diary)

プログラミング雑記 このページをアンテナに追加 Twitter

2014-10-31 wordpressのメニューを画像付きメニューに変える このエントリーを含むブックマーク

WordPressって...

素人でも簡単に扱えると聞いたけど、ぶっとんで難しいですね。

特にBizVektor...全然分かりません。

市販の書籍では全力で推してたけど、カスタマイズしづらいと思う。

わざとカスタマイズしずらくしてる?とても素人には手が出せないテーマやと思う。

おすすめしない。。。

僕が今使ってるテーマは、「simone」です。

Wordpressのテーマ検索で適当に探してきました。



メニュー毎に画像を表示

f:id:Korsakov:20141031204442p:image:w640

ワードプレスの管理画面です。

メニュー管理画面で個別メニューにラベルを入力できます。

ラベルを入力する箇所にHTMLのdivタグを書いて下さい。

例:

 普通:ホーム

 改善後:<div class="hoge"></div>ホーム


テーマ編集からstyle.cssを編集

.hogeクラスを作って任意の画像を表示してみましょう。

.hoge {

width: 32px;

height: 32px;

margin: 0 auto;

background-repeat: no-repeat;

background-position: center;

background : url(./images/hoge_icon.png);

}

このようにすればurlで参照している画像を表示できます。

画像は予めサーバー側にアップロードしておきましょう!

width,heigthは画像サイズに合わせて調整して下さい。

トラックバック - http://d.hatena.ne.jp/Korsakov/20141031