Twitterはこちら仕事依頼はこちら

【Cocoon】スマホヘッダー固定追尾！公式と別の方法で！

coconnカスタマイズ スマホヘッダー固定&追尾　メニューつき

当サイトでは、Amazonアソシエイトをはじめとした第三者配信のアフィリエイトプログラムにより商品・サービスをご紹介、適格販売により収入を得ています。

こんにちは、ぽんひろ(@ponhiroo)です。Cocoonカスタマイズの記事になります。

今回のカスタマイズはスマホで見たときにヘッダーを固定しスクロールで追尾、そこにメニューボタンも設置をします。

Cocoonのバージョン1.8.5でスマホヘッダー固定が実装されました。

現在β版のため、公式の固定メニューはいくつか問題点があります。

公式の問題点
  • ヘッダーが重複する
  • 重複を避けるためにヘッダーを非表示にするとh1が消える
  • サイドバーを使い回せない

いずれ解決されると思いますが現状SEOや手間を考えるとこちらのやり方がオススメです。

当記事の方法のメリット
  • ヘッダーの重複がない
  • h1が消えないためSEOに有利
  • サイドバーがメニューになるため新たにメニューを作る必要がない

デモページはこちら！

デモページ

ヘッダー固定って結構邪魔なので下スクロール時はヘッダーが隠れ、上スクロール時にヘッダーが現れる仕組みになっています。

メニュー固定は二つデメリットがあります。

  • ヘッダー固定のアドセンスが使えない
  • AMPが使えない

スピードテストは特に問題なかったです。

ponhiro.com スピードテスト

このカスタマイズをする際は必ずCocoon設定からAMP有効のチェックを外してくださいね。

コピペで作れるようになっていますが環境によってサイズ等合わない場合があるのと、色を変更しなければいけないので多少のCSS変更は必須になります。

PCに慣れていないと少し難しいかもしれません。

変更するファイル
  • main-before.php
  • javascript.js
  • style.css

それでは見ていきましょう！

Cocoonスマホメニューをヘッダー固定し、追尾させる

仕組みはもともとCocoonにあったモバイルメニューのサイドバーボタンと同じ動作をヘッダーにも作る感じです。

手順は以下の通りです。

手順
  1. style.cssを編集
  2. main-before.phpを編集
  3. javascript.jsを編集
  4. サイドバーにメニュー作成

手順1: style.cssにコードをコピペ！

見た目(デザイン)に関することは全てCSSで行っています。

下記コードを「WordPress管理画面→外観→テーマエディター→style.css」にコピペします。

以下コードを貼り付けてください。

  1. /************************************
  2. ** グローバルメニュー スマホ
  3. ************************************/
  4. #mobile-fixed-menu {
  5. display: none;
  6. }
  7. @media screen and (max-width: 834px) {
  8. #container {
  9. padding-top: 50px;
  10. }
  11. #header {
  12. background: #fff; /* 背景色*/
  13. position: fixed;
  14. z-index: 2;
  15. top: 0;
  16. width: 100%;
  17. height: 50px; /* ヘッダー高さ */
  18. transition: .5s;
  19. box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.2)
  20. }
  21. #header-in {
  22. display: -webkit-box !important;
  23. display: -ms-flexbox !important;
  24. display: flex !important;
  25. -webkit-box-orient: horizontal;
  26. -webkit-box-direction: normal;
  27. -ms-flex-flow: row;
  28. flex-flow: row;
  29. -webkit-box-align: center;
  30. -ms-flex-align: center;
  31. align-items: center;
  32. padding: 0 1.5em;
  33. }
  34. #header-in .logo {
  35. padding: 0;
  36. text-align: left;
  37. }
  38. .header-container-in.hlt-top-menu .logo-header img {
  39. width: 120px !important; /* ロゴ大きさ */
  40. vertical-align: middle;
  41. }
  42. #header-in .tagline {
  43. margin: 0;
  44. font-size: 10px; /* キャッチフレーズ文字サイズ */
  45. text-align: left;
  46. }
  47. #mobile-fixed-menu {
  48. margin-left: auto;
  49. line-height: 1;
  50. height: 50px; /* メニューボタン高さ */
  51. padding-top: 5px; /* メニューボタン上部余白 */
  52. display: block;
  53. }
  54. #mobile-fixed-menu .menu-icon::before {
  55. font-family: "Font Awesome 5 Free";
  56. font-size: 1em;
  57. content: '\f0c9';
  58. }
  59. #mobile-fixed-menu .menu-icon {
  60. text-align: center;
  61. display: block;
  62. font-weight: bold;
  63. font-size: 24px;
  64. color: #fff; /* メニューアイコン色 */
  65. }
  66. #mobile-fixed-menu .menu-caption {
  67. font-size: 10px;
  68. font-weight: bold;
  69. color: #fff; /* メニューアイコン文字色 */
  70. }
  71. .menu-close-button {
  72. color: #42d5e7; /* メニューを閉じるボタン色 */
  73. padding: 1em 0 0;
  74. }
  75. #sidebar-menu-content {
  76. color: #6c6b62; /* サイドバー文字色 */
  77. }
  78. [id^="toc"]:target {
  79. padding-top: 50px;
  80. margin-top: -50px;
  81. }
  82. .menu-close-button::before {
  83. font-family: "Font Awesome 5 Free";
  84. font-size: 1.2em;
  85. content: '\f00d';
  86. padding: 0;
  87. font-weight: 600;
  88. color: #aaa;
  89. }
  90. }
