2023.10.14記事内に広告が含まれています。ブログのデザインって難しいですよね。モバイル画面のデザインってPCよりも情報が少ないです。最近Cocoonのモバイルページのデザインをいじってたのですが、三本線のメニュー(ハンバーガーメニュー呼びます)の実装に躓いたので備忘録としてやり方を書き残しておきます。設定は手順通りに進めれば10分程度で完了します。たかしこの記事はこういう人におすすめ。スライドインメニューを作成する終わりにハンバーガーメニューとはハンバーガーメニューはモバイル画面の上部によくあるナビゲーションメニューです。左上の三本線のメニューがハンバーガーメニューだ。ハンバーガーメニューをタッチすると隠れていたメニューがスライドインします。モバイルは表示領域が狭いので色々なメニュー(プロフィールやカテゴリなど)を設置したい場合はこの場所を活用するといいです。モバイルヘッダーを設定するまずは、モバイルヘッダーを作成してみましょう。管理画面から「外観」→「メニュー」を選択します。「新しいメニューを作成しましょう」をクリックします。「メニュー構造」内の「メニュー名」に名前を入力しましょう。ここではモバイルヘッダーという名前をつけます。名前をつけたら「ヘッダーモバイルボタン」にチェックを入れて、「メニューを作成」をクリックしましょう。このあとはヘッダーメニューに要素を追加していきます。ここでは、左からハンバーガーメニュー、サイトロゴ、検索にします。「メニュー項目を追加」が有効になるので、「カスタムリンク」をクリックしましょう。カスタムリンクが開くので、「URL」に「#menu」、「リンク文字列」にメニューに表示したい文字を入力します。ここでは「メニュー」としました。URLに「#menu」を入力することでモバイルヘッダーにメニューが表示されるようになります。入力したら「メニューに追加」をクリックします。「メニュー構造」に「リンク文字列」に入力したブロックが追加されたらOKです。同じ要領で、「URL」に「#logo」、「リンク文字列」にメニューに表示したい名称を入力します。URLに「#logo」を入力することでブログのロゴ画像がモバイルヘッダーに表示されるようになりますので特に「リンク文字列」には何を入れてもいいのですが、素直にブログタイトルを入力しておきましょう。入力したら「メニューに追加」をクリックします。最後に「URL」に「#search」、「リンク文字列」にメニューに表示したい文字を入力します。URLに「#search」を入力することで検索がモバイルヘッダーに表示されるようになります。入力したら「メニューに追加」をクリックします。「メニュー構造」にメニューが3つ追加したら、「メニューを保存」をクリックして保存します。Cocoon設定を変更してモバイルヘッダーを表示させる次にCocoonの設定を変更して、モバイル画面にモバイルヘッダーを表示させます。「Cocoon設定」をクリックして設定画面を開きます。上部の「モバイル」タブをクリックして、「ヘッダーモバイルボタン」にチェックを入れて「変更をまとめて保存」をクリックします。プレビューか実機で確認してみましょう。(ロゴが二重で表示される場合は上図の「サイトヘッダーロゴを表示する」のチェックを外してください)...手順1でメニューを追加したはずですが、表示されていないですね。ここで悩みましたが、メニューの中に表示するメニューが設定されてないのが原因でした。たかしややこしいなぁ。「メニュー」設定を再度開きましょう。「新しいメニューを作成しましょう。」をクリックして、スライドインメニューを作成していきます。新しく作成したメニューの名前は「スライドインメニュー」としましょう。ここにはハンバーガーメニューボタンをタップしたときに表示される項目を設定します。僕の場合は、「ホーム」、「お問い合わせ」、「プライバシーポリシー」を設定しました。固定ページの他、カテゴリーや投稿を設定することができますので好みに合わせて設定してください。設定し終えたら、忘れず「メニューを保存」してください。これを設定するとモバイルヘッダーにメニューが表示されるようになっていると思います。メニューをタップすると、スライドインメニューで設定した項目が出てきますね。終わりにということでCocoonでハンバーガーメニューを設定する方法でした。僕はこの設定で昨日1日がほぼ潰れたので疲れました。皆さんはこんな設定さっさと終わらせて記事書きましょう。コピーよしおをフォローするよしお関連記事IT・ガジェットPixel(Android)で勝手に音量が変わるときの対処法Pixelのアップデート後、勝手に音量が50%になる不具合が頻発したので対処法を探してみました。TikTokが原因っぽかったのでご参考ください。Pixelを使っていてロック画面に表示されるアラームがおかしくなったり、クイック設定から開けなくなった方はいませんか?ここではその解決方法の1つを説明します。VBAを勉強しようと考えている方にメリットや勉強方法をお教えします。IT・ガジェット【緊急】Amazonプライム会費値上げ【それでも会員を続ける理由】Amazonプライム会費が8月24日から値上げされます。これは高いのかどうかプライム会員歴5年以上の僕が考えてみました。IT・ガジェットロリポップ!で2個目の無料ドメインを取得する方法【ドメインずっと無料】ロリポップ!レンタルサーバーの神サービスが「ドメインずっと無料」さらに改善され、2個めのずっと無料ドメインが利用できるようになりました。取得方法や条件を調べてみたので参考にしてみてください。AI」が話題になっていたのでご紹介します。楽器センスや作詞センスがなくてもAIが作曲作業を全てやってくれる時代です。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。検索よしおクリエイターの肩書きが欲しいので勘でゲーム作ってます。当ブログでは自分の好きなことを発信していきます。ザコクリエイターBlog.メニューホームプロフィールクリエイティブゲームIT・ガジェットお役立ち情報プライバシーポリシーお問い合わせホーム検索トップサイドバータイトルとURLをコピーしました。