WordPressコクーン

[WordPress]フッターモバイルボタンが出ない謎

Cocoonのモバイルメニューについてです。

今のところこのサイト…
おそらくこんなふうに見えていると思います。

スマホで見たサイトトップページ

 

Cocoonでモバイルの設定をするには、
管理画面のCocoon設定から入り ⇨ モバイルのタブをクリックし選択します。

どのモードがどんなふうに見えるか、
のイメージを下に載せてますので、参考までにご覧ください。

自分の好みは
①ヘッダーあり
②グローバルナビが出て(サイドからスライドでもOK)
③モバイルフッターあり
④サイドバーはスライドから出せるパターン

っていうイメージ。

つまりこれを踏襲するのは、
モバイルメニューの、ヘッダー・フッターモバイルボタンしかないな、という…。

コクーンのヘッダー・フッターモバイルボタン選択

 

ところが最初の頃は、、
こんな表示になっており、イメージと違ってた。。

モバイル表示のサイトフッター部分

 

これだと、
サイドバーに出るのが出せないな…と💧

しばらく考えたあげく、
この表示に原因があったと気づいたのでした😅

PC用にフッターメニューを作ってたのですが、
それをモバイルにも設定してた、、のです。

ワードプレスのメニュー設定

 

Cocoonモバイル用のメニューまで、
PCに倣うとは思わなかったんだなぁー苦笑)

なのでメニュー設定から、モバイルフッターのチェックを外しましょう。

メニューからフッターモバイルボタンを外す

 

逆に言うと、
モバイルヘッダーやフッター向けのメニューを作り、反映できるのは魅力かと思います😁

[WordPress]フッターメニューの作りかた
フッターメニュー作成のしかた、新たに項目を作るには?ホームへのリンクを新たに追加してみました

 

さてCocoonにあるこれらのモバイルメニュー、
スマホだとどんなふうに見えるのか…上げてみました。

◦ボタンを表示しない
モバイル用ボタンなしの状態です。
つまり、PCサイトをモバイル版・レスポンシブデザインで見たような状態になる。

サイドバー表示は、記事のあとにスクロールで続くようになってます。

 

◦トップメニュー
ヘッダーにカスタマイズの余地ありそーなw

モバイル用にヘッダーをカスタマイズする、などで向いてそーなパターンに見えます。

トップメニュー版のトップ部分

スクロール下にはサイドバー部分が出るんですね。
これはこれで面白いというか…

トップメニュー版のモバイル下部分

 

◦ヘッダーモバイルボタン
ヘッダーにはモバイル用のメニューが出ます。
フッターはPCサイトのデザインを踏襲、モバイル独自のメニューは出ません。

そして、、サイドバーの情報も出ませんね💧

ヘッダーモバイル版のトップ部分
ヘッダーモバイル版のモバイル下部分

 

◦フッターモバイルボタン
上と逆でヘッダーにはPCと同じのが反映され、
フッターにはモバイル版のメニューが出ます。

フッターモバイル版の表示イメージ

 

◦ヘッダー・フッターモバイルボタン
ヘッダーにもフッターにも、モバイル版メニューが出るパターンです。

ヘッダーにグローバルメニューが出たまま、
スライドメニューでもまた同じメニューが出る…って点ではスマートじゃないかもしれません😅

なのでモバイルヘッダーは、
PC版と同じのをスマホで表示するのもカラー的にナンだな…と思いw
モバイル版にしてるトコはありますね。

コメント

タイトルとURLをコピーしました