Simplicity2グローバルナビメニューのカスタマイズサンプル4個+α

2017-06-04WordPress

サイトURLが変更になりました!
https://0edition.net/
お手数ですがブックマーク・RSSの再登録お願いします。

こんにちは、とみーです。

Simplicity2のスキンを作っていたのですが、あっちこっち手を加えていて完成が程遠く、「一体いつになったら出来上がるんだ」という状態に陥りました。笑

完成が遠いとやる気が削がれる、ホントに。

というわけでモチベーションを保つためにサクッと出来上がるグローバルナビメニューを色々と作ってみました。

メニューデザインが変わるだけでも印象がだいぶ変化するので、是非お試しください。

設定方法は、ダッシュボード → 外観 → style.cssに下記のソースコードをコピペするだけです。

色は全てスタイルシート内で設定してますので、デザインそのままでお好みの色にご自身で変更することが可能です。
#から始まる6桁(もしくは3桁)の英数字の箇所を変更すればOKです。

スポンサーリンク

Simplicity2グローバルナビメニューカスタマイズサンプル

上下2重線

 

2段組(上段にアイコン)

 

ヘッダーを単色にしてグローバルナビメニューも同じ色にするとよりオシャレになるかも。

上記のコードの後にこちらのコードを加えてください。

 

サンプルは全て同じアイコンですが、メニューごとにアイコンを変更することも出来ます(後日別記事にて手順作成予定)

 

丸と線

 

色とアイコンを変えると女性らしさが出ますね。

 

リボン

CSSではリボンの折り返しと端しか設定していないため、メニュー部分の色はカスタマイザーで設定してください。

 

あとがき

WordPressのカスタマイズはこちらの記事もおすすめです。