MENU

[WordPress]ナビメニューを最上部に固定する方法

2016/2/13 ブログ カスタマイズ , 0

このサイトはWordPressにテーマはSimplicityを使っていますが、ナビメニュー（グローバルナビ）が標準で設置できるのが気にいっています。

改造前

現状のナビメニュー

使っていると更に欲が出てきて、ナビメニューをブラウザ内の最上部に移動し、かつスクロールしてもナビメニューが隠れないようにしたくなりました。

今回そのカスタマイズに成功しましたので、その方法を紹介します。WordPressのテーマはSimplicityですが、それ以外の場合でも参考になると思います。

ナビメニューを更にこうしたい

1．一番上部に配置したい。そのわけは

Googleアドセンスの広告を上部にも配置したい

WordPressに移行してからGoogleアドセンスを導入しましたが、 押してもらえる可能性が高い画面上部にも広告を配置したいところです。

サブメニューが広告近くにかかると違反

ところが、当サイトのようにサブメニューがあると、広告を上部に配置しづらいという問題があります。 理由はサブメニューの近くに広告があると、サブメニューと間違って広告を押してしまう可能性があるので、ポリシー違反となるからです。

なので、ナビメニューをできるだけ上の方向に移動したいのです

2．ナビメニューの体裁をもっと良くしたい

メニュー自体はbodyの幅で、バックは幅いっぱい広げたい

一番上に配置したならメニューの帯は画面幅いっぱい広く表示した方がかっこいいと思います。各メニュー項目は従来どおりbodyの上に配置したい。

常に上部に固定表示したい

画面をスクロールしてもナビメニューが隠れないようにしたい。ブログタイトルは必要ないが、ナビメニューは常にあった方が良い。

サブメニューがあることをわかりやすくしたい

意外と、一見サブメニューがあることがわからないらしいので改善したい。

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

1．参考サイト

当サイトと同じようにSimplicityを使っていて、ナビメニューを上部に配置しているブログがあります。現役の中学生だそうで、もうこんなサイトが作れるなんてすごいですね。

変更の要点は、スタイルシートに以下を追加するとのこと。

ソースを表示
印刷SyntaxHighlighterについて
1#navi ul{
2  left: 0; /*左端が切れてしまうのでその対策*/
3  top: 0px; /*メニューバーを画面上部へ*/
4  position: fixed; /*追尾させる*/
5  z-index: 10;
6}
7#navi ul ul{
8  top: 30px; /*サブメニュー？が画面上部とくっついてしまう対策*/
9}
10#header {
11  margin-top: 39px;/*ヘッダーの上に空白を作る*/
12}

私も早速試しましたが

  1. メニューが左寄りになる
    本来のbody幅の上に各項目を配置したい
  2. WordPressにログイン時隠れる
    WordPressダッシュボードにログイン状態では、WordPressの上部メニューでナビメニューが隠れてしまいます。

この2点を改善したいと思いました。

2．私のカスタマイズ法

上記を改善したカスタマイズ法です。下記3つのファイルを変更します。

1）header.phpの変更

親テーマホルダーにあるheader.phpをFTPソフトでPC内にコピーして変更します。
下記は変更後のheader.phpです。

ソースを表示
印刷SyntaxHighlighterについて
1<body <?php body_class(); ?>>
2  <div id="container">
3    <!-- header -->
4    <?php if (is_navi_visible())://ナビゲーションが表示のとき
5      get_template_part('navi');//グローバルナビのためのテンプレート
6    endif; ?>
7    <div id="header" class="clearfix">
8      <div id="header-in">
9        <?php //カスタムヘッダーがある場合
10        $h_top_style = '';
11        if (get_header_image()){
12          $h_top_style = ' style="background-image:url('.get_header_image().')"';
13        } ?>
14        <div id="h-top"<?php echo $h_top_style; ?>>
15          <?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>
16          <div class="alignleft top-title-catchphrase">
17            <?php get_template_part('header-logo');?>
18          </div>
19          <div class="alignright top-sns-follows">
20            <?php  if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
21            <?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
22            <?php endif; ?>
23          </div>
24        </div><!-- /#h-top -->
25      </div><!-- /#header-in -->
26    </div><!-- /#header -->
27    <!-- 本体部分 -->
28    <div id="body">
29      <div id="body-in">
  • ブログタイトル等のヘッダより先にナビメニューを記述します

4-6行目がナビメニューの表示部分ですが、下にあったのをこの位置まで前に移動します。変更はそれだけです。

変更したheader.phpをFTPで子テーマフォルダに入れます。

2）style.cssの変更

子テーマホルダーにあるstyle.cssに以下の内容を追加します。

ソースを表示
印刷SyntaxHighlighterについて
1/* ナビメニューのトップ化 */
2#navi {
3  width:100%; /* 幅をいっぱいに広げる*/
4  position: fixed; /*位置を固定する*/
5  z-index: 10; /*上に重ねる*/
6}
7#site-title { /*ブログタイトルとナビメニューが重ならないように*/
8  margin-top: 50px;
9}
  • 3行目：メニューの帯の幅をいっぱいまで広げます
  • 4行目：スクロールしても消えないように、位置を”fixed”にします

すると他の要素全体が上に上がって、ナビメニューとブログタイトルが重なりますので

  • 5行目：ナビメニューを上層（表面側）に持ってくる
  • 7-9行目：ブログタイトルの上マージンでナビメニューと重ならないようにする

という変更を追加しています。

3）mobile.cssの変更

子テーマフォルダーにあるmobile.cssに以下を追加します。

ソースを表示
印刷SyntaxHighlighterについて
1#site-title {
2  margin-top: 20px;
3}
  • モバイルではナビメニューがなく、上記変更によりブログタイトルの上が空き過ぎるのを調整します

3．サブメニューの項目名に▽を付ける

ついでにナビメニューにサブメニューがあることをわかりやすくするため、各メニュー名の後に「▽」を付けました。

カスタマイズが完了したナビメニュー

以上で今回のナビメニューのカスタマイズは完了です。

WordPressのダッシュボードにログインした状態ですと、以下のようになります。

カスタマイズしたナビメニュー。訪問者の方には一番上の黒いメニューは表示されません。

スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。

トップへ戻る