\ポムミーの代わりはペライチ/

12月末でポムミーのサービスが終了します!

乗り換えがまだの方はペライチで無料作成
ブログクエスト カテゴリから記事を探す

グローバルヘッダーメニューをスマホ表示で横スライドするようにカスタマイズしてみた【Cocoon】

グローバルナビを横スライドにカスタマイズ ブログデザイン
グローバルナビを横スライドにカスタマイズ
この記事は約7分で読めます。

この記事では、グローバルヘッダーメニューを横スライドさせるカスタマイズ法をご紹介します。

ちまたでよく見かける横スライド可能なクールなヘッダーメニュー。しかしいざカスタマイズしようと思って調べてみると、結構大変そうで断念してしまいますよね。

そこで今回は、ぽんひろ.comさんがご紹介してくださったCSSを使って実際にカスタマイズしてみました。

コピペ&きちんと手順さえ踏めば絶対にできるので、一緒にクールな横スライドメニューを完成させましょう!

横スライドグローバルメニュー
横スライドグローバルメニュー
スポンサーリンク

グローバルヘッダーメニューを横スクロールにカスタマイズする際の手順

大まかな手順は以下になります。

① CSSをコピーしてstyle.cssに張り付け

② 外観からヘッダーメニュー(モバイル)を作成*


*同時に、PCから見た時のヘッダーメニューも作成できます。

また、カスタマイズする際は一旦メモ帳などにコピーし、好きなカラーに変更してからエディターにペーストしてください。

手順1:CSSをstyle.cssにコピペする

次のコードをコピーしてメモ帳に張り付けて下さい。

       #header-container .navi-in > ul li {
       height: auto;
       font-weight: 600;
       line-height:1.3;
    }
    #header-container #navi{
       background:#89c997; /* 背景色 */
    }
    #header-container #navi a{
       color:#fff; /* 文字色 */
       padding:0.8em 1em;
    }
    #header-container #navi a:hover{
       color:#89c997; /* マウスホバー時の文字色 */
    }
    #header-container .navi-in > ul .sub-menu{
       background:#89c997; /* サブメニュー背景色 */
    }
    #header-container .navi-in > ul > .menu-item-has-children > a::after {
       top: 0.8em;
       font-size: 1.2em;
       font-weight: 600;
    }
    #header-container .sub-menu .caption-wrap{
       padding-left:1em;
    }
    .navi-in > ul .menu-item-has-description > a > .caption-wrap{
       height:auto;
    }
    @media screen and (max-width: 1030px){
      #header-container .menu-mobile{
        display:none;
      }
      .navi-in > .menu-mobile{
        display:-webkit-box;
          display:-ms-flexbox;
          display:flex;
        overflow-x: scroll;
        white-space: nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
             flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
      }
      #header-container #navi a{
        font-size:0.8em;
        padding: 1em 1.2em;
      }
      #header-container .navi-in > ul > .menu-item-has-children > a::after{
        display:none;
      }
      #navi .navi-in > .menu-mobile li {
        height: auto;
       line-height: 1.8;
    }
    }


↓こんな風に張り付けて下さい。

グローバルメニューカスタマイズ1
グローバルメニューカスタマイズ1


次にメモ帳上で、デフォルトカラーから好みのカラーに変更します。まずは好きなカラーのカラーコードを選んできてください。(Cocoonのテーマカラーに合わせると整って見えます。テーマカラーのカラーコードがわからない方はこちらへ

好みのカラーコードが決まったら、メモ帳上で Ctrl+h を押すとキーワードを置換してくれる画面が出てきますので、

  • 上のフォーム→ #89c997 を入力
  • 下のフォーム→お好みのカラーコードを入力

すべて置換 ボタンをクリックすると、すべてのデフォルトカラーコードが置換され、好みのカラーコードが反映されたCSSになりました。

グローバルメニューカスタマイズ2
グローバルメニューカスタマイズ2


次にstyle.cssに、置換後のCSSを張り付けます。
外観テ―マエディター > 編集するテーマを選択 Cocoon childstyle.css を選択し、先ほどのメモ帳でカラーコードをカスタマイズしたCSSをコピーして、style.cssにペーストしてください。ペーストができたらファイルを更新してください。

グローバルメニューカスタマイズ3
グローバルメニューカスタマイズ3

手順2:グローバルヘッダーメニュー(モバイル)を作成

手順1では横にスライドするための仕掛けを作ったので、次はメニューそのものを作ります。

外観メニュー新しいメニューの作成 をクリックし(画像の①です)、メニュー名を入力してください。(私は画像の②のように「モバイルヘッダーメニュー」という名前にしています。)

メニュー名を入力したら、メニュー項目を追加(画像③のところで好みの項目にチェックを入れて下さい)しましょう。

グローバルメニューカスタマイズ6
グローバルメニューカスタマイズ6

追加したら、下の方にメニュー設定というチェックボックスが現れるので「ヘッダーモバイルメニュー」にチェックを付けたら メニューを保存 してください。

ここで、「ヘッダーメニュー」にもチェックを入れると、PCで見た時もヘッダーメニューが出てきます。チェックを入れなかったらPCから見た時はヘッダーメニュー無し、スマホで見た時はヘッダーメニュー有りの設定になります。

追加したメニュー項目はドラッグ&ドロップで順番を入れ替えることができますので、お好みで入れ替えてみて下さい。

グローバルメニューカスタマイズ7
グローバルメニューカスタマイズ7

補足:グローバルヘッダーメニューを横スクロールにカスタマイズ

表示崩れ・2つメニューが表示される・メニューに項目説明文が入ってしまう or 説明文を入れたい場合に関して補足説明します。

表示崩れ ・2つメニューが表示される

上記の手順を踏んでもきちんと反映されない場合、

  • 手順1:グローバルヘッダーメニュー(モバイル)を作成
  • 手順2: CSSをstyle.cssにコピペ

といった感じで、手順1と手順2を入れ替えてみたり、グローバルヘッダーメニューを一度削除して作り直したりしてみて下さい。

グローバルナビに説明文が入ってしまう or 入れたい

こちらをご覧ください。

グローバルナビに補足説明文を記入する方法
グローバルナビの個別メニューアイテムに対して補足文(キャプション)を入力する方法の紹介です。

それでも説明文が入ってしまう方(とくにカテゴリーをヘッダーメニューにしている方)は、ダッシュボード > カテゴリー編集 をクリックして説明のフォーム内の文字を削除してください。

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