モバイルメニューの検索ボックスの挙動について - 要望 https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/ Cocoon ディスカッション掲示板 ja Fri, 16 Oct 2026 12:02:59 +0000 wpForo 60 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19132 Tue, 02 Jul 2019 11:08:49 +0000 動作確認ありがとうございます！
古いバージョンでは、不具合が出たままなんですね。
端末がiPhoneかどうかを条件分岐して、スクリプトを適用しない処理を追加したほうがいいんだろうか。
とりあえず、ここは現状のまま様子見をしようと思います。
このトピックは、オープンにしておいて、問題があるようなら修正しようと思います。

]]> 要望 わいひら https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19132 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19100 Mon, 01 Jul 2019 13:55:02 +0000 わいひらさん

1.8.7.2にアップデートして試したら、ズームは改善され前回添付した画像と同じ状態になりました！

iPhoneでは検索ボタンタップと同時にスクロールも起きるので画面サイズの違う端末で見え方も変わってくるかも？と思い、ついでなので手元にある端末で確認しました。

iPhone8/iPhone6/iPad pro2　iOS12.x系
　→問題なしでした。

iPad mini/iPad2/iPod touch5　iOS9.3.5
　→フォームが画面外に表示されました。
ただこちらは、かなり古くアップデートも不可能な端末です。

iOS10～11は不明ですが、最新iOS12では大丈夫という感じでした。
参考になれば幸いです。

]]> 要望 草村 https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19100 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19086 Mon, 01 Jul 2019 11:26:12 +0000 AMP対応に関しては、昨日あらためてコードを見てみたらヘッダーモバイルボタンを実装した際に、AMPページのモバイルボタンを表示しないようにしていたのでした^^;
なので、現在の仕様では実装する必要がありませんでした。。

モバイルボタンに、スクリプトによる出し入れ機能を付けた時、「複雑化したモバイルボタンを今後コストをかけてAMP対応する必要があるのか？」と思ったことをきっかけに、「そもそもAMPページにモバイルボタンは必要なのか？」ということになり、なくしたのを失念しておりました。
申しわけありません。

]]> 要望 わいひら https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19086 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19085 Mon, 01 Jul 2019 11:20:23 +0000 あー！確かに。スキンのことまで考えていませんでした。
少しでも、AMPのCSSサイズを削減したくてなるべく少ない記述にしたのが、良くなかったですね^^;
1.8.7.2で書き込んでいただいたコードで修正しておきました。

]]> 要望 わいひら https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19085 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19059 Sun, 30 Jun 2019 18:54:25 +0000 わいひらさん

テスト環境で現在のCocoonと同じスキン「Bizarre-food（グリーンソバ）」を適用して試しましたが、改善されていません。

このスキンの場合フォームにフォントサイズが指定されているのでそちらが優先されるようです。

子テーマのstyle.cssに以下を追加して、検索ボタンをタッチしたら添付画像のような表示になりました。

#search-menu-content .search-edit {
  font-size: 16px;
}

なので、16pxが適用されればズームされる現象は改善されるかと思います！

]]> 要望 草村 https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19059 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19046 Sun, 30 Jun 2019 11:13:10 +0000 Akiraさんありがとうございます！
AMPでも、もういろんなことが結構できるんですね。
ちょっと一筋縄ではいかないかもしれませんが、この後ちょっと試してみようと思います。

]]> 要望 わいひら https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19046 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19045 Sun, 30 Jun 2019 11:12:46 +0000 草村さん。ありがとうございます！
iPhoneにそんな挙動があるのですね^^;
やはり、iPhoneは手ごわい…。
こんな感じで修正してみました。
https://github.com/yhira/cocoon/commit/9049007baebd56208cda83606e641134122f8300
修正版はこちら。
https://github.com/yhira/cocoon
もしよろしければ、ご確認いただければ幸いです。

]]> 要望 わいひら https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19045 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19041 Sun, 30 Jun 2019 10:35:02 +0000 大きなお世話ですが、AMP で実装する基本的な方法はこんな感じです。

①検索フォームの input タグに id を付ける（例：id="s" と付けるとします）。

②検索アイコンの要素に on 属性を付ける。

https://notepad.pw/share/qjz1ew09n

on 属性の focus で「タップをすると id が s の要素にフォーカスする」挙動をします。

参考：https://amp.dev/documentation/guides-and-tutorials/learn/amp-actions-and-events#*-(all-elements)

role 属性と tabindex 属性は、button タグ以外で on 属性を付ける際に必須です。ないと AMP エラーが出ます。

ただ、実際に Cocoon で試したわけではありません。また、input タグにただ単に id を付けてしまっては、id の重複が出るサイトが続出しそうな気がします。

それに、検索アイコンの部分も、PHP での置換か、条件分岐で一般ページと AMP ページとで変えるかしないといけないので面倒そうです。

]]> 要望 Akira https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19041 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19036 Sun, 30 Jun 2019 08:13:46 +0000 わいひらさん

Cocoonのトップページで試しました。
iPhoneだとinputにフォーカスした時、ズームされて表示がおかしくなります(添付画像)

この現象はフォントサイズが16px未満の時に発生するので、#search-menu-content .search-editに16px以上のフォントサイズを指定すると恐らく改善されます。

「iphone input フォーカス」とかで検索すると色々出てくると思います！

]]> 要望 草村 https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19036 RE: モバイルメニューの検索ボックスの挙動について https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19032 Sun, 30 Jun 2019 06:16:50 +0000 迅速な対応ありがとうございます。

早速試してみましたが理想通りの挙動です。

ampページで機能しないのは残念ですがぜひ正規のアップデート版でも採用していただけたら幸いです。

]]> 要望 もうふ https://wp-cocoon.com/community/demands/%e3%83%a2%e3%83%90%e3%82%a4%e3%83%ab%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc%e3%81%ae%e6%a4%9c%e7%b4%a2%e3%83%9c%e3%83%83%e3%82%af%e3%82%b9%e3%81%ae%e6%8c%99%e5%8b%95%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/#post-19032