/************************************
** グローバルメニュー スマホ
************************************/
#mobile-fixed-menu {
  display: none;
}
@media screen and (max-width: 834px) {
  #container {
    padding-top: 50px;
  }
  #header {
    background: #fff;  /* 背景色*/
    position: fixed;
    z-index: 2;
    top: 0;
    width: 100%;
    height: 50px; /* ヘッダー高さ */
    transition: .5s;
    box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.2)
  }
  #header-in {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row;
    flex-flow: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 1.5em;
  }
  #header-in .logo {
    padding: 0;
    text-align: left;
  }
  .header-container-in.hlt-top-menu .logo-header img {
    width: 120px !important; /* ロゴ大きさ */
    vertical-align: middle;
  }
  #header-in .tagline {
    margin: 0;
    font-size: 10px; /* キャッチフレーズ文字サイズ */
    text-align: left;
  }
  #mobile-fixed-menu {
    margin-left: auto;
    line-height: 1;
    height: 50px; /* メニューボタン高さ */
    padding-top: 5px; /* メニューボタン上部余白 */
    display: block;
  }
  #mobile-fixed-menu .menu-icon::before {
    font-family: "Font Awesome 5 Free";
    font-size: 1em;
    content: '\f0c9';
  }
  #mobile-fixed-menu .menu-icon {
    text-align: center;
    display: block;
    font-weight: bold;
    font-size: 24px;
    color: #fff; /* メニューアイコン色 */
  }
  #mobile-fixed-menu .menu-caption {
    font-size: 10px;
    font-weight: bold;
    color: #fff; /* メニューアイコン文字色 */
  }
  .menu-close-button {
    color: #42d5e7; /* メニューを閉じるボタン色 */
    padding: 1em 0 0;
  }
  #sidebar-menu-content {
    color: #6c6b62; /* サイドバー文字色 */
  }
  [id^="toc"]:target {
    padding-top: 50px;
    margin-top: -50px;
  }
  .menu-close-button::before {
    font-family: "Font Awesome 5 Free";
    font-size: 1.2em;
    content: '\f00d';
    padding: 0;
    font-weight: 600;
    color: #aaa;
  }
}

必要に応じて色やサイズを変更する必要があります。手順2と3を終えたら確認をしてみてください。

色は#から始まっている「カラーコード」を変更してください。

アイコンはfontawesomeを使っておりバージョンによって変更する必要があります。
5.0の方はそのままで4.7の方はfont-family: FontAwesome;に書き換えてください。

手順2: main-before.phpにコードをコピペ！

WordPressの管理画面→外観→テーマエディター→tmp-user→main-before.phpを選択して、下記コードをコピペしてください。

こちらは編集する必要はありません。

  1. <div id="mobile-fixed-menu" class="sidebar-menu-button menu-button">
  2. <input id="sidebar-menu-input" type="checkbox" class="display-none">
  3. <label id="sidebar-menu-open" class="menu-open menu-button-in" for="sidebar-menu-input"> <span class="sidebar-menu-icon menu-icon"></span> <span class="sidebar-menu-caption menu-caption">
  4. <?php _e( 'MENU', THEME_NAME ) ?>
  5. </span> </label>
  6. <label class="display-none" id="sidebar-menu-close" for="sidebar-menu-input"></label>
  7. <div id="sidebar-menu-content" class="sidebar-menu-content menu-content">
  8. <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label>
  9. <div id="sidebar" class="sidebar nwa cf" role="complementary">
  10. <?php dynamic_sidebar( 'sidebar' ); ?>
  11. </div>
  12. </div>
  13. </div>
