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

シェアする

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

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

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

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

Simplicityスマホメニューのカスタマイズサンプル

スポンサーリンク

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

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

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

シンプルなCSSは下記。

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

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

スマホビュー:ビフォー

スマホメニューのデフォルトの位置

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

Simplicityヘッダー:スマホメニューのシンプルなボタン

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

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

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

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

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

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

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

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

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

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

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

ピンクっぽくした場合

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

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

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

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

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

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

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

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

スマホビュー:アフター

スマホ320pxで表示

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

タブレット768pxで表示

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

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

画像URLの貼り付けが不明なら、下記リンクの目次1.1.2添付ファイルのURLで詳しい説明してるので、どうぞ^^

LINKWordPress初心者に画像追加時のメディアを説明!画像サイズ変更・画像のURLはどこ!?キャプション・代替テキストは超大事だからチェックねっ

上記CSSをスタイルシートにコピペしたら、画像URLを13行目のカッコ内にurl(https://hoge.com/wp-content/uploads/….png) と貼り付けたら反映されますよ。

背景が透明な透過画像を下記サイトさんよりダウンロードしてくださいね。

LINK一列レースの背景素材|フリー素材*ヒバナ*

可愛い素材がたくさんあるのでダウンロードして、ビバ★りずむのアチコチで装飾してるほど!オススメしたいフリー素材サイトです^^

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

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

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

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

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

  • #ff0000/* 赤 */
  • #00c4ff/* ブルー */
  • #cc00ff/* パープル */
  • #ff00d4/* ピンク */

トグルメニュー:レースのデザイン8色

  • #ff85ea/* 淡いピンク:コードはこれ */
  • #ff8585/* オレンジ */
  • #942a00/* 茶 */
  • #000000/* 黒 */

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

さいごに

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

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

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

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

スポンサーリンクと関連記事

関連記事(スポンサーリンク含む時あり)

シェアする

フォローする

  • Follow Me →
スポンサーリンク
トップへ戻る