simplicityでヘッダータイトルの横にナビメニューを表示する方法

simplicityでナビメニューを作成すると次のようにタイトルとサイト概要の下にナビメニューが表示されます。

このナビメニューをタイトル横やサイト概要横に設置したいと思う人も多いと思いますが、simplicityのカスタマイズ画面ではナビメニュー位置をタイトル横に換えるような設定はありません。

しかし設定が用意されていないだけでテーマのヘッダーやCSSを少しだけ改造するだけで簡単にナビメニューの位置を変えることは可能です。

そこでここではsimplicityでヘッダータイトル横にナビメニューを表示する方法を解説します。

ナビメニューをヘッダーに設置する利点

ここでは次の画像のようにヘッダー内に設置されたナビメニューを作成します。

このようにヘッダー内にメニューを埋め込むメリットは次のような点です。

• ヘッダー横の空きスペースを有効活用できる
• ファーストビューで記事に目が行きやすくなる
• デフォルトで表示されるナビメニューより目立つ
• デザイン的にもおしゃれになる

ヘッダーにナビメニューを埋め込むことで今までナビメニューにとられていたスペースがなくなる上に、今まで利用していなかったヘッダー横のスペースも活用できるので正に一石二鳥です。

またデザインなども工夫すればオシャレな感じのメニューも作成できるのでデザイン面でもサイトにとってプラスになります。

ヘッダーにナビを表示させる方法

ではヘッダーにナビメニューを表示させる手順を解説します。

その手順は次の通り

header.phpの編集

まずsimplicityでヘッダーを出力する機能のある「header.php」というPHPファイルを編集します。

メニューから「外観」ー＞「テーマの編集」を選んでください。

テーマの編集画面を開いたらテーマファイルの中から「header.php」というファイルを探して開いて、その中で次のようにヘッダーロゴの作成を行っている部分を見つけてください。

上の画像でオレンジ色で囲った部分がそうです。

この部分を次のように改変してください。

  <!-- ここから追加 -->
  <div id="header_navi">
  <!-- ここまで -->>
              
      <div class="alignleft top-title-catchphrase">
           <?php get_template_part('header-logo');?>
      </div>
      
      <!-- ここから追加 -->
      <ul>
          <li><a href="xxx">WordPress</a></li>
          <li><a href="xxx">プラグイン</a></li>
          <li><a href="xxx">javascript</a></li>
          <li><a href="xxx">CSS<a></li>
          <li><a href="xxx">SEO</a></li>
      </ul>
              
  </div>
<!-- ここまで -->

「<!-- ここから追加 -->」から「<!-- ここまで -->」の部分をヘッダーロゴ出力の部分に追加してください。

追加したコードでナビメニューの代わりになるのが次のリストです。

<ul>
  <li><a href="xxx">WordPress</a></li>
  <li><a href="xxx">プラグイン</a></li>
  <li><a href="xxx">javascript</a></li>
  <li><a href="xxx">CSS<a></li>
  <li><a href="xxx">SEO</a></li>
</ul>

URLやリンクテキストなどは自分のサイトに合ったものに書き換えてください。

header.phpの編集が終わったら「ファイルを更新」ボタンを押して内容を更新してください。

style.cssの編集

次にテーマの編集画面から「style.css」というCSSファイルを開いてください。

そしてそのCSSファイルの最後に次のような内容を追加します。

/** ヘッダーにナビメニューを追加 **/

@media screen and (max-width: 1110px){
  #navi{
    display: block;
  }
  
  #header_navi ul{
    display: none;
  }
}

@media screen and (min-width: 1110px){
  #navi{
    display: none;
  }

  #header_navi{
    display: flex;
  }

  #header_navi:first-child{
    flex: 1;
  }
  
  #header_navi ul{
    flex: 1;
    flex-wrap: wrap;
      
    display: flex;
    margin: auto 0px;
    padding-right: 100px;
    list-style-type: none;
  }
  
  #header_navi ul li{
    width: calc(20% - 1px);
    text-align: center;
  }
  
   #header_navi ul li {
     border-left: 1px solid gray;
   }
 
   #header_navi ul li:first-child{
     border-left: 1px solid transparent;
   }
  
  #header_navi ul li a{
    text-decoration: none;
  }
}

この内容を追加したら「ファイルを更新」ボタンを押してファイル内容を更新してください。

以上のようにファイルを更新してサイトを見てみると次のようにヘッダーにナビメニューが表示されます。

ここではCSSで画面サイズが1110ピクセル以下になった場合にヘッダー内のナビメニューを非表示にしているのでスマホなどの小さな端末ではナビメニューはヘッダーに表示されず、プルダウン式のメニューが表示されるようになります。

ナビメニューのカスタマイズ

最後にここで設置したナビメニューのカスタマイズ方法について少し紹介します。

カスタマイズするには次のようにstyle.cssを編集してください。

メニューの列数

メニューの列数はstyle.cssで追加したCSSコードの次の部分で調整しています。

#header_navi ul li{
  width: calc(20% - 1px);
  text-align: center;
}

widthプロパティに「calc(20% - 1px)」を指定することでメニューアイテム１つの幅はメニュー横幅全体の20%分から1ピクセルを引いた幅になります。

１アイテム当たり全体の20%の大きさを持つので次のように５列で表示されています。

もしこの列数を変えたい場合は「calc((100% / 列数) - 1px)」と指定してください。

例えば６列に変えたい場合は次のようにwidthプロパティを書き換えます。

width: calc((100% / 6) - 1px);

これで次のように６列のナビメニューになります。

また指定した列数を超えた場合は自動で折り返されるので見切れるという心配はありません。

文字サイズや色の変更

ナビメニューの文字の装飾を行っているのはstyle.cssに追加した次の部分です。

#header_navi ul li a{
  text-decoration: none;
}

なので例えばメニュー内の文字を太字にしてフォントカラーを緑色にしたいならこの部分にスタイルを追加します。

#header_navi ul li a{
  text-decoration: none;
  font-weight: bold;
  color: green;
}

変更したナビメニューは次のような見た目になります。

まとめ

simplicityではカスタマイズ画面にナビメニューの位置を変更する設定はありません。

しかし、ここで解説したようにテーマファイルを少しだけ改造するだけでヘッダー内にナビを表示することが可能です。

ここでは最低限のデザインしか紹介しなかったのでフォントサイズや色、列数などをサイトに合わせるとより洗練された綺麗なナビメニューが作れることでしょう。

以上ここではナビメニューをヘッダー横に表示する方法について解説しました。