支援者募集中!仕事依頼はこちら

【Cocoon】ヘッダーメニューをオシャレにカスタマイズ!上部に固定追尾!

Cocoonヘッダーメニューカスタマイズ Cocoon

こんにちは、ぽんひろ(@ponhiroo)です。

Cocoonカスタマイズ!今回はヘッダーとグローバルメニューです。

オシャレ、かつ利便性をアップさせることが目的!

完成図がこちら!

Cocoonヘッダーメニューカスタマイズサンプル

これがスクロールで一緒に降りてきます。

さらに!

スクロール時は縮小し、半透明になるようにしてるので邪魔にもなりません。

実際にデモをご覧ください。

ちなみにスマホもヘッダーを固定していますがこれは別の方法でやってるのでセットで実装をオススメします。

あわせて【Cocoonカスタマイズ】スマホヘッダー固定追尾!

【Cocoonカスタマイズ】スマホヘッダー固定追尾!公式と別の方法で!
Cocoon限定!スマホ時にヘッダーを固定し、さらに追尾をしてくるカスタマイズです。そこにメニューボタンも入れてどこからでもメニューを開けるようにしました。下スクロール時にはヘッダーが隠れ、上スクロール時に表示されるようになっています。
注意点1

JavasSriptを使ってるのでAMPが使えなくなります。AMPをCocoon設定からOFFにしてから試してください。

注意点2

GoogleAdsenseを利用してる場合はサブメニューが広告にかぶるとポリシー違反になる可能性があります。

Cocoon製作者であるわいひらさんにご指摘いただきました!

GoogleAdsenseを利用してる場合はサブメニューの利用は控えた方がいいですね!

今回変更するファイルは以下の通りです。

変更するファイル
  • style.css
  • javascript.js

Cocoonヘッダーメニューカスタマイズ!手順は?

手順は以下の通りです。

  1. メニューの作成
  2. メニュー設定変更
  3. style.cssを編集
  4. javascript.jsを編集

STEP1:メニューを作成しよう!

「WordPress管理画面→外観→メニュー」を開きます。

メニュー名を「ヘッダー(わかればなんでもOK)」にし、メニューを作成を選択。

Cocoon メニュー設定1

「メニュー項目を追加」からメニューにしたい項目にチェックを入れ、メニューに追加を選択します。

Cocoon メニュー設定2

メニューはドラック&ドロップで順番を入れ替えられます。

ヘッダーメニューにチェックを入れます。

Cocoon メニュー設定3

子カテゴリはドラック&ドロップで右にズラしましょう。

Cocoon メニュー設定4

メニューを選択するとナビゲーションラベルで名前が変えられます。

Cocoon メニュー設定5

全て設定を終えたら「メニューを保存」を選択します。

STEP2:Cocoon設定からメニューの設定を変更!

「WordPress管理画面→Cocoon設定」を開きます。

ヘッダー項目を選択。

ヘッダーレイアウトを「トップメニュー(右寄せ)」に設定します。

Cocoon設定メニュー項目1

ヘッダーロゴを選択から選びます。

デモページでは背景が青いのでロゴは真っ白で作っています。

Cocoon設定メニュー項目2

他は変更せずに設定を終えたら画面下の保存ボタンを押します。

STEP3:CSSを追加!デザインを決めます!

「WordPress管理画面→外観→テーマエディター→style.css」を開きます。

下記コードをコピペしてください。

/************************************
** グローバルメニュー PC
************************************/
#header-container {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%); /* 背景色 */
}
 /* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 20px 0;
}
#header-container {
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 10;
}
.site-name-text-link {
  color: #fff;
}
.navi {
  background: none;
}
.navi-in > ul .sub-menu {
  background: #fff;
  box-shadow: 0 0 10px rgba(30, 30, 30, .1);
}
.navi-in > ul li {
  width: auto;
}
.navi-in a {
  font-size: 13px; /* ナビ文字大きさ */
  font-weight: bold;
  display: inline-block;
  position: relative;
  color: #fff; /* ナビ文字色 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}
.navi-in a:hover {
  background: none;
}
.navi-in a:before {
  position: absolute;
  left: 0;
  bottom: 6px;
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background: #fff; /* マウスON時の下線色 */
  transform: scale(0, 1);
  transition: 0.4s;
}
.navi-in a:hover:before {
  transform: scale(1);
}
.navi-in > ul .sub-menu a {
  color: #666; /* サブメニュー文字色 */
  font-size: 12px; /* サブメニュー文字の大きさ */
}
.navi-in > ul .sub-menu a:before {
  background: #42d5e7; /* サブメニューマウスON時の下線色 */
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: 100%;
}
.header-small {
  opacity: 0.9;
}
.header-small .header-container-in.hlt-top-menu .logo-header img {
  max-width: 130px;
  margin: 10px 0;
}
#container {
  padding-top: 90px;
}
[id^="toc"]:target {
  padding-top: 85px;
  margin-top: -85px;
}

色や大きさは各自設定する必要があります。
(デモページと同じでよければ変える必要なし)

STEP3-1:ロゴの大きさやヘッダーの高さを調整したい場合

ロゴの大きさなどを調整したい場合はCSSの

