見ていただきありがとうございます。ぽぽです。
Cocoonのメニューで、困っていませんか。
- メニューは作ったけど、合っているのかわからない
- スマホで見ると、下に知らないボタンが並んでいる
- 三本線のメニューを押すと、中身がなんだか適当
- 入れ替えたいけど、何を入れればいいかわからない
私も、ここで止まった側です。
スケートボードのブログは、Cocoonで書いています。
メニューは、ネットとYouTubeで調べて作りました。
でも正直、「YouTubeどおりにやったら、こうなっただけ」なんですよね😇
先に、答えを書いておきます。
| 困っていたこと | 決めている場所 |
|---|---|
| パソコンの上のメニュー | 「外観」→「メニュー」の「ヘッダーメニュー」 |
| スマホの下のバー | 「Cocoon 設定」→「モバイル」タブ |
| 三本線の中身 | 「外観」→「メニュー」の「モバイルスライドインメニュー」 |
Cocoonのメニューは、この2か所で決まります。
下のバーは、設定1つで消えました。
ということで、私のブログで本当に切り替えた実物を見せますね。
- 過去の自分：ネットとYouTubeでメニューを作った。スマホの下のバーは、あることも知らなかった
- いま：SWELLでブログ4年目（スケートボードのブログはCocoonのまま）
Cocoonのメニュー カスタマイズで、私が止まった3つ
いまの私のスケートボードのブログです。
スマホで見ると、こうなっています。
| 番号 | 見えているもの | 私の状態 |
|---|---|---|
| ① | 上の「メニュー」（三本線） | 中身が適当なまま |
| ② | 上の「検索」 | そのまま |
| ③ | 下の「ホーム・シェア・トップ・サイドバー」 | あることも知らなかった |
パソコンでは、上にメニューが5つあります。
- ホーム
- Privacy Policy
- プロフィール
- お問い合わせ
- サイトマップ
自分で選んだというより、YouTubeどおりの結果です。
このブログには、満足していません。
でも記事に使えると思って、わざとそのままにしています。
ちなみに、このぽぽブログはSWELLで書いています。
CocoonからSWELLに変えて、記事が崩れた3ヶ月の話はこちらです。
Cocoonのメニューは「外観」と「モバイル」タブの2か所
メニューを決めている場所は、2つあります。
| 場所 | ここで決めること |
|---|---|
| 「外観」→「メニュー」 | メニューに何を並べるか |
| 「Cocoon 設定」→「モバイル」タブ | スマホで、ボタンを上と下のどこに出すか |
では、順番に見ていきますね。
1つ目：「外観」→「メニュー」＝何を並べるか
WordPressの管理画面で、「外観」→「メニュー」を押します。
私のブログは、こうなっていました。
②の赤い枠に並んでいるのが、パソコンの上に出ているメニューの5つ。
並べ方は、こうです。
- ①（青い枠）で、並べたいページにチェックを入れて「メニューに追加」
- ②（赤い枠）に、そのページが並ぶ
- ③（緑の枠）の「メニューを保存」を押す
作ったメニューは、ブログの「どこに出すか」も選べます。
これを、「位置」と呼ぶんですね。
④の「位置を管理」を押すと、一覧で見られます。
Cocoonで選べる位置は、6つありました。
| 位置の名前 | 出る場所 |
|---|---|
| ヘッダーメニュー | パソコンの上のメニュー |
| ヘッダーモバイルメニュー | スマホの上のメニュー |
| ヘッダーモバイルボタン | スマホの上のボタン |
| フッターメニュー | いちばん下のメニュー |
| フッターモバイルボタン | スマホの下のボタン |
| モバイルスライドインメニュー | 三本線を押すと出る中身 |
私が使っていたのは、赤い枠の「ヘッダーメニュー」だけ。
ほかの5つは、空っぽ（「メニューを選択」のまま）でした。
2つ目：「Cocoon 設定」→「モバイル」タブ＝ボタンをどこに出すか
スマホのボタンは、2か所に出ます。
- ①上のボタン：三本線（メニュー）と検索
- ②下のボタン：ホーム・シェア・トップなど
この2つを出すか出さないかを、「モバイル」タブで選びます。
赤い枠の「モバイルメニュー」で、選べるのは5つ。
5つとも、私のブログで切り替えて撮りました。
1. ボタンを表示しない（ミドルメニューのみ）
上にも下にも、ボタンが出ません。
2. トップメニュー
いちばん上に黒い帯が出て、右に「MENU」。
下のボタンは、出ません。
3. ヘッダーモバイルボタン
上にだけ、ボタンが出ます。
下のボタンは、消えます。
4. フッターモバイルボタン
上のボタンは、消えます。
下には、5つ並びます。
- メニュー
- ホーム
- 検索
- トップ
- サイドバー
5. ヘッダー・フッターモバイルボタン（私のいまの設定）
上にも下にも、ボタンが出ます。
だから私のブログは、上にも下にもボタンがあったんですね。
画面には「1024px未満で表示されます」とも書いてあります。
画面の幅がせまいときだけ、という意味です。
スマホや、タブレットくらいの幅ですね。
Cocoonのスマホの下のバーは「モバイルメニュー」で消せる
ここが、いちばん知りたかったところです。
下のバーは、私が入れたものではありません。
何も決めていないと、Cocoonが自動で並べるボタンでした。
中身は「ホーム・シェア・目次・トップ・サイドバー」。
目次は、目次がある記事でだけ出ます。
下のバーを消す手順
- 管理画面で「Cocoon 設定」を押す
- 上のタブから「モバイル」を押す
- 「モバイルメニュー」で「ヘッダーモバイルボタン」を選ぶ
- 「変更をまとめて保存」を押す
- スマホで開いて、下のバーが消えたか確かめる
下のバーが消えて、記事の一覧が下まで見えるようになりました。
上の「メニュー」と「検索」は、残りますね。
ぽぽ記事のために試したあと、スケートボードのブログは元に戻しています。
消さずに中身を変えるなら「フッターモバイルボタン」
下のバーを残して、中身だけ変える方法もあります。
- 「外観」→「メニュー」で、新しくメニューを作る
- 位置の「フッターモバイルボタン」にチェック
- 「メニューを保存」を押す
自動のボタンの代わりに、そのメニューが並びます。
これも、Cocoon公式の最新版の中身で確かめています。
私のブログで、試しに4つ入れてみました。
- ホーム
- スケボー
- アウトドア
- プロフィール
自動のボタンが、自分で選んだ4つに変わりました。
マークは、どれも星になるんですね。
スクロールで隠れるのは「固定表示」がオフだから
同じ「モバイル」タブに、「モバイルボタンの固定表示」があります。
私のブログは、オフ。
オフだと、下へスクロールすると、上と下のボタンが隠れます。
オンにすると、スクロールしても出たままです。
どちらも、同じ所までスクロールして撮りました。
Cocoonのモバイルメニュー（三本線）の中身
次は、三本線を押したときの中身です。
私のブログでは、パソコンの上と同じ5つが出ます。
- ホーム
- Privacy Policy
- プロフィール
- お問い合わせ
- サイトマップ
三本線専用のメニューを、作っていなかったからでした。
専用のメニューがないとき。
Cocoonは、「ヘッダーメニュー」をそのまま出します。
| 三本線の中身 | 決まり方 |
|---|---|
| 専用のメニューがある | 「モバイルスライドインメニュー」の中身 |
| 専用のメニューがない | 「ヘッダーメニュー」と同じ中身 |
「適当な画面」に見えた理由は、たぶんこれ。
スマホ用に選んだメニューではなかったんですね。
三本線の中身を入れ替える手順
- 「外観」→「メニュー」を開く
- 「新しいメニューを作成しましょう」を押して、名前をつける
- 左から出したいページを選んで「メニューに追加」
- 「メニューの位置」で「モバイルスライドインメニュー」にチェック
- 「メニューを保存」を押す
私のブログで、試しに6つ入れてみました。
- ホーム
- スケートボード
- 初心者向けスケートボードガイド
- アウトドア
- プロフィール
- お問い合わせ
パソコンと同じだった中身が、スマホ用の6つに変わりました。
ぽぽ何を入れればいいかは、正直まだ迷っています。入れ替えたかったのに、わからなかったところです。
試しに入れたメニューは、撮ったあと消しています。
カテゴリーをメニューに並べる方法もあります。
ただ私のブログは、カテゴリーが多すぎて減らせなかった側。
なので、そこまでは考えていません。
カテゴリーの話は、サイドバーの記事に書いています。
スマホでロゴが出ないときは、ヘッダーの記事へ。
SWELLのメニューは、楽だと思う
このぽぽブログは、SWELLで書いています。
メニューは、楽だと思いますね。
ただ、この記事のためにスマホで三本線を開いてみたら。
中身が、空っぽでした😇
そこで、AIに手伝ってもらって、中身を入れました。
SWELLでは、位置の名前が「スマホ開閉メニュー内」。
そこにメニューを入れるだけでした。
中身は、トップページの「悩みから選ぶ」と同じ4つ。
それと、SWELLに変えた話です。
CocoonからSWELLに変えたときの話は、こちら。
ほかの場所のカスタマイズは、こちらにまとめています。
まとめ：Cocoonのメニュー カスタマイズ
- Cocoonのメニューは「外観→メニュー」と「Cocoon 設定→モバイル」の2か所で決まる
- スマホの下のバーは、何も決めていないとCocoonが自動で並べるボタン
- 下のバーを消すなら、「モバイルメニュー」を「ヘッダーモバイルボタン」に
- 中身を変えるなら、位置「フッターモバイルボタン」にメニューを入れる
- 三本線の中身は、専用のメニューがないと「ヘッダーメニュー」と同じ
- 入れ替えるなら、位置「モバイルスライドインメニュー」にメニューを入れる
- 「モバイルメニュー」の5つは、上だけ・下だけ・両方・なしで見え方が変わる
- SWELLでは、三本線の中身は位置「スマホ開閉メニュー内」
私は、下のバーがあることも知らないまま来ました😇
まずは「モバイル」タブを、一度開いてみてくださいね。
コメント