ボタンメニュー その2・備忘録

※2021年2月にはてなブログに移転しました。 現在、WordPressは使用しておりません。

この記事はほぼ自分の為の備忘録です。しばらく経ってやり直したい時に忘れちゃった時のため。ボタンメニューのカスタマイズは検索すると詳しく解説してくれているサイトがたくさんあります。このブログもいろんな解説サイトを参考にさせてもらったのですが、ちゃんとブックマークなりお気に入りなりで保存しておけば良かったのに、その時はそこまで気が回りませんでした。

このブログはスマホやタブレットとPCでは表示画面が違います。
最近はどこのサイトもそうなんですけどね。

iPhoneの画面はこんな感じ。

PCの画面はこちら。

PC

モバイルのボタンメニューをカスタマイズしたくて試行錯誤しました。

モバイルボタンメニューの中のメニューはcoconのデフォルトだと「グローバルナビメニュー」が表示されることになっています。

私はボタンメニューでPC画面の右側にあるメニューを表示させたいと思いました。

頼りにしていたGoogle先生はcssで設定する方法ばかり紹介してくれてまして、初心者の私にはハードルが高くて途方に暮れていました。だがしかし!cocoonの公式サイトで発見!cocoon 1.8.1以降では独自メニューが設定できるようになっていました。ありがとうございます!!リンクは記事の最後に貼らせていただきます。途中で良い感じに表示する方法がわからないので、ごめんなさい。

まずはWordPressの外観からメニューに入ります。

そこで新しいメニューを作ります。

私は何度も失敗してしまったのですが、必ず保存をしましょう!!

この画面を下にスクロールしてチェックを入れます。

次はPC画面で同じものが表示されるように設定します。
同じく外観からウイジェットに入りメニュー設定です。

先ほど作ったモバイルスライドインメニューを選択します。

iPhoneのボタンメニューから表示はこんな感じです。

PC画面のメニューと揃いました!!

わいひらさんの記事ではフッターメニューになっています。
ヘッダーにメニューを設定する方法は、、、
Google先生が詳しい解説サイトを紹介してくれると思います。ごめんなさい。

モバイルスライドインメニューを独自メニューに変更する方法
デフォルトだとスマホのスライドインメニューは「PC用のグローバルメニュー」になりますが、独自のメニューを設定する方法です。

コメント

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