/* ロゴの大きさ・幅に関するもの */
.header-container-in.hlt-top-menu .logo-header img {
  max-height: 100%;
  height: auto;
  max-width: 210px;
  vertical-align: middle;
  margin: 20px 0;
}

max-widthが横幅(大きさ)です。

marginが余白になります。

これらを調整すれば大きさが変わります。

STEP3-2:背景色を変えたい場合

背景色を変えたい場合はCSSの

/************************************
** グローバルメニュー PC
************************************/
#header-container {
  background: linear-gradient(90deg, rgba(28, 189, 255, 1) 0%, rgba(55, 219, 255, 1) 51.39%, rgba(70, 205, 255, 1) 100%); /* 背景色 */
}

backgroundのカラーコードを変更すればOKです。

例えば白くしたかったら

/************************************
** グローバルメニュー PC
************************************/
#header-container {
  background: #fff /* 背景色 */
}

これでOKです!

STEP3-3:文字色を変えたい場合

CSSに補足を書きましたのでその通りに変更できます。

例えばナビの文字色を変えたい場合は

.navi-in a {
  font-size: 13px; /* ナビ文字大きさ */
  font-weight: bold;
  display: inline-block;
  position: relative;
  color: #fff; /* ナビ文字色 */
  padding: 0 20px;
  display: block;
  text-decoration: none;
}

ここのcolorの箇所になります。

STEP4:スクロールでヘッダーが縮小するようにする

最後にjavascriptを編集します。

スクロールした時にヘッダーとロゴが小さくなり、半透明になる処理を書きます。

下記コードをコピペしてください。

function init() {
    var px_change   = 100;
    window.addEventListener('scroll', function(e){
        if ( $(window).scrollTop() > px_change ) {
            $("#header-container").addClass("header-small");
        } else if ( $("#header-container").hasClass("header-small") ) {
            $("#header-container").removeClass("header-small");
        }
    });
}
window.onload = init();

これで完成です!

ヘッダーメニューにアイコンを付け足すには?

グローバルメニューアイコンつき

ナビ名の横にアイコンを入れる方法です。

簡単に入れられるのは「Font Awesome」ですね。

まずFont Awesomeのページから好きなアイコンを選びます。

下にコードがあるのでコピーします。

fontawesome

それを「WordPress管理画面→外観→メニュー」で先ほど作ったメニューを開きます。

グローバルメニューアイコン設定

ナビゲーションラベルの名前の前にfont awesomeのコードをコピペします。

それぞれ違うアイコンでOKです。

できたら「メニューを保存」で完了です。

CSSでアイコンの大きさなど整える

そのままだとアイコンが小さいので大きさや色を変更します。

#navi .fa:before{
  font-size: 1.3em; /* 大きさ */
  opacity: 0.9; /* 色を薄く */
}

数値は自由に変更してください。

色を変えるには「color:#○○○;」を入れてください。

さらにこんなヘッダーカスタマイズも可能!

Cocoonの通知エリア表示

デモページにはありませんがCocoonの通知エリアもしっかりと使えます!

cocoon通知エリア

通知設定方法!

「WordPress管理画面→Cocoon設定」の通知を開きます。

Cocoon通知エリア設定

通知エリアの表示にチェックを入れ、その他設定をして保存をします。

通知エリアカスタマイズ!

通知エリアをグラデーションにしたい場合はCSSに

.notice-area {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

を入れます。

background-imageは下記ページからコピーできるので好きなものに変えてください。

webgradients.com

文字を太くしたい場合はfont-weight:bold;をさらに追加します。

.notice-area {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  font-weight:bold;
}

Cocoonのカルーセル表示!

これもデモにはありませんがCocoonのカルーセルもしっかり表示されます。

カルーセル自体のカスタマイズ記事もいつかアップします。

カルーセルも表示される

カルーセル設定方法!

「WordPress管理画面→Cocoon設定」のカルーセルを開きます。

Cocoonカルーセル設定

カルーセルの表示、表示内容などの設定をし、保存をすればOKです!

以上です!お疲れさまでした!

Cocoonカスタマイズ他にもやってます!

他にもいろいろCocoonカスタマイズをやってますので良かったらご覧ください!

あわせて読む Cocoonカスタマイズをまとめ!おしゃれなものや機能性をあげるものなど!

Cocoonカスタマイズまとめ!おしゃれなものや機能性をあげるものなど!
Cocoonのカスタマイズまとめです。おしゃれなものから機能性をあげるものまで紹介します。プロフィール、タブ切り替え、トップページ、リスト、ボックス、スマホのメニュー固定方法なども紹介していきます。

コメント

  1. はじめまして(^^♪
    初心者です。ヘッダーロゴとメニュー固定(追従)有難うございます。

    1つ教えていただけますか?
    モバイルではヘッダーが表示されないように、(ヘッダーに影響がないように)
    するにはCSSに何を追記すればいいのでしょうか
    ご教授いただければ幸いです。
    よろしくお願いします。

    • >ちあきさん

      返信遅くなって申し訳ございません。

      もしよろしければ該当するURLを教えていただいてもよろしいでしょうか?

ページトップへ