Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマホ(iPhone)で、ボックスメニ...
 
共有:
通知
すべてクリア

[解決済] スマホ(iPhone)で、ボックスメニュー表示が重なってしまう?

19 投稿
2 ユーザー
17 Reactions
3,941 表示
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  

お世話様です。

ボックスメニューを
https://wp-cocoon.com/box-menu-widget/ の記事を参考にさせて戴いて作ったのですが、

・ iPhoneでは(Safari,Chrome,Edgeとも)重なってしまいます。

 解決策を教えてください。

・(CSS class)は、Font Awesome 5 です。

・ style.css の追加・変更はありません。

・添付1:Top画面の状態
・添付2:他の画面の状態
・添付3:メニュー構造・メニュー設定

環境情報
----------------------------------------------
サイト名:趣味とWordPress環境実験サイト
サイトURL: https://xn--ecka7j.net
ホームURL: https://xn--ecka7j.net
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-colorful-line/style.css
WordPressバージョン:5.4.2
PHPバージョン:7.3.16
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:2.2.0.5
カテゴリ数:30
タグ数:24
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.0
style.cssサイズ:827バイト
functions.phpサイズ:385バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:1
Retina:0
ホームイメージ:/jn-theme-name/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:1
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.6
Aurora Heatmap 1.4.5
EWWW Image Optimizer 5.5.0
Google XML Sitemaps 4.1.0
Regenerate Thumbnails 3.1.3
SiteGuard WP Plugin 1.5.0
Wordfence Security 7.4.8
WP Fastest Cache 0.9.0.7
XO Security 2.5.6
----------------------------------------------

This topic was modified 4年前 2回 by Yamachan11

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

前略、Yamachan11 さん

ちょっと小用で時間がないため、雑な書き込みになっちゃいますが・・

 

私は、ボックスメニューは、まだ使ったことはないのですが、Yamachan11 さんのサイトのソースコードを拝見しますと、グローバルメニューになっちゃってる気がします。

 

ボックスメニューは、ボックスメニューウィジェットをどこかのエリアに入れて使うような気がします。

 

もう一度、あるいは、もう2度3度、Cocoonのマニュアルページをお読みになってみてください。

 

間違っていたら、ごめんなさい。


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
投稿者:: @leafytree

前略、Yamachan11 さん

ちょっと小用で時間がないため、雑な書き込みになっちゃいますが・・

 

私は、ボックスメニューは、まだ使ったことはないのですが、Yamachan11 さんのサイトのソースコードを拝見しますと、グローバルメニューになっちゃってる気がします。

 

ボックスメニューは、ボックスメニューウィジェットをどこかのエリアに入れて使うような気がします。

 

もう一度、あるいは、もう2度3度、Cocoonのマニュアルページをお読みになってみてください。

 

間違っていたら、ごめんなさい。

@leafytreeさん

 

ありがとうございます。

そうなんですよね

Cocoonマニュアルを見ると、

作成したメニューをウィジットからドラッグ&ドロップする様に書かれているのですが、・・・・・・・・・・・・・・・・・・・

作成したメニュー「ボックスメニュー」が、ウィジットに出てこなかったので、

 

そのままにしたところ、グローバルメニューに出たので、まあ良いかと思ったのですが、、、、

 

質問の通り重なって表示されたもので、どうしたものかと思った次第です。

最初からあった「ボックスメニュー」は以前のテストでチョッと変更していたので、

 

これを使わず、新しく「ボックスメニュー」を作ったのですが、利用できるウィジット出てこないのです。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

ボックスメニューを使ったことがない私が書きこむのもなんですが・・

投稿者:: @yamachan11

最初からあった「ボックスメニュー」は以前のテストでチョッと変更していたので、

 

これを使わず、新しく「ボックスメニュー」を作ったのですが、利用できるウィジット出てこないのです。

利用できるウィジェットには、[C]ボックスメニュー しか出てこないんじゃないかと思われます。

 

[C]ボックスメニューを開き、作成したメニュー名の「ボックスメニュー2」を選択すれば良いような気がしますが、いかがでしょうか?

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

あと、メニュー構造のところの「ヘッダーメニュー」と「ヘッダーモバイルメニュー」のチェックを外さないとグローバルメニューになっちゃいますよね。

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

投稿者:: @yamachan11

作成したメニューをウィジットからドラッグ&ドロップする様に書かれているのですが、・・

「作成したメニューをウィジットからドラッグ&ドロップする」のではなく、[C]ボックスメニュー ウィジェットをドラッグ&ドロップするような気がします。

 


   
わいひら reacted
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

テストサイトでやってみたら、すぐに出来ました。

 


   
Yamachan11 reacted
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
投稿者:: @leafytree

@yamachan11 さん

ボックスメニューを使ったことがない私が書きこむのもなんですが・・

投稿者:: @yamachan11

最初からあった「ボックスメニュー」は以前のテストでチョッと変更していたので、

 

これを使わず、新しく「ボックスメニュー」を作ったのですが、利用できるウィジット出てこないのです。

利用できるウィジェットには、[C]ボックスメニュー しか出てこないんじゃないかと思われます。

 

[C]ボックスメニューを開き、作成したメニュー名の「ボックスメニュー2」を選択すれば良いような気がしますが、いかがでしょうか?

 

(@leafytree) さん

ありがとうございます。

添付01-は、外観>メニューを選択で、ボックスメニュー2を選択し、
  メニュー構成で、名前、カテゴリまたは、カスタムリンク、ページでURLを指定し
  さらに、
  メニュー設定で、パソコンはヘッダメニュー、スマホはヘッダモバイルメニューに指定しています。

このままの状態だと、質問した内容の状態です。

