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

Simplicity2でスマホメニューがヘッダー画像に被らないよう、画像上に領域を作って、メニューを置くカスタマイズをしました。シンプルなデザインと、レース画像を導入して作ったデザイン。後者は、可愛いもの好き女性にピッタリです。

パソコンビューで画面サイズが小さいとき、ヘッダー画像右側が見切ないように、ロゴ画像設定から1070pxの画像を全て表示させるカスタマイズをしています。

LINKSimplicity2：3つあるヘッダー設定を画像で徹底比較！ヘッダー画像の完全レスポンシブ対応【CSSコピペ】

1つはCSSのコピペで完全対応でき、もう1つは画像をダウンロードしてそのURLを貼り付けます。全て説明してるので、あなた好みのものを導入して、カスタマイズしてください＾＾

※モバイル（トグル）メニューをタップしても開かないときは、普段見てるページにエラー・不具合があったとき、試してほしいことチェックしてくださいね。

スマホメニューボタンをヘッダー画像の上にあげるCSS

ヘッダー画像にカブらないよう、画像上のメニュー置き場を作って移動させます。同時に枠を作って、ごうどう≡のメニューとその下にmenuと文字を付けたカスタマイズです。

CSSをコピペする場所は、ダッシュボードの外観から、テーマの編集よりSimplicity2 child: スタイルシート (style.css)の一番下に貼りつけて反映するようにしてます。

シンプルなCSSは下記。

/* menuの親要素に高さ指定 */
#h-top #mobile-menu {
	height: 62px;
}

/* メニューに色・内側・余白・枠・枠の外の上の余白 */
#h-top #mobile-menu a {
	color:#737373;
	border: solid 2px #737373;
	background-color: #fff;
	padding: 2px 14px;
	margin-top: 6px;
	height: 43px;
}
/* 親テーマのフォントサイズにあわせて * 639px未満のとき */
@media screen and (max-width: 639px) {
	/* menu親要素の高さ指定 */
	#h-top #mobile-menu {
		height: 56px;
	}
	/* メニューの高さ */
	#h-top #mobile-menu a {
		height: 36px;
	}
}

/*メニューの下に文字を付ける*/
#mobile-menu a:after {
	content: "menu";
	display: table-cell;
	font-weight: bold;
}

2個目の記載は#h-top #mobile-menu aと指定してるのは、#mobile-menu aとすると、スマホが親テーマのCSSに負けてしまうから、CSSの優先順位をパワフルにするため、#h-topを追加して指定すれば反映するんです。

今後CSSが反映しない場合、優先順位を強くするなど試してくださいね。

スマホビュー：ビフォー

CSSをコピペした後の、スマホビュー

画像に被らず、シンプルに表示されました。

ちなみに28行目#mobile-menu a:afterをa:beforeにすると、文字が上にきます。

#mobile-menu a:beforeにして、menuの文字を上に変更

また29行目content: "menu";をcontent: "めにゅ～";にした場合はこんな感じです。

content: “めにゅ～”;に変更した場合の表示例

色を変えて、好みのメニューボタンにする

フォントとボーダー、背景の色を変えるだけで、自分好みのメニューボタンができますよね。さらにボックスにシャドーを入れる例もあげました。基本のCSSを書き換えるか、よく分からない場合はCSSの下にコードを追記してください。

フォントの色とボーダーをピンクにしたら、イメージが変わります。

#h-top #mobile-menu a {
	color:#e8a1ff; /* ピンク系 */
	border: solid 2px #e8a1ff;
}

ボーダーとカラーをピンクに変更

またカラーを白、ボーダー・背景を黒っぽく変更するだけでイメージが変わります。

#h-top #mobile-menu a {
	color:#fff; /* 白 */
	border: solid 2px #232323; /* 黒系 */
	background-color: #232323;
}

カラーを白、ボーダーと背景を黒系に変更

ピンクっぽくした場合

#h-top #mobile-menu a {
	color:#fff; /* 白 */
	border: solid 2px #f2a8ff; /* ピンク系 */
	background-color: #ffaef1;
}

カラーを白、ボーダーと背景をピンク系に変更

メニューに影を入れたい場合

#h-top #mobile-menu a {
	box-shadow: 5px 5px 7px -4px rgba(160, 160, 160, 0.86);
}

メニューのボックスに影を作った場合

やりだすとキリがないけど、イロイロ試してみてくださいね＾＾

スマホメニューってすぐスクロールされ目立たないから、可愛いフワフワで少しでも目を引けば！と、このブログではスマホのメニューを動かしてます。

背景に画像を使った可愛いメニューボタン

女性用に可愛いフリー素材を使って、メニューボタンを作りました。基本のCSSと背景色を変えたイメージ、背景素材の導入方法など順番に書いていきますね。

基本のCSSは下記のとおり。

/* メニューに色・内側・余白・枠・枠の外の上の余白 */
#h-top #mobile-menu a {
	color:#fff;
	border: 1px solid #ff70e6;
	background-color: #ff85ea;
	padding: 2px 24px 2px 6px;
	margin-top: 6px;
	height: 44px;
}

/* メニューの背景画像 */
#mobile-menu-toggle {
	background: url(画像のURL) repeat-y right top;
}

/* 親テーマのフォントサイズにあわせて * 639px未満のとき */
@media screen and (max-width: 639px) {
	/* menu親要素の高さ指定 */
	#h-top #mobile-menu {
		height: 53px;
	}
	/* メニューの高さ */
	#h-top #mobile-menu a {
		height: 36px;
	}
}

/*メニューの下に文字を付ける*/
#mobile-menu a:after {
	content: "menu";
	display: table-cell;
	font-weight: bold;
}

スマホビュー：アフター

スマホ320pxで表示

タブレットビュー：アフター

タブレット768pxで表示

使用した画像の導入する手順

上で使った画像を素材屋さんからダウンロード後、管理画面のメディアから画像をアップして選択されてる状態で、画像URLをコピーします。

この枠は紹介したメニューボタンの背景画像を反転させて、左側に持ってきて作りました。メニューボタン以外でもこのカスタマイズで応用できますねっ❦

背景に画像を使ったメニューボタンのバックの色を変更

画像背景の指定を#mobile-menu-toggleで指定して、#h-top #mobile-menu aと言う領域で、背景色を変更するようにしたので、5行目の背景background-colorで装飾を自分好みの色を変更してください。

#ff85ea部分を好きな色に変更した例をあげますね。

/* メニューに色・内側・余白・枠・枠の外の上の余白 */
#h-top #mobile-menu a {
	color:#fff;
	border: 1px solid #ff70e6;
	background-color: #ff85ea;
	padding: 2px 24px 2px 6px;
	margin-top: 6px;
	height: 44px;
}

左上から下記の色に変更した例です。※4行目のボーダーborderの色は背景より少し濃くして強調。

ブログにあった好みの色に指定・変更してくださいね。

さいごに

Simplicityのメニューボタンを移動して、装飾してみました。小さなカスタマイズをしていくと、ちょっとずつブログのイメージが変わってきますよね。

何より一番大事なのは、メニューボタンをクリックしたとき、ユーザーさんに見てもらいたいカテゴリや固定ページなどを置く、メニューの設定です！

Simplicity2では、ダッシュボードの外観にあるメニューからも設定ができるので、チェックしてみてくださいね。

では、かうたっくでした＾＾