現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

モバイルメニューでページ内で遷移したときにスライドを自動的に閉じたい(iOS環境) | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

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

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

スポンサーリンク
モバイルメニューでページ内で遷移したと...
 
Share:

[解決済] モバイルメニューでページ内で遷移したときにスライドを自動的に閉じたい(iOS環境)  


cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月7日 11:05  

初めまして。
この度、初めてCocoonを利用させていただいている者です。

モバイルのメニューより、同ぺージ内で遷移したいと思っているのですが、メニューをタップした際に自動的にメニュー(スライド)を閉じられないかと思い、相談させていただきました。

メニューの裏ではリンク先は移動になっているのですが、上部の×をタップしないとメニューが閉じず、こちら対応法を教えていただければ幸いです。

This topic was modified 1か月 前 by わいひら

未解決
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月7日 20:08  

普通は添付画像のように、モバイルメニューでもページが遷移するとスライドインメニューは閉じると思います。
動作端末と、ブラウザはなんでしょうか?


cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月8日 10:22  

わいひら様

お返事ありがとうございます。
動作端末は「iPhone7Plus」
ブラウザは「Safari」を利用しております。
PC上で、Cocoonのレスポンシブテストを行っても同じ状況になります。
(ブラウザはChromeです)

リンク先が別ぺージの場合は自動で閉じてくれるのですが
同ぺージ内での遷移ですと、×を押さない限り閉じてくれないのです。

お手数おかけして申し訳ございませんが
宜しくお願いいたします。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月8日 11:48  

こんにちは。

確かにiOSだと、同ページ遷移で閉じてくれないんですね。

でもjavascriptでボタンクローズの関数を入れるのも面倒ですね・・・。

簡単にユーザー側で出来る対策としては、リンク先を以下のようにパラメータを入れても良さそうです。

https://example.com/example.html?#example

何かしらパラメータ「?」が入ると、別ページへの遷移になりますので。

SEO的にもcanonicalがあるので重複コンテンツにならないです。


わいひら 件のいいね!
cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月8日 13:23  

たなかま様
お返事ありがとうございます!
なるほど!それは簡単にできて助かります。
そちらの方法で対処させていただきたいと思います。

iOSがダメで、他の環境だと自動で閉じるのですね。
他の環境で試したことが無く、気づきませんでした。
ありがとうございました!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月8日 19:29  

すいません。
僕はiOS環境を持っていないため、質問させてください。
他のテーマで同様のメニューがある場合は、iOS環境ではページ遷移した時にメニューが閉じますか?
また、以下のように?だけだとメニューが閉じますかー?
https://example.com/example.html?
修正できそうなら、しようと思うのでよろしけば教えていただければ幸いです。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月8日 23:53  

他のテーマで同様のメニューがある場合は、iOS環境ではページ遷移した時にメニューが閉じますか?

手持ちの他テーマで似たようなメニューを探したのですが、見つからないですね・・・。

また、以下のように?だけだとメニューが閉じますかー?
https://example.com/example.html?  

はい、その場合は閉じます。遷移になります。

パラメータだと、アクセス解析で計測が分かれるのが微妙ですね。

 

ちなみに

https://example.com/example.html#example

のようなフルパスだとiOSのみ閉じないですが、

#example

のような相対パスだと他の環境でも、メニューが閉じないのが再現できます。

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月9日 20:08  

ご確認ありがとうございます。

パラメータだと、アクセス解析で計測が分かれるのが微妙ですね。

この問題とどう折り合いをつけるかですよね。
ちなみに、単なる?ありと、?なしではアクセス解析は同一と扱ってくれるのだろうか。
ここら辺は、調べたことがなかった。

あとiOSの場合、以下のタイプのURL記述だとページ遷移するでしょうか。
//example.com/example.html


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月9日 23:47  

プロトコル省略のリンクを試しました。

//example.com/example.html

だと、ページ遷移になって、閉じました。

 

//example.com/example.html#example

だと、同ページのままで閉じませんでした。

 

ちなみに、単なる?ありと、?なしではアクセス解析は同一と扱ってくれるのだろうか。

試したことはないのですが、google analyticsだと、別ページになるかと思います。

タイトルでソートすれば良さそうですが、URLはパラメータで別れるはずです。

