WordPressテーマ「Simplicity2」のグローバルメニューをカスタマイズしてみた

当サイトは「Simplicity2」を利用させてもらっています。別サイトでも「Simplicity」1系を利用させてもらっているので基本サイトの顔は酷似しています。酷似していても何ら問題は無いのですが、たまにはカスタマイズ擬きもしてみたいと今回重い腰を上げてみました。

そんな時間があるなら「一つでも記事書けよ」なのですが、どうしても形から入りたい方なのでこれはこれでしょうがないかなと開き直ってカスタマイズスタートです。

ちなみに僕のレベルはオリジナルカスタマイズが出来るほどの知識は到底持ち合わせていない初心者レベルです。と言い訳しつつ、とりあえず上のほうから初めます。

スポンサーリンク

グローバルメニュー

xm-8
本来はこんな感じのグローバルメニューだったのですが、今回目指すのはマウスがのると文字色が変わって下線が出るというものです。

手順

その1 カスタマイザー設定
スキンを「オレンジメニュー(サブなし)」に設定

その2 sytle.cssへ挿入

上下に灰色の薄い線を入れます。

カラーは好みで変えて下さい。

と、設定すると下記のように変わりました。何か良い感じです(^^*/)
xm-9

違和感?あれれ

無事グローバルメニューを変更できて大いに自己満足していたのですが、なんか気になる。よくよく見るとフォントに違和感が。

xm-13

英語フォントは問題ないのですが、日本語フォントが本文のフォントとは違う感じですね。細かい事ですが気にしだすとどうも納得がいかない。

スキン内のフォントを変える

どうすればフォントを変更できるのか色々検索してみましたが分からず半ば「これでいいか」と諦めかけていたのですが、ちょっとスキン「オレンジメニュー(サブなし)」のCSSをのぞいてみたらこれかなと思う記述がありました。←確信なしwwww

「オレンジメニュー(サブなし)」のCSSはこんな感じです。

xm-12
ダメもとで「sans-serif」を「Hiragino Kaku Gothic ProN」に変えました。

xm-10

おぉー変わりました。当たり前か(^^;)

でも、でも出来ちゃいましたね。んんーやった!

また違和感?あれれ

出来たと思っていたのですが、グローバルメニューに「Wordpress」というカテゴリを追加したらアルファベットがすべて大文字で「WORDPRESS」という表記になってしまいます。

またまたこれでも良いかなと思ったのですが、やっぱり納得いかないので小文字も表記できるように手直しします。

スキン「オレンジメニュー(サブなし)」のCSSの中に以下の記述があります。

上記を下記のように変えます。

xm-17

打ち込んだ通りの表記になりました。良かった(^^;

今度こそやったぞ~(*^〇^*//

おまけ:オリジナルのスキンでカスタマイズ

スキン「オレンジメニュー(サブなし)」のCSSを直接いじるのが嫌だったのでもうひとつ新たに名前を変えて作ってそれをカスタマイズしました。
xm-14
中身はデフォルトの「オレンジメニュー(サブなし)」CSSをコピーしたものです。

追記

何かこんな面倒なことしなくてもCSSでいけますね!

コード書けばいいんだけど、色は簡単なんで「管理画面」>「カスタマイズ」で調整して下さい。

まとめ

スキンのフォント変更は初心者のカスタマイズなので無理やり感ありありで、もっとスマートな方法があるかも知れませんがとりあえずできたので良しとしましょう。

この記事が気に入ったら
いいね!しよう

Twitter で
スポンサーリンク