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

スポンサーリンク

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

 

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

 

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

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

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

スポンサーリンク

完成イメージ

 

編集前

編集前

 

 

編集後

編集後

 

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

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

 

メニューを編集する

メニューを編集する

 

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

 

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

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

 

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

「Simplicity2」公式ページ

 

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

 

手順

 

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

 

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

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

 

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

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

 

/*media Queries PCサイズ(960px以上)
----------------------------------------------------*/
@media screen and (min-width: 960px) {
    #navi #menu-nav .menu-item {
        height: 50px;
        width: calc(100% / n); /* nの部分はメニューのリスト数によって変更*/
    }

    #navi #menu-nav .menu-item a {
        height: 100%;
        box-sizing: border-box;
        display: flex;
        display: -ms-flexbox; /* IE10 */
        display: -webkit-box; /* Android4.3以下、Safari3.1〜6.0 */
        display: -webkit-flex; /* Safari6.1以降 */
        justify-content: center;
        -ms-flex-pack: center; /*IE10*/
        -webkit-box-pack: center; /* Android4.3以下、Safari3.1〜6.0 */
        -webkit-justify-content: center; /* Safari6.1以降 */
        align-items: center;
        -ms-flex-align: center; /*IE10*/
        -webkit-box-align: center; /* Android4.3以下、Safari3.1〜6.0 */
        -webkit-align-items: center; /* Safari6.1以降 */
    }
}

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

 

次に、

width: calc(100% / n);

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

 

変更例

↑の場合は「2」に変更

 

 

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

以上で完了です。

 

 注意

 

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

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

 

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

まとめ

 

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

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

 

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

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

コメント

タイトルとURLをコピーしました