WordPress

Xeory Extensionのメニュー位置を右上にする方法

スマホで見たときのXeoryExtensionのメニューのレイアウトが微妙だったので、ヘッダーの右側に表示されるようにしました。

今回は画像ロゴを使っっている場合のメニューのレイアウト修正方法です。

 

完成形

まずは完成形を見せておきます。この記事を参考にすればだいたいこんな感じの表示になるはずです。

PC表示

XeoryExtensionのメニュー修正後、PC表示

 

スマホ表示

XeoryExtensionのメニュー修正後、スマホ表示

 

該当サイトでは画像ロゴを使っているので、この記事でも画像ロゴを使っている場合のメニューの修正方法について説明してあります。

テキストロゴの場合でもやり方はだいたい同じで、widthとheightを調整すれば良いと思います。

 

デフォルトのメニュー

Xeory Extensionはスマホでみるとメニューがこんな感じになっています。

 

メニューを閉じている状態

xeory-extension-デフォルトメニュー-閉じている状態

 

メニューを開いている状態

xeory-extension-デフォルトメニュー-開いている状態

 

ロゴが幅いっぱいに広がって、メニューボタンはその下の横いっぱいに広がった要素の中にあります。

何でこのデザインにしたのかよくわかりませんが、おじさん的には見た目がイマイチです。なのでこのメニューボタンを一般的なボタンの位置(右上)にするべく奮闘しました。

 

メニューに同じ内容が表示される謎仕様

その前に、Xeory Extensionのメニューの謎仕様について書いておきます。

xeory-extensionのメニューのデフォルト仕様

メニューの設定を「プライマリーナビ」にしていると上の画像のように、同じメニュー内容が表示されてしまいます。

バグなのかな?と思ったんですが、そういう仕様なんですかね。

メニューに含めるページをうまいこと調整すれば良いのかもしれませんが、今回はもっと簡単な方法で解決しました。

 

メニューの設定方法

xeory-extension-メニューの設定方法-1

上記画像のように「メニュー設定」で「プライマリーナビ」に設定していると前の項目のような表示になってしまいます。これだと同じ内容が2セット表示されているのでかっこ悪いです。

 

xeory-extension-メニューの設定方法-2

「メニュー設定」で「グローバルナビ」に設定すると以下のように良い感じになります。

 

xeory-extension-グローバルナビ-スマホ表示

 

 

「ブログコンテンツ」を「コンテンツ」に変更

「ブログコンテンツ」と表示されていますが、コンテンツはブログだけじゃないので「コンテンツ」に直します。「ブログコンテンツ」はfooter.phpに記述されています。

footer.php

<?php if( has_nav_menu( 'global_nav' ) ){ ?>
   <div id="footer-cont-content" class="gr4">
      <h4>ブログコンテンツ</h4>
      <?php wp_nav_menu(
         array(
            'theme_location' => 'global_nav',
            'menu_class' => 'clearfix',
            'menu_id' => 'footer-gnav-ul',
            'container' => 'div',
            'container_id' => 'footer-gnav-container',
            'container_class' => 'gnav-container'
         )
      );?>
   </div>
<?php } ?>

ここを以下のように書き換えます。

<?php if( has_nav_menu( 'global_nav' ) ){ ?>
   <div id="footer-cont-content" class="gr4">
      <h4>コンテンツ</h4>
      <?php wp_nav_menu(
         array(
            'theme_location' => 'global_nav',
            'menu_class' => 'clearfix',
            'menu_id' => 'footer-gnav-ul',
            'container' => 'div',
            'container_id' => 'footer-gnav-container',
            'container_class' => 'gnav-container'
         )
      );?>
   </div>
<?php } ?>

これでOKです。

 

メニューのレイアウトを直す

ということでここから本格的にメニューボタンを直していきます。まずは「Xeory Extension メニュー バグ」とかでググって出てきた記事に目を通します。

参考:【Xeory Extension】のおすすめカスタマイズ

これらを参考にして実際にCSSをいじっていきます。ただし、画像ロゴを使っているため、この記事の内容だけではうまくいかなかったので、少し手を加えました。

 

今回修正したサイトはロリポップ!サーバを使っているのでロリポップ!のFTPを使ってCSSを修正していきました。

もちろん、子テーマをいじっています。

 

メニューボタンが右上に表示されるようにCSSを修正

ここからが本題。メニューボタンを右上に表示されるようにしたいと思います。以下のコードを子テーマのstyle.cssに追加すればOKです。

@media screen and (max-width: 767px) {
  #header #logo {
    float: left;
    display: inline-block;
    width: 225px;  //ロゴの横幅を指定
  }

  #header #logo a img {
    width: 225px;  //ロゴ画像の横幅をロゴに合わせる
    height: 46px;  //ロゴ画像の縦幅を縦横比を維持するサイズにする
  }

  #header-nav-btn {
    display: block;
    width: auto;
    line-height: 1;
    float: right;  //メニューボタンを右に寄せる
    margin: 0;
 
  }
  #header-nav-btn a {
    display: block;
    text-align: center;
    font-size: 32px;
    padding:27px 0 26px;   //ロゴのサイズに合わせる
    line-height: 1;
    background: #fff;
    width: auto;
  }
}

 

「@media screen and ( max-width: 767px ){…}」というのは画面のサイズが767px以下の場合はこの部分のデザインが有効になりますよ、という意味です。

これはスマホ、タブレット、PCでそれぞれ適切なデザインにするために使われるもので、メディアクエリと呼ばれます。

スマホ表示の場合はこの「max-width: 767px」のメディアクエリを使うのが一般的です。

 

これで画像ロゴもメニューボタンも良い感じの位置に表示されるようになりました。

xeory-extension-メニュー修正後-スマホ表示

ヘッダーのカラーを白(#fff)にしたり、その下の領域の色も変更していますが、気にしないでください。