逆にクリック数は計測できますねw(GTMでやった方が良いと思いますが)

 

モバイルメニューはてっきりjsだと思っていたのですが、CSSで実装できるんですね。

昔、仕事でも同様の不具合があって、その時はjQueryで関数を用意したのを覚えています。

テーマにjQuery増やすのも微妙かなとは個人的に思いますので、今のままでもいいのかなと・・・。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月10日 19:41  

試験的に、スライドインメニュー(のみ)のURLからURLスキームを取り除く処理を書いてみました。
https://github.com/yhira/cocoon/commit/9e8acf1cdacb593796ebd3dc7db6790ef7433e6c
当サイトにも適用させてみました。
当サイトのスライドインメニューは、iOS上でクリックも閉じて遷移しますでしょうか。

試したことはないのですが、google analyticsだと、別ページになるかと思います。

そうなんですね。じゃあやめたほうがよさそうですね。

モバイルメニューはてっきりjsだと思っていたのですが、CSSで実装できるんですね。

そうなんです。JavaScriptを利用すると、AMPで確か当時動かせなかったのでCSSにしました。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月10日 20:48  

試験的に、スライドインメニュー(のみ)のURLからURLスキームを取り除く処理を書いてみました。
https://github.com/yhira/cocoon/commit/9e8acf1cdacb593796ebd3dc7db6790ef7433e6c  
当サイトにも適用させてみました。
当サイトのスライドインメニューは、iOS上でクリックも閉じて遷移しますでしょうか。

