Cocoonのモバイルフッターメニューをヘッダー固定にカスタマイズ

Cocoon1.7.8からモバイルフッターメニューが簡単に好みのメニューに変更出来るようになり、かなり自由度が上がりました。

そこで今回はCSSで簡単にモバイルフッターメニューをヘッダー固定に出来るカスタマイズを紹介します。

スポンサーリンク

表示サンプル

このCSSを適用するとモバイルフッターメニューが次のような表示になります。

検索
サイト名
シェア
情報
MENU

※サンプル用なのでリンク等は機能しません。

【コピペでOK】ヘッダー固定にカスタマイズするCSS

子テーマのstyle.cssに以下のコードをコピペします。
画像URLの部分はメディアにアップロードしたタイトルロゴ画像のURLを指定してください。

このCSSだけだとページ内リンクの移動位置がヘッダー分隠れてしまうのでスクロールを制御するをご確認ください

/* モバイルフッターメニューをヘッダー固定にする 
===========================================*/
.mobile-menu-buttons {
    min-height: 40px;
    top: 0; bottom: auto;
    padding-bottom: 0;
    align-items: stretch;
    transition: .3s;
}
.mobile-menu-buttons .menu-button .menu-button-in {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* #homeをタイトル画像に */
.mobile-menu-buttons .home-menu-button>a  {
    min-width: 200px;
    background: 50% 50%/contain no-repeat;
    background-image: url('画像URL'); /* タイトルロゴ画像 */
    margin: 0 auto;
}
/* 文字やアイコンを非表示 */
.mobile-menu-buttons .search-menu-caption,
.mobile-menu-buttons .home-menu-caption, 
.mobile-menu-buttons .home-menu-icon {
    display: none;
}
@media screen and (max-width: 1023px) {
    .mobile-button-slide-in {
        margin-top:40px;
    }
}
スポンサーリンク

メニューを設定する

基本的なモバイルフッターメニューの設定方法はCocoon公式ページをチェック!

タイトルロゴ画像を設定する

  1. コピペしたCSSの'画像URL'の部分に設定したい画像URLに変更してください。

    管理画面>メディアに移動
    メディアページで設定する画像の「編集」をクリック(カーソルを合わせると表示されます)
    メディアページで編集リンクをクリック
    「保存」の欄を確認
    ファイルのURLの項目が画像のURLです
    ファイルのURLが画像URL
  2. そしてメニュー設定に移ります。(外観>メニュー)

    メニュー項目を追加で、「カスタムリンク」を選択し「URL」に「#home」と入力します。
    リンク文字列はホームやサイト名を設定。※CSSにより外観的には非表示になります。

    カスタムリンクでURLに#homeを設定

  3. この「#home」を設定したメニューボタンがタイトルロゴになります。
    モバイルフッターメニューのタイトルロゴ

タイトルロゴ画像のサイズ

タイトルロゴ画像は横幅が最小で200px、縦が40pxで表示されます。

retinaディスプレイを考慮して倍の「横400×縦80px」で作成するのがちょうどいい感じになります。
※違うサイズでも大丈夫です。

タイトルロゴ画像
400px×80px

また、コピペしたCSSを変更すればタイトルロゴの最小横幅・縦幅の変更も可能です。

メニュー項目の並び順について

サンプルでは「検索#search」「ホーム#home」「MENU#menu」の並び順になっていますが、好きな順番に並べ替えたり好きなメニューを増やして大丈夫です。

メニュー項目の設定

タイトルロゴに幅を取られるので、4つ程度におさめるといいかと思います。
もっと並べたい場合はタイトルロゴ幅の最小横幅を変更したりで対応出来ます。

ホームボタンについて

タイトルロゴとは別にメニュー項目に「ホーム」ボタンを設定したい場合は、メニュー項目を追加する時に固定ページからホームを選んで追加するとホームボタンになります。

スクロールを制御する

固定ヘッダーがあるとページ内リンクの移動先の上部がヘッダーで隠れてしまいます。

ページ内リンクの移動位置がヘッダーで隠れるイメージ

*ページ内リンク:ページ内をリンククリックで移動するもの(目次などのアンカーリンク)

そのためスクロールの位置をズラす等の工夫が必要になります。
対応方法は2パターン用意したのでお好みでどうぞ!

パターン1: ページ内リンクの移動位置をズラす

こちらのパターンでは移動位置とヘッダー分の高さを計算してわざと移動位置をズラして調整する方法です。

ページ内リンクの移動位置をズラすイメージ

子テーマのstyle.cssにコピペでOK!
デザインによってちょうどいい高さが変わるので数値を変更して調整してください。
数値は+と-で打ち消すようにします。

/* 目次の移動位置を調整する */ 
@media screen and (max-width: 1023px) { 
    [id^="toc"]:target { 
        padding-top: 60px;
        margin-top: -60px;
    }
}

目次以外にもページ内リンクがある場合、こちらのコードで対応出来るかと思います。

/* ページ内リンクの位置を調整する */
@keyframes modify {
    from { padding-top: 60px; margin-top: -60px; }
    to { padding-top: 0; margin-top: 0; }
}
@media screen and (max-width: 1023px) {
    :target {
        animation: modify 0.1s;
    }
}

参考 ヘッダ固定時のページ内リンクのズレをCSSだけで解消する3つのテクニック – わたしと納豆ごはん

Cocoon設定>高速化>Lazy loadを有効にしている場合、遅延読み込みの影響で調整の有無に関わらず移動位置がズレる場合があります。

パターン2: 下にスクロールするとヘッダーが隠れるようにする

こちらのパターンでは下にスクロールした際ヘッダーが隠れ上にスクロールすると出てくるようにします。

スクロールでヘッダーが表示/非表示に変化するイメージ

以下のコードを子テーマのjavascript.jsにコピペでOK!

/* モバイルフッターメニュー(ヘッダー固定)を下スクロールで隠す */
$(function() {
    var header = $('.mobile-menu-buttons'),
        headerHight = header.outerHeight(),
        startPos = 0;
    $(window).on('load scroll', function() {
        var currentPos = $(this).scrollTop();
        if ( currentPos > startPos && currentPos > headerHight ) {
            header.css('top', '-' + headerHight + 'px');
        } else {
            header.css('top', 0);
        }
        startPos = currentPos;
    });
});

参考 jQuery:スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld

カスタマイズする

色々用意しましたので、カスタマイズの参考にどうぞ!

文字色・背景色を変更する

次のコードを追加で背景を変更出来ます。

/* モバイルフッターメニューの文字色・背景色を変更 */
.mobile-menu-buttons {
    color: #ca630a; /* 文字色 */
    background-color: #f7ebaf; /* 背景色 */
}
/* オンカーソル時の設定 */
.menu-button:hover { 
    color: #ffffff; /* 文字色 */
    background-color: #333333; /* 背景色 */ 
}
検索
サイト名
シェア
情報
MENU

高さを変更する

上記コードを次のように変更するとメニュー全体の高さを変更出来ます。

.mobile-menu-buttons {
    min-height: 60px;
}
@media screen and (max-width: 1023px) {
    .mobile-button-slide-in {
        margin-top: 60px;
    }
}
検索
サイト名
シェア
情報
MENU

タイトルロゴの最小横幅を変更する

上記コードを次のように変更するとタイトルロゴの最小横幅を変更出来ます。
タイトルロゴは画像全体が表示されるように縮小されます。

メニューが多い場合や、タイトルに幅をとりたくない場合に。

.mobile-menu-buttons .home-menu-button>a {
    min-width: 100px;
}

200pxの場合

検索
サイト名
シェア
情報
MENU

100pxの場合

検索
サイト名
シェア
情報
MENU

タイトルをテキストで表示する

タイトルロゴを画像ではなくテキストで表示できます。
#homeの「リンク文字列」で設定したテキストが表示されます。

まずコピペしたコードから次の3行を削除します。

background: 50% 50%/contain no-repeat;
background-image: url('画像URL'); /* タイトルロゴ画像 */
.mobile-menu-buttons .home-menu-caption,

そして次のコードを追加すると文字サイズ等調整できます。

/* タイトルをテキストに */
.mobile-menu-buttons .home-menu-caption {
    font-size: 15px; /* 文字サイズ */
    font-weight: bold; /* 太字 */
    color: #76a1c8; /* 文字色 */
}
検索
サイト名
シェア
情報
MENU

メニューラベルを表示/非表示にする

上記コードでは「検索」のラベル(リンク文字列の部分)を非表示に設定しています。
ラベルは以下の箇所を削除する事で、表示出来ます。

.mobile-menu-buttons .search-menu-caption,
検索
サイト名
シェア
情報
MENU

すべてのラベルを非表示にする時は次のコードを追加

/* メニューラベルを非表示 */
.mobile-menu-buttons .menu-caption {
    display: none;
}
検索
サイト名
シェア
情報
MENU

メニューアイコンを変更する

メニュー設定で、変更したいアイコンのclass名を指定する事で変更出来ます。
アイコンはFontAwesome4.7から選択可能です。

詳しい設定方法はCocoon公式ページ「個別メニューのアイコン設定」をご確認ください。

ヘッダーを非表示にする

モバイルフッターメニューが表示されている時、ヘッダーロゴを非表示にする場合は以下のコードを追加します。

/* ヘッダーロゴを非表示 */
@media screen and (max-width: 1023px) {
    .mobile-button-slide-in .logo-header {
        display: none;
    }
}

キャッチフレーズもまるごと非表示にしたい場合はこちら

/* ヘッダーを非表示 */
@media screen and (max-width: 1023px) {
    .mobile-button-slide-in .header {
        display: none;
    }
}

右下のトップへ戻るボタンを表示する

モバイルフッターメニューが表示された時、右下のトップへ戻るボタンが非表示になります。
メニューはヘッダーに移動させたのでこれを表示したい場合は次のコードを追加で表示出来ます。

/* トップへ戻るボタンを表示 */
.mobile-button-slide-in .go-to-top-button {
    display: flex;
}
スポンサーリンク

あとがき

長くなりましたが、基本はCSSのコピペスクロール制御の項目を確認してコピペするだけでOKです。
ヘッダーに固定するとスクロール関係が地味に面倒ですね!

今回紹介したヘッダー固定をせずともモバイルフッターメニューはとても便利になったので、ぜひお好みの設定に挑戦してみてください!


当ブログに掲載されているCSSについて

コメント

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