【Cocoon】モバイル用ヘッダーのカスタマイズ/サイドバーをメニューとして表示させる方法

こんな方に読んで欲しい
  • モバイル用ヘッダーのアイコン位置を調整したい
  • メニューにパソコンと同じサイドバーを出したい
  • メニューを右から出したい

ここではモバイル端末からサイトを覗いた時のヘッダー(一番上のサイトロゴとか表示されている部分)の設定からカスタマイズ方法までをご紹介します。

みぃ
みぃ

モバイル用ヘッダーは設定できるんだけどその後が。。

ばう
ばう

僕のやったカスタマイズは3つだけ。全部紹介するよ!

0.まずはモバイル用ヘッダーを設定

モバイル用ヘッダーの設定方法は公式サイトにわかりやすく記載されているので、下記リンクより参照してください。僕が書くより100倍わかりやすいです。

作成後、確認するとこのように表示されると思います。

ばう
ばう

何を表示するかの設定により項目は異なると思いますが、基本は検索(#search)、ロゴ(#logo)、メニュー(#menu)になるかな。

ここで僕は

ばう
ばう

ちょっと検索とメニューの位置が高いなぁ

ばう
ばう

メニューはパソコンで設定したサイドバーを表示させたいなぁ

ばう
ばう

メニューは右から出したいなぁ

と思い立ったのでカスタマイズしていきます!

ちなみにカスタマイズした後は

こんな感じになります。

1.検索とメニューの位置を変更

僕がやったカスタマイズはこれだけです。

/*ヘッダーの文字と背景の色を変える*/

/*検索とメニューの変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #f5f5f5; /*背景色の変更*/
	color: #708090; /*文字色の変更*/
	padding-top: 10px; /*アイコンの上からの高さの変更*/
	height: 50px; /*ヘッダーの幅の変更*/
}
/*検索とメニューの変更終わり*/

/*ロゴの変更*/
.logo-menu-button.menu-button{
	background-color: #f5f5f5;
	padding-top: 3px;
	height: 50px;
}
/*ロゴの変更終わり*/

背景色(#f5f5f5)や文字色(#708090)、アイコンの上からの高さ(10px)、幅(50px)はご自身のお好みになります。

色見本はいろんなサイトがありますが僕はこれを使っています。

捕捉

コード内に

/* ○○ */

という表記があったと思います。

/* と*/で挟んだ○○はCSSに反映されず、自分がわかりやすいようにメモとして残すことができます。

僕が記載したコード内の、

/* 背景色をリセット */

などは何をしているかわかりやすいように書いてあるだけなので消しても問題ないです。

ただし今後Cocoonの様々な箇所をカスタマイズ する場合、都度コードを追加していくので後で見返した際にどこのカスタマイズ をしたコードかわかるように/* ○○ */を自分なりに記載しておくことをおすすめします。

上記コードをコピーし、

外観テーマエディター内の

この部分に貼り付けます。下にある保存を忘れずに。

これで見た目は

になったかと思います。

みぃ
みぃ

あら簡単!

2.メニューをサイドバーに変更する

基本的にメニューはPC用グローバルメニュー かモバイルスライドインメニューとして設定した物を表示させることになます。

設定はそれぞれ下記公式サイトに記載されています。

ばう
ばう

でもせっかくならPCのサイドバーを表示させたい。。

ここではサイドバーは作成済みであることを前提としてメニューをタップしたらサイドバーが表示されるよう変更していきます。

1.#menu→#sidebarへ変更

外観メニューを開きます。

公式サイトを参照して作成したヘッダーモバイルボタン(名前はご自身で設定したもの)を選択します。

メニューをクリックしてURLを#menuを#sidebarに変更します。保存は忘れずに。

これだけでサイドバーが表示されるようになります。

2.sidebarにかえることで。。

ここで一つ問題が。sidebarにかえると、

みぃ
みぃ

あれ、右のメニューがデフォルトに戻っちゃった。。

そうなんです、せっかくカスタマイズしたメニューアイコンが元に戻ってしまいました。

これは先ほど紹介したコードの

.navi-menu-button.menu-button /*検索とメニューの変更の2行目*/

この部分がメニューボタンに#menuを選択した場合のコードだからです。

#sidebarを選択した際は、

.sidebar-menu-button.menu-button

と変更します。外観テーマエディターを変更し、保存。これで元に戻ったと思います。

みぃ
みぃ

ほっ。。

3.メニューを右から出したい

捕捉

2.で既にサイドバーをメニューとして設定している場合はデフォルトで右から出て来るので、この後のカスタマイズは不要です。PC用グローバルメニュー かモバイルスライドインメニューをメニューとして表示させる場合の追加カスタマイズです。

メニューはなんとなく右から出るもの!という固定観念に縛られております。。

これも外観テーマエディター内に、

/*スライドインメニューを右から*/
.navi-menu-content{
	left: auto;
	right: 0; /*右寄せにする*/
	background-color: #f5f5f5; /*背景の色*/
	transform: translateX(101%);
}
/*スライドインメニューを右から 終わり*/

をコピペして保存します。

これでメニューを右から出すことができました。

ばう
ばう

この設定の説明、難しい。。わかりづらかったらごめんなさい。ご連絡などいただければフォローします。

みぃ
みぃ

bauはこき使ってなんぼよ!

ばう
ばう

喜んで!

コメント

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