［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;
}

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

モバイルのキャッチフレーズ

もう一つやってみたのが、
ヘッダーにあるキャッチフレーズの非表示です。

キャッチフレーズ自体の非表示は、Cocoon設定からできる。

ですが、
これを“表示しない”にすると、PCとも表示ナシになるパターン💦

PCには表示させ、
スマホでは出さないようにするには、、？これがまた紆余曲折w

いくつか検索にはかかります。
が！コードがどれも反映しない、、

参考になりました
Cocoonフォーラムに感謝です。

同じく管理画面の外観 ⇨ カスタマイズ ⇨ CSS追加から

/*モバイルキャッチフレーズ非表示*/
.tagline {
display: none;
}

このコードのままで上手くいった気がする…

けれどそのあとで、
スマホだけでなくPCでも非表示になってしまった。あれ？💦

ってことで試行錯誤でっす。
ソースの表示で見ると、確かにキャッチフレーズのコードとしては合っている。

ってことで、
コードを次のように表記し直してみると、見事狙った通りになりました👍

さきほどのコードを削除し、
モバイル用のCSS欄に移動します。

気づけば難しくないのかもしれませんが😆
考えてみると、コレはPC表示も込みのコード…モバイル専用のコードというわけではなく。

/*モバイルグローバルメニュー並び*/
@media screen and (max-width: 768px) {
#navi .navi-in > .menu-mobile li {
width: 33%;
}
#navi .navi-in > .menu-mobile li a {
font-size: 13px; /*場合によってフォントサイズを小さく*/
}
div.tagline {
display: none;
}
}

な・の・で
モバイル版グローバルメニューの投稿で、
行数少なく表示するコードに追加するかたちで記入してみました。