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

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

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

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

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

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




完成イメージ

編集前

編集前

編集後

編集後

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

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

メニューを編集する

メニューを編集する

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

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

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

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

「Simplicity2」公式ページ

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

手順

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

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

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

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

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

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

次に、

width: calc(100% / n);

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

変更例

↑の場合は「2」に変更

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

以上で完了です。

 注意

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

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

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

まとめ

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

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

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

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

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク