【Simplicity2】メニュー(ナビ)のデザインを変更する方法

スポンサーリンク

【Simplicity2】メニュー(ナビ)のデザインを変更する方法

 

WordPressの無料テーマ「Simplicity2」のデザインカスタマイズ「メニュー(ナビ)のデザインを変更する」です。

 

Simplicity2」のメインメニューのデザインは正直言って、

デフォルトだと微妙です…

そこで、簡単コピペでいい感じのメインメニューを作成する方法をご紹介します。

スポンサーリンク

完成イメージ

 

編集前

編集前

 

 

編集後

編集後

 

高さを高くして、メニューのリストを「上下中央揃え」にします。

リンクの範囲も合わせて変更します。

 

メニューを編集する

メニューを編集する

 

前準備: 子テーマを適用する

 

子テーマ」を利用していない方は、必ず利用するようにしてください。

Simplicity2」の更新がされるたびにデザインが元に戻ってしまいます

 

子テーマは、公式からダウンロードできます。

「Simplicity2」公式ページ

 

必ず「子テーマ」を利用する

 

手順

 

では、さっそくメニューをいい感じにしていきます。

 

テーマの編集を選択してください。

まずは、WordPressのダッシュボードから「外観」→「テーマの編集」を選択してください。

 

スタイルシート(style.css)を選択してください。

テーマの編集」のページに移動しますので、右側に表示されている「スタイルシート(style.css)」を選択してください。

 

表示されるエディターに上のコードをコピペしてください。

 

次に、

width: calc(100% / n);

の「n」部分をリストの数に変更してください。

 

変更例

↑の場合は「2」に変更

 

 

編集が完了したら、下のほうにある「ファイルの更新」を選択してください。

以上で完了です。

 

 注意

 

以前のバージョンの「Simplicity2」では、動作しない場合があります。

いつのバージョンかは定かではありませんが、メインナビ周りの「id、class」が変更されています。

 

最新のバージョンを利用しましょう。

まとめ

 

Simplicity2」のデザインカスタマイズ「メニュー(ナビ)のデザインを変更する」でした。

今回の記事を参考に、デザイン性の高いサイトを作成してみてください。

 

今回は、簡単に実装できるということで「CSSの説明」は省かせていただきました。

気になる方がいれば、コメントもしくはお問い合わせください。

コメント