CocoonスライドインのNaviメニュー！背景など可愛くカスタマイズするCSS

Cocoonでスライドインを使ってると『左下』にある『≡メニュー』ボタンをタップした、スマホ用ナビの『背景色』や『デザイン』を可愛くするCSSをご紹介❦

どのようにCSSを指定すれば『どこが反映』するか、はじめにザッと簡単に説明します。

1. CSSの指定方法・変更所の説明
2. ナビメニュー背景に色を使う全CSS
3. 画像を使う場合の全CSS

完成イメージhover時の見た目

スマホのメニューボタンを開いたナビのCSS：説明

今回変更する以下4点のCSSの指定方法などチェックしてくださいね。

• モバイル下固定ナビ、全領域
• ナビの文字を変更
• 文字の背景
• リンクをタップしたときの文字・背景色

スマホナビ全領域、背景色を変更（背景をパターン画像に）

スライドインをタップして、左からサッっと出る領域全部を指定します。

デフォルト：ビフォー

アフター

.navi-menu-content {
	background: #ffeff5;
}

ナビ領域の背景に色を入れればOK！

• #ffeff5はピンクの薄い色。
• 画像にしたい場合は以下の通り。

.navi-menu-content {
	background: url(画像のパス) top left;
	background-attachment: fixed;
}

ナビ全領域に背景画像を入れた例

ナビの文字色を変更

ビフォーは上の画像のままなので。

アフター：文字を紫系に

.menu-drawer a {
	color: #d57efd;
}

この領域はリストに囲まれた、リンク（aタグ）の文字色を変更する感じ❦

ナビのリンク（文字）背景を変更

ナビはリストになってて、簡単に言えば『メニューの文字』を『囲む領域』の背景を変更しますね。

ナビのリンク背景色を変更

CSS変更後

.menu-drawer a {
	background-color: #fff1f6; /* 文字の背景はナビ領域背景よりホンノリ明るめがオススメ */
	color: #d57efd;
}

ナビのリンク（文字）背景をオシャレに

上記のままでも良いと思いますが、個人的に『ふんわり』した『優しい』印象が好き❦

って事で。

ボーダーを入れずに微妙にぼかした感じに。

box-shadowで印象を変更

.menu-drawer a {
	background-color: #fff1f6;
	color: #d57efd;
	box-shadow: inset 0 0 15px 3px #ffe8f0; /* この部分追記 */
}

不要箇所は、1行削除してください。

• box-shadowの色は背景色background-colorより薄めがオススメ

リンクにマウスを置いたときの背景色

onマウスhoverしたとき、背景色を変更する指定方法と、見た目❦

onマウス、ビフォー

アフター

ちょっと派手。

• 文字色を白にするなら、濃い色を❦
• シャドーが良い感じにやさしいかも

ただ。

• 背景色は薄いほうが、キレイ！と思うので、適当に変更してみてくださいね！

CSS

.menu-drawer a:hover {
	background-color: #ffc2f5;
}

リンクをタップしたときの文字・背景色

マウスを置いたときリンクの背景変更をすれば文字の色も変更すれば可愛くなりますよね。

ビフォーは上の画像のとおり。

アフター：文字を白に変更

CSS

.menu-drawer a:hover {
	background-color: #ffc2f5;
	color: #fff; /* ここを変更 */
}

可愛くなった！けど…

文字をもっとハッキリと見せたいとき

フォントを太く、シャドーを入れるのも手。※ここまでしなくても良いと思いますが、こんな感じ。

アフター：文字を少し強調

.menu-drawer a:hover {
	background-color: #ffc2f5;
	color: #fff;
	font-weight: bold; /* 文字を太く */
	text-shadow: 0 1px 0 #ff77e8; /* シャドーを */
}

背景を任意の色に指定。全CSS

/* スライドインのメニュー */
.navi-menu-content {
	background-attachment: fixed;
	background: #ffeff5;
}
/* メニューのリンクの色を変更 */
.menu-drawer a {
	background-color: #fff1f6; /* 背景色 */
	color: #d57efd; /* 文字色 */
	box-shadow: inset 0 0 15px 3px #ffe8f0;
}

/* リンクのhover色を変更 */
.menu-drawer a:hover {
	background-color: #ffc2f5;
	color: #fff;
	font-weight: bold; /* 文字を太く */
	text-shadow: 0 1px 0 #ff77e8; /* シャドーを */
}

スタイルを適応した感じ

動く画像で見ると以下。

hover時の見た目

エンドレスで動きます＾＾；

メニュー背景を画像のとき。全CSS

background: url(画像のパス) top left;赤文字部分に、画像のパス（URL）を入れてください。

/* スライドインのメニュー背景画像 */
.navi-menu-content {
	background: url(画像のパス) top leftt #fae8ee;
	background-attachment: fixed;
}
/* メニューのリンクの色を変更 */
.menu-drawer a {
	background-color: #fff1f6; /* 背景色 */
	color: #d57efd; /* 文字色 */
	box-shadow: inset 0 0 15px 3px #ffe8f0;
}

/* リンクのhover色を変更 */
.menu-drawer a:hover {
	background-color: #ffc2f5;
	color: #fff;
	font-weight: bold; /* 文字を太く */
	text-shadow: 0 1px 0 #ff77e8; /* シャドーを */
}

背景を画像にした見た目

hover時は上と同じです。

横幅が狭い状態でスライドインのひだり下をタップすれば、似たスタイルが見られると思います。

背景画像の導入について

以下リンク先。見出し『使用した画像の導入する手順』

LINKSimplicity2のカスタマイズ！スマホメニューをヘッダー画像上に移動し装飾❦可愛いデザイン

それでは、かうたっくでした❦