［WordPress］モバイル・スライドメニューのカスタマイズ方法

スマホでサイトを見るときならでは、のカスタマイズいろいろ…
その一つがモバイルメニューであります。

モバイルスライドインメニュー、
モバイルスライドメニュー、、と呼ばれるよう。

今回は、
こちらのカスタマイズをしてみようと思います。

Cocoonでは
管理画面のCocoon設定から入り、モバイルをクリックし設定します。
自分の設定はこんな感じ、、

モバイルスライドメニューについて、
参考になりましたサイト様を上げておきます。

この記事では無料WordPressテーマ「Cocoon」のモバイル（スマホ）サイトでスライドメニューを設定する方法と見た目のカスタマイズする方法を解説します。Cocoonを使ってブログ・サイトを作成中Cocoonを使っていて新たにモバイル（...

自分のスマホ操作では、
左のメニューを開くとグローバルメニュー。
右にはサイドバーが反映され。

Cocoonのモバイル設定で、
チェックを入れた、フッターモバイルボタンのデフォルトがこんな感じだそう。

メニューをタップするとこんな画面 ⇩
（すでにカスタマイズ後ですw）

サイドバーをタップするとこんな感じ ⇩

メニューとサイドバー…
開いた先のデフォルトは、、なにより文字サイズが小さめだったのです。

なので文字は少し大きめに、
下線などつけての表示にしました。

その前に、、
スマホ特有のコード知るのがなかなか難しく💧

ほぼネット情報をヒントにやってみた次第でっす。

モバイルスライドインメニュー

まずは左のメニューから。。
これ、サイトタイトルの下に出る、グローバルメニューが出てるトコ。

タップすると、
左から右に向かって出るイメージですね。

私の場合、
ヘッダーに出してるので要らないんじゃ？なのですがw

どういうコードが使われてるのかなど…興味あるのでやってみました😁

CSSの記入先はココから、
管理画面の外観 ⇨ カスタマイズ ⇨ CSS追加で

/*モバイル左メニュー*/
.menu-drawer a {
font-size: 16px;
line-height: 1.8;
border-bottom: solid 1px #e6e6e6;
}

.menu-drawer a:hover {
background-color:#fce8f0;　/*マウスオーバー時の背景色*/
}

・文字を大きめ、
・項目の下に下線、
・リンク背景に色指定です。

参考にしましたサイト様、
ありがとうございます。

【Cocoonカスタマイズ】モバイルメニューを垢抜け！スタイリッシュなデザインへ - My Cup of Trip

私はWordPressのテーマはCocoonを利用しています。このテーマ、無料なのに機能が至れり尽くせりで、作者のわいひらさんには感謝しかありません。初心者の私ですが、どうにかこうにか、そこそこいい感じのブログを作る

モバイルスライドインサイドバー

これに比べると、
ちょい難しかったのがサイドバーの設定…

タップすると、
右から左に向かって出るイメージ。

モバイルのサイドバーなカスタマイズ自体、
なかなか検索で見かけず💦

例えばカテゴリーなどを、
メニューで表示させるカスタマイズが多いようです。

新たにメニューを作り、モバイルに表示させるというパターンで。

ですがそうはせず、
なんとか探ってみると、、候補がありました。

スライドインサイドバー、タイトルの背景色変更について

こんにちは。初めて質問させていただきます。現在ブログを運営しており、カスタマイズを進めていますが、サイドバーのタイトルの背景色が変わらず困っています。 PC版では白く表示されていますが、モバイル版スライドインサイドバーでのみ背景色がグレ...

サイドバーもデフォルトは小さい文字だったので、

・文字サイズを大きめに…
・見出しタイトル部分も少し変える

まずは
このコードで反映するかどうかお試しです…

/*スマホのサイドバータイトル*/
#slide-in-sidebar .widget-title {
padding: 5px 0px 5px 0px
}

/*スマホのサイドバー部分*/
#slide-in-sidebar,
#slide-in-sidebar a {
font-size: 16px;
}

結果、これで反映できてるので
これからもカスタマイズしてみようと思います(#^^#)