僕が勘違いをしていたら申し訳ないのですが、URLスキームがなくても、(#toc1とかの)同ページ遷移は、メニューが閉じないですね。

同ページ遷移というのが、ページ内リンクのことでした。

 

URLスキームあり・なし、どちらでも以下の同ページ遷移ならメニューが閉じます。

https://wp-cocoon.com/community/

https://wp-cocoon.com/community/

これだと再読み込みになって、メニューが閉じるのです。

 


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月10日 21:06  

ということは、#XXXX みたいなものがあるURLがあるメニューのみで発生する症状ですか?

いずれにせよ、とりあえずGitHubは元に戻しておきました。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月10日 21:54  

ということは、#XXXX みたいなものがあるURLがあるメニューのみで発生する症状ですか?

はい。スレッドを立てられたcocoon初心者さんも、#XXXXのアンカーリンクで起こるご相談なのだと思います。


わいひら 件のいいね!
cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月11日 09:55  

わいひら様
たなかま様

色々ご対応いただきまして有難うございます。
専門的なお話しのようでしたので、
閲覧のみにさせていただいておりました^^;;

そうです。
「#XXXX みたいなものがあるURLがあるメニューのみで発生する症状」
です。

シングルページを作りたいと思っておりましたので
同じぺージ内で移動させたかったのですが、それではスライドが閉じませんでした。
別ぺージへのリンクは問題なく、動作(自動で閉じる)しております。

説明不足で大変失礼いたしました。
宜しくお願いいたします。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月11日 19:23  

メニューの裏ではリンク先は移動になっているのですが、

これは、アンカーリンクのことだったんですね。
違う意味でとっていました 😥

アンカーリンクでの動作ということであれば、たなかまさんの書かれた方法で、手動で対応をとった方が良いのかな。Analyticsの計測も違ってしまうみたいだし。

それとも、Analytics計測が変わったとしても、iOS環境だけ以下のようなURLにしたほうがよいでしょうか。
ttps://example.com/example.html?#example
こちらもやろうと思えばできると思います。

もし希望があればお聞かせいただければと思います。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月11日 20:29  

わいひらさん、すみません。

さきほどリアルタイム計測で試したところ、「?」単体だと、analyticsの計測は、まとめられるみたいです。かなり思い込みしてました・・・。

https://example.com/example.html?

https://example.com/example.html?#example

上記、両方のパターンとも、analyticsの計測ではexample.htmlでまとめられます。

「?a」とかだと、さすがに別ページ扱いですね。

 

個人的にはレアなケースだと思うので、テーマに実装まではしなくても良いかなとは思います。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月12日 19:14  

さきほどリアルタイム計測で試したところ、「?」単体だと、analyticsの計測は、まとめられるみたいです。

だとしたら、機能を追加しちゃっても良いかもしれませんね。
ただ、以下の形式のURLだったらどうなるんだろうと思いました。

ttps://example.com/?p=13#example

この場合は、以下のようにすればいいのかな?

ttps://example.com/?p=13&#example

ということで、試しに環境を作ってみたら、Firefoxでも多分iOSと同じ現象が再現できました^^;iOSだけの動作だと思って、試してませんでした。
https://wpsubdir.im-cocoon.net/?p=13

このページのモバイルメニューをiOSで試すとaメニューは、ページ遷移してメニューが閉じる。b,c,dメニューは、アンカーリンクで跳ぶだけという感じですよね(b,c,dはメニューが閉じない)。

This post was modified 1か月 前 2 times by わいひら

たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月13日 12:08  

iOSで動作チェックしました。

このページのモバイルメニューをiOSで試すとaメニューは、ページ遷移してメニューが閉じる。b,c,dメニューは、アンカーリンクで跳ぶだけという感じですよね(b,c,dはメニューが閉じない)。

はい、その通りになっています。

基本のパーマリンクとカスタムのパーマリンクで処理が分岐するのは面倒ですね・・・。


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月13日 18:27  

一応、以下の動作になるような処理をテスト的に書いてみました。

ttps://example.com/example.html#example
ttps://example.com/?p=13#example

ttps://example.com/example.html?#example
ttps://example.com/?p=13&#example

コードがこちら。
https://github.com/yhira/cocoon/commit/45d943c0cc1d9c13c47d68d6aab2e7ec52f82201

ただ今のは、移動先のページでは以下のように変換する処理を書く必要がありますね。
ttps://example.com/example.html?#example
ttps://example.com/?p=13&#example

ttps://example.com/example.html#example
ttps://example.com/?p=13#example

今回、レアケースとして手動対応にするか、それとも処理を追加するか、ちょっと考えてみようと思います。


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月13日 20:30  

めちゃくちゃ勉強になります。

コードの公開ありがとうございます!


cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月13日 22:10  

わいひら様

たなかま様

ありがとうございます!

ひとつ教えてください。

「移動先のページでは以下のように変換する処理を書く」

というのはどういう意味なのでしょうか?

勉強不足で、大変申し訳ありません💦


たなかま
(@tanakama)
Reputable Memberサイト
参加: 2年 前
投稿: 289
たなかま - Twitter
2019年10月13日 23:28  

「移動先のページでは以下のように変換する処理を書く」

想像ですが、テーマのテンプレート側で、移動した後にリダイレクトなどでURLを戻すってことではないでしょうか?(わいひらさん、違っていたらごめんなさい)

リンクしたときにパラメータが残ってると微妙なので。

ユーザー側で何かしないと、ってことではなさそうです。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月14日 19:24  

移動先のページでは以下のように変換する処理を書く

移動先でまたモバイルメニューを開いて、アンカーリンクに飛ぼうとすると、今度また同様の動作になるので、移動先でまた変更用の処理を書く必要があるということです。

ただ、今回AMPのことを考えて、URLの変更で何とかしようとしました。
けれど、よくよく考えたらAMPページではモバイルボタンが表示されない仕様に以前変更したので、AMPのことを考慮する必要はありませんでした^^;
なのでjQueryで処理してしまうことにしました。
対応版を以下にアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
動作としては、以下の条件でメニューが閉じるようになっています。

  • 現在のページとリンク先のページが同じページのURL
  • URLにアンカーリンクに飛ぶ#xxxxといったものがついている

https://github.com/yhira/cocoon/commit/1c1f9389aa978449cbdb837684cd7776b1667f03


cocoon初心者
 cocoon初心者
(@cocoon初心者)
ゲスト
参加: 1か月 前
投稿: 6
2019年10月16日 10:07  

わいひら様
たなかま様

ご対応いただきましてありがとうございました^^

リンクの書き方を変更し、更新いただいた新しいファイルに差し替えましたところ
問題なく動いております。

有難うございました!


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 7140
わいひら - Facebookわいひら - Twitter
2019年10月16日 17:08  

動作確認ありがとうございます。


Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバ

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

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

クーポンコード:PK4JK4RJ

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

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

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

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

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

Cocoon
  
動作中

ログイン または 登録 してください

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