教えて戴いた、キャプチャの画像の様な表示が出てきませんが、

添付02-、外観>利用できるウィジェット>[C]ボックスメニュー 「追加」をクリックし

添付03-、外観>ウィジェット>メニュー名で、ボックスメニュー2を選択し、「表示設定」をクリック後、ラジオボタン◎で 固定ページタイトル下を選択

添付04-、外観>利用できるウィジェットの固定ページタイトル下に「[C]ボックスメニュー 」 がセットされています。

この状態になった段階で
パソコンの標示は、添付01の状態の時と同じです。
スマホの標示も、更新読み込みを行っても、ボックスメニューが重なって表示されます。

This post was modified 4年前 3回 by Yamachan11

   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  

@leafytree さん

✅を外すと何も出てきません


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

そもそもの話になりますが、ボックスメニューは、グローバルメニューの表示形式のひとつでは、ありません。

 

なので、通常のヘッダーメニューとしては、使用できないかと思います。(通常のヘッダーメニューを非表示にすれば代用できなくはないかと思いますが・・)

 

ですので、「ヘッダーメニュー」と「ヘッダーモバイルメニュー」は、ボックスメニューとは、別にメニューを作成してください。

 

つまり、区別して考えるということです。


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 
投稿者:: @yamachan11

@leafytree さん

✅を外すと何も出てきません

動画を貼ってみます。

 


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
投稿者:: @leafytree

@yamachan11 さん

投稿者:: @yamachan11

作成したメニューをウィジットからドラッグ&ドロップする様に書かれているのですが、・・

「作成したメニューをウィジットからドラッグ&ドロップする」のではなく、[C]ボックスメニュー ウィジェットをドラッグ&ドロップするような気がします。

 

ありがとうございます

ドラック&ドロップはできなかったのですが、[C]ボックスメニュー 「追加」から>メニュー「ボックスメニュー2を選択し、「表示設定」をクリック後、ラジオボタン◎で コンテンツ上部を選択」で、パソコンの標示はメイン画像の下に、スマホ表示はトップページはアイコンも正しく表示されていますが、他のページが未だアイコンが小さく重なっています。(アピールページを表示させていないからか?)

もう少し様子を見てみます。

ありがとうございました。

 

 


   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

出来たみたいですね。 ? 

おめでとうございます!


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
スマホ表示はトップページはアイコンも正しく表示されていますが、他のページが未だアイコンが小さく重なっています。(アピールページを表示させていないからか?)

パソコン表示は、アピールエリアの有無に関係なく、ボックスメニューが正しく表示されます。

スマホ表示は、

①アピールエリア表示のあるページは、アピールエリア画像の下にボックスメニューが正しく表示されます。

②アピールエリア表示の無いカテゴリページは、問題表示のままアイコン表示も小さく文字が重なっています。

 

③特定のURLを設定したプライバシーポリシーのページは、titleの下と、パンくずリストのしたに

それぞれ、ボックスメニューが表示されます。

This post was modified 4年前 3回 by Yamachan11

   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
投稿者:: @leafytree

@yamachan11 さん

出来たみたいですね。 ? 

おめでとうございます!

@leafytree さん

ありがとうございます。

 でも、まだスマホの場合、問題が         ⇧

 

カテゴリページを指定している場合は、問題表示のままアイコン表示も小さく文字が重なっています。

プライバシーポリシーのページは、titleの下と、パンくずリストの下に

それぞれ、ボックスメニューが表示されます。(これはパソコン表示でも)

This post was modified 4年前 3回 by Yamachan11

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

投稿者:: @yamachan11

②アピールエリア表示の無いカテゴリページは、問題表示のままアイコン表示も小さく文字が重なっています。

こっちは、まだ、「ヘッダーメニュー」と「ヘッダーモバイルメニュー」の設定が、どこかに残っているんだろうと思います。(ソースコードを見るとヘッダーメニューとして表示されているので)

 

投稿者:: @yamachan11

③特定のURLを設定したプライバシーポリシーのページは、titleの下と、パンくずリストのしたに

それぞれ、ボックスメニューが表示されます。

ちょっと、また、小用で外しちゃいますが、どこかで設定されているんだと思いますよ。(tileの下は、コンテンツ上部なので、設定どおりですよね。)

 

もう、やり方自体は、ご理解いただいていると思うので、あとは、通常のウィジェット表示設定等をちゃんと設定すれば希望どおりに表示されるかと思います。


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  

@leafytree さん

お陰様で、「ボックスメニュー」を作りなおしたところ

スマホでの表示で、カテゴリのページもアイコンと文字が綺麗にでて、ボックスメニューが正しく表示される様になりました。

 

ただ、

 

プライバシーポリシー

 

のみ、パソコンでも、スマホでも ボックスメニューが2つ表示されます。

このページだけなので

 

これで、完了とさせて戴きます。

 

ありがとうございました。

 

宜しくお願いします。

 

This post was modified 4年前 by Yamachan11

   
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yamachan11 さん

出先なので詳しく見れないのですが、「固定ページSNSボタン上」か、どこかにも、ボックスメニューウィジェットが入っていませんか?


   
(@yamachan11)
Honorable Member Registered
結合: 5年前
投稿: 427
Topic starter  
投稿者:: @leafytree

@yamachan11 さん

出先なので詳しく見れないのですが、「固定ページSNSボタン上」か、どこかにも、ボックスメニューウィジェットが入っていませんか?

ありがとうございます。

固定ページに古い方の「ボックスメニュー」が残っていました。

操作ミスですね。

 

固定ページ上のみに入れたハズだと思い込んでいました。

 

お陰様で、解決しました。

 

 


   
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

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