<div id="mobile-fixed-menu" class="sidebar-menu-button menu-button">
  <input id="sidebar-menu-input" type="checkbox" class="display-none">
  <label id="sidebar-menu-open" class="menu-open menu-button-in" for="sidebar-menu-input"> <span class="sidebar-menu-icon menu-icon"></span> <span class="sidebar-menu-caption menu-caption">
    <?php _e( 'MENU', THEME_NAME ) ?>
    </span> </label>
  <label class="display-none" id="sidebar-menu-close" for="sidebar-menu-input"></label>
  <div id="sidebar-menu-content" class="sidebar-menu-content menu-content">
    <label class="sidebar-menu-close-button menu-close-button" for="sidebar-menu-input"></label>
    <div id="sidebar" class="sidebar nwa cf" role="complementary">
      <?php dynamic_sidebar( 'sidebar' ); ?>
    </div>
  </div>
</div>

手順3: javascript.jsにコードをコピペ！

ヘッダーにメニューを移動させているのとスクロールでヘッダーが隠れるようにしています。

javascript.jsに以下コードをコピペしてください。

  1. jQuery(function () {
  2. jQuery('#mobile-fixed-menu').insertAfter('#header .logo');
  3. jQuery('#header .tagline,#header .logo').wrapAll('<div id="mobile-logo-wrap"></div>');
  4. });
  6. var menuHeight = jQuery("#header").height();
  7. var startPos = 0;
  8. jQuery(window).scroll(function(){
  9. var currentPos = jQuery(this).scrollTop();
  10. if (currentPos > startPos) {
  11. if(jQuery(window).scrollTop() >= 200) {
  12. jQuery("#header").css("top", "-" + menuHeight + "px");
  13. }
  14. } else {
  15. jQuery("#header").css("top", 0 + "px");
  16. }
  17. startPos = currentPos;
  18. });
jQuery(function () {
  jQuery('#mobile-fixed-menu').insertAfter('#header .logo');
  jQuery('#header .tagline,#header .logo').wrapAll('<div id="mobile-logo-wrap"></div>');
});

var menuHeight = jQuery("#header").height();
var startPos = 0;
jQuery(window).scroll(function(){
  var currentPos = jQuery(this).scrollTop();
  if (currentPos > startPos) {
    if(jQuery(window).scrollTop() >= 200) {
      jQuery("#header").css("top", "-" + menuHeight + "px");
    }
  } else {
    jQuery("#header").css("top", 0 + "px");
  }
  startPos = currentPos;
});

