スマホ(iPhone)で、ボックスメニュー表示が重なってしまう? | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
スマホ(iPhone)で、ボックスメニ...
 
Share:
Notifications
Clear all

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


Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 09:00  

お世話様です。

ボックスメニューを
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 1か月 前 2 times by Yamachan11

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 09:47  

前略、Yamachan11 さん

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

 

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

 

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

 

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

 

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


わいひらYamachan11 件のいいね!
Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 11:19  
投稿者:: @leafytree

前略、Yamachan11 さん

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

 

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

 

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

 

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

 

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

@leafytreeさん

 

ありがとうございます。

そうなんですよね

Cocoonマニュアルを見ると、

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

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

 

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

 

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

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

 

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

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 14:00  

@yamachan11 さん

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

投稿者:: @yamachan11

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

 

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

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

 

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 14:06  

@yamachan11 さん

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

 


わいひらYamachan11 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 14:16  

@yamachan11 さん

投稿者:: @yamachan11

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

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

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 14:39  

@yamachan11 さん

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

 


Yamachan11 件のいいね!
Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 14:53  
投稿者:: @leafytree

@yamachan11 さん

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

投稿者:: @yamachan11

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

 

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

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

 

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

 

(@leafytree) さん

ありがとうございます。

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

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

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

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

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

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

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

This post was modified 1か月 前 3 times by Yamachan11

Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 15:00  

@leafytree さん

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


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 15:01  

@yamachan11 さん

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

 

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

 

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

 

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


わいひらYamachan11 件のいいね!
リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 15:11  
投稿者:: @yamachan11

@leafytree さん

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

動画を貼ってみます。

 


わいひらYamachan11 件のいいね!
Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 15:13  
投稿者:: @leafytree

@yamachan11 さん

投稿者:: @yamachan11

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

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

 

ありがとうございます

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

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

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

 

 


リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 15:19  

@yamachan11 さん

出来たみたいですね。 😀 

おめでとうございます!


Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 15:25  
スマホ表示はトップページはアイコンも正しく表示されていますが、他のページが未だアイコンが小さく重なっています。(アピールページを表示させていないからか?)

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

スマホ表示は、

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

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

 

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

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

This post was modified 1か月 前 3 times by Yamachan11

Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 15:31  
投稿者:: @leafytree

@yamachan11 さん

出来たみたいですね。 😀 

おめでとうございます!

@leafytree さん

ありがとうございます。

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

 

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

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

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

This post was modified 1か月 前 3 times by Yamachan11

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 15:35  

@yamachan11 さん

投稿者:: @yamachan11

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

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

 

投稿者:: @yamachan11

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

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

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

 

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


わいひらYamachan11 件のいいね!
Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 16:51  

@leafytree さん

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

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

 

ただ、

 

プライバシーポリシー

 

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

このページだけなので

 

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

 

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

 

宜しくお願いします。

 

This post was modified 1か月 前 by Yamachan11

リフィトリー
(@leafytree)
Noble Memberサイト
参加: 1年 前
投稿: 1889
2020年7月7日 17:09  

@yamachan11 さん

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


わいひらYamachan11 件のいいね!
Yamachan11
(@yamachan11)
Trusted Memberサイト
参加: 6か月 前
投稿: 97
Yamachan11 - FacebookYamachan11 - Twitter
2020年7月7日 17:20  
投稿者:: @leafytree

@yamachan11 さん

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

ありがとうございます。

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

操作ミスですね。

 

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

 

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

 

 


リフィトリーわいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年10ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

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