スクロールで隠れるようにしたくない人(常に固定表示させたい人）は

  1. jQuery(function () {
  2. jQuery('#mobile-fixed-menu').insertAfter('#header .logo');
  3. jQuery('#header .tagline,#header .logo').wrapAll('<div id="mobile-logo-wrap"></div>');
  4. });
jQuery(function () {
  jQuery('#mobile-fixed-menu').insertAfter('#header .logo');
  jQuery('#header .tagline,#header .logo').wrapAll('<div id="mobile-logo-wrap"></div>');
});

これだけでOKです！

手順4: サイドバーにナビメニューを追加！

メニューボタンを押すとサイドバーが開くようになっているのでサイドバーの上部にナビメニューがあると親切です。

「WordPress管理画面→外観→ウィジェット」からナビゲーションメニューを選択し、ウィジェットを追加→サイドバーの一番上に設定します。

ウィジェットからナビゲーションメニュー選択

タイトルを入力し、既存のメニューを選択します。

ウィジェットナビゲーションメニュー設定

ナビメニューの装飾をする

まず、アイコンの入れ方です。アイコンを入れたい場合は「fontawesome」を使います。

下記リンク先から好きなアイコンを選びます。

fontawesome

試しに家のマークを選択するとこのような画面になるのでコードをコピーします。

fontawesome設定

これをWordPressのメニュー設定画面のメニュー名の前に貼り付けます。

fontawesome設定2

これで表示されるはずです！

あとは色をつけたいですよね！当ブログのCSSを貼っておきますのでstyle.cssにコピペしてください。

色などは各自変更してください。

  1. .widget_nav_menu a i:before{
  2. color: #fff; /* 文字色 */
  3. padding: 0.5em; /* 余白 */
  4. background: #f6a068; /* 背景色 */
  5. font-weight: bold; /* 文字の太さ */
  6. width: 20px; /* 横幅 */
  7. height: 20px; /* 高さ */
  8. display: inline-block;
  9. text-align: center; /* 中央寄せ */
  10. border-radius: 50%; /* 角丸 */
  11. margin-right: 0.2em; /* 余白 */
  12. }
  13. .widget_nav_menu ul li a{
  14. color:#6c6b62; /* 文字色 */
  15. }
  16. .widget_nav_menu ul{
  17. padding:0.5em; /* 全体の余白 */
  18. }
  19. .widget_nav_menu li{
  20. border-bottom:1px dashed #ccc; /* 下線 */
  21. padding:0.3em 0; /* 行の余白 */
  22. }
  23. .widget_nav_menu li:last-child{
  24. border:none; /* 最後だけ下線削除 */
  25. }
.widget_nav_menu a i:before{
    color: #fff; /* 文字色 */
    padding: 0.5em; /* 余白 */
    background: #f6a068; /* 背景色 */
    font-weight: bold; /* 文字の太さ */
    width: 20px; /* 横幅 */
    height: 20px; /* 高さ */
    display: inline-block;
    text-align: center; /* 中央寄せ */
    border-radius: 50%; /* 角丸 */
    margin-right: 0.2em; /* 余白 */
}
.widget_nav_menu ul li a{
	color:#6c6b62; /* 文字色 */
}
.widget_nav_menu ul{
	padding:0.5em; /* 全体の余白 */
}
.widget_nav_menu li{
	border-bottom:1px dashed #ccc; /* 下線 */
	padding:0.3em 0; /* 行の余白 */
}
.widget_nav_menu li:last-child{
	border:none; /* 最後だけ下線削除 */
}

以上です！お疲れ様でした！

スマホメニューを固定ではなく、横スクロールにしたい場合は下記記事をご覧ください。

あわせて読む Cocoonのスマホメニューをカスタマイズ！コピペ可！横にスクロールできるようにするよ！

【Cocoon】スマホメニューを横スクロールできるようにする方法！
Cocoonのスマホ(モバイル)メニューのカスタマイズです。スマホでもメニューをヘッダー下に表示させ、横スクロールをできるようにします。その他にもアイコンを入れたり、英語を入れるカスタマイズ方法も紹介します！
ponhiro.com
2019.05.04

コメント

  1. 名前:こった :投稿日：2019/07/10(水) 02:38:02 ID：I3NzYzNTg

    記事を拝見させていただきました。
    試しにやって見たのですが、ヘッダーとグローバルナビが下にスクロールしても消えず、グローバルナビはサイズが合わず一部消えてしまいました。
    これの解決法などございましたら教えていただきたいです。

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2019/07/11(木) 13:03:01 ID：AyMDQ2NjQ

      >こったさん

      コメントありがとうございます。
      よろしければURLを教えていただいてもよろしいでしょうか？

      問い合わせからでも大丈夫ですので。

      返信
  2. 名前:昼の猫 :投稿日：2020/03/18(水) 04:43:08 ID：MwOTc5NDA

    初めまして。
    記載されている通りの手順で
    やってみたのですが、
    サイドバーがバグってる？のかよくわからないのですが、
    罰のついた長方形以外表示されません・・・。
    どうしたらよいでしょうか(;’∀’)
    https://nandemomatomerukun.com/

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/03/18(水) 14:54:32 ID：QzNjY5NTE

      ＞昼の猫さん

      罰のついた長方形とはどちらでしょうか？

      CSSを変更したのでお手数かけて申し訳ないですが全て置き換えていただいてもよろしいでしょうか？

      FontAwesomeの部分はバージョンによって変えてください。

      “Font Awesome 5 Free”;
      or
      FontAwesome;

      返信
  3. 名前:Kazu :投稿日：2020/03/25(水) 16:07:02 ID：UyNDkyOTg

    ご教授ありがとうございます
    手順どおりやってみました。
    PCではうまくsidebarにmenuが表示されたのですが、スマホでは昼の猫さん同様に罰のついた長方形以外表示されません。。。
    https://miyahigashifarm.com/

    CSSの何処かを変更すればよ気がしているのですが、もし可能であれば対策教えていただければ助かります。
    よろしくお願い致します

    返信
    • 名前:Kazu :投稿日：2020/03/25(水) 22:50:43 ID：UyNDkyOTg

      コメントしておきながら、申し訳ありません。

      公開しないと行けなくなったため、一旦main-before.php とjavascript.jsの記述を初期に戻してヘッダー背景画像として使っております。

      そのため、最初にコメントさせて頂いた「罰のついた長方形」はスマホで見ても、見れなくなっております。。。

      返信
      • ぽんひろ名前:ぽんひろ :投稿日：2020/03/27(金) 13:30:13 ID：EyNjg2NzA

        ＞Kazuさん

        ありがとうございます。

        お手数かけて申し訳ないのですがこちらのCSSを試してもらってもよろしいでしょうか？

        @media screen and (max-width: 834px) {
        #sidebar {
        display: block;
        }
        }

        返信
        • 名前:東京オリンピック面白い :投稿日：2021/07/27(火) 02:53:59 ID：M3MDU4NDM

          横から失礼致します｡

          私も昼の猫さん･Kazuさん同様に罰のついたアイコンのみの表示でしたが

          @media screen and (max-width: 834px) {
          #sidebar {
          display: block;
          }
          }

          こちら記入で表示されました!
          ありがとうございます!!!!!!!!!!!!!!

          返信
  4. 名前:しょう :投稿日：2020/04/15(水) 16:38:41 ID：k3NDk5OTE

    スマホメニューの位置などの調整の仕方がわからないです！
    変な風になってしまいます！

    http://asa-syou.com/

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:40:41 ID：M5NDQ1NzA

      ＞しょうさん

      答えになってなくて申し訳ないのですが公式で実装されましたのでそちらの方法でやってみると改善するかもしれません！

      返信
  5. 名前:みかん :投稿日：2020/04/20(月) 02:33:51 ID：QyMDI3MTA

    記事拝見させて頂きました。
    手順通りに、main-before.phpへコードをコピペしたところ、ウィジェット内のテキストがPC上で表示されなくなりました。
    先ほどのコードを消すと、今度はスマホ上でテキストのウィジェットが表示されなくなりました。
    main-before.phpへコードを追記すればいいのかなと思いますが、教えて頂けると大変有り難く存じます。
    何卒よろしくお願いします。

    返信
    • ぽんひろ名前:ぽんひろ :投稿日：2020/04/23(木) 17:43:16 ID：M5NDQ1NzA

      ＞みかんさん

      ウィジェットはどこのウィジェットでしょうか？
      全て消えてしまいますか？

      返信
      • 名前:匿名 :投稿日：2020/04/24(金) 05:32:41 ID：A5MDkxMjQ

        お返事ありがとうございます。
        サイドバーににブログ村のランキングのバナーをウィジェットのテキストを用いて貼っているのですが、それだけが表示されません。ほかのウィジェットは問題なく表示されています。
        何卒よろしくお願いします。

        返信
        • ぽんひろ名前:ぽんひろ :投稿日：2020/04/24(金) 13:54:29 ID：U4MjI1NDM

          そうなんですね、なんでしょう…。
          もともとはPC、スマホどちらも表示されていて、
          ・main-before.php更新→PC消える、スマホは表示
          ・main-before.phpコード削除→PC表示、スマホ消える
          で間違いないですか？

          返信
          • 名前:みかん :投稿日：2020/04/25(土) 06:14:12 ID：I1ODU3Mjc

            その現象で間違いないです。現在は、main-before.phpのコードを削除して、PC上では表示されるよう設定しています。
            可能な範囲で構いませんので、ご助力いただけましたら幸いです。

  6. ぽんひろ名前:ぽんひろ :投稿日：2020/05/13(水) 17:44:59 ID：UzNTI2Mzc

    ＞みかんさん

    ちょっと中を見てみないと原因の特定は難しそうです。
    お役に立てず申し訳ございません。

    返信
  7. 名前:ぴーすけ :投稿日：2021/01/14(木) 00:23:36 ID：c2Mzk2MjI

    スマホではlogoが表示されなくなってしまいました。
    どうすればよろしいでしょうか？

    返信
  8. 名前:ガウガウ :投稿日：2021/01/23(土) 21:44:40 ID：k4MzgyNDE

    お世話になります。
    スマホでカルーセルの下にメニューが潜り込んでしまい、またメニューもうまく表示できません。
    一度見ていただきたいのですが・・・・

    返信
  9. 名前:なお :投稿日：2022/04/05(火) 02:40:57 ID：Q1OTMwODA

    main-before.phpコードを入れるとウィジェットのサイドバーの内容がすべて表示されません。。。

    どうしてでしょうか・・・？

    https://www.jpnnavi.com/

    返信
    • 名前:なお :投稿日：2022/04/05(火) 02:45:31 ID：Q1OTMwODA

      東京オリンピック面白いさんの
      @media screen and (max-width: 834px) {
      #sidebar {
      display: block;
      }
      }
      で表示されました！
      ありがとうございます！

      返信

ページトップへ