サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2025年5月29日 10:40
2025年5月28日にCocoonテーマを更新したら、検索ボックスのheightが広がってしまい、レイアウトが崩れてしまいました。
具体的には、cocoon本体から出力されるインラインcssが以下のように変わっています。
更新前
.widget_search .wp-block-search__button {
padding: .375em .1em;
font-size: 14px;
}
更新後
:where(.wp-block-search__button) {
padding: .375em .1em;
font-size: 14px;
}
優先度が変わり、
:root :where(.wp-element-button,.wp-block-button__link) {
background-color: #32373c;
border-width: 0;
color: #fff;
font-family: inherit;
font-size: inherit;
line-height: inherit;
padding: calc(0.667em + 2px) calc(1.333em + 2px);
text-decoration: none;
}
こちらのcssが有効になっていることから崩れが発生したようです。
テーマ自体の不具合修正を行っていただける可能性はありますか？
わいひら reacted
2025年5月29日 11:44
●現象
「カスタムHTML」ウィジェットに「検索」ブロックを配置している。
●原因
優先度は変わりますが、直接の原因はボタン幅が60pxとしていることです。
https://github.com/xserver-inc/cocoon/blob/0cb23cd01aab39b23475e846558cbd60806fe092/style.css#L10375
●対策
widthを削除、font-sizeを追加。
.wp-block-search__button {
border-radius: var(--cocoon-basic-border-radius);
border: 1px solid var(--cocoon-basic-border-color);
cursor: pointer;
font-size: 14px;
}
以下を削除
webbeginner2025 and わいひら reacted
トピックスターター 2025年5月29日 16:41
大門未知子様
早速のご回答どうもありがとうございます～<(_ _)>
＞●現象
＞「カスタムHTML」ウィジェットに「検索」ブロックを配置している。
外観のウィジェットから検索バーのブロックを確認したところ、クラシックウィジェットの<!-- wp:search /-->になっていました。
なので、「検索バー」をウィジェット画面にある「検索バー」に変更したら（スタイルはちょっと変わりましたが）正常に表示されるようになりました。
現在のCocoonテーマの検索バーはこちらに合わせてアップデートされているようですね。
無事解決いたしました！！！
どうもありがとうございました～<(_ _)>
わいひら reacted
2025年5月29日 17:56
これは、WordPress新規インストール時にデフォルトで設定されている、ブロックウィジェットで起きていると思います。
英語と日本語で、それぞれ貼ります。
つまり、「検索」ブロック（WordPressコアの）で、起きていますので、本文で使っても以下のようになります。
テーマ側で対応が必要なのだと思います。
（元々そういう方向だと思いますが、トピック主さんが解決してしまっていたので、念のため書きました）
（元々そういう方向だと思いますが、トピック主さんが解決してしまっていたので、念のため書きました）
webbeginner2025 and わいひら reacted
トピックスターター 2025年5月29日 18:26
ｍｋ２様
詳細なご回答どうもありがとうございます～<(_ _)>
テーマ側でも対応が必要なんですね？
今回テーマをアップデートして、検索バーの崩れが発生してしまった方がほかにもいらっしゃるかもしれないですね？
このスレがお役にたてると幸いです～(^^)/
ありがとうございます～～<(_ _)>
わいひら reacted
2025年5月29日 19:39
ご指摘いただきありがとうございます。
テーマの方でも修正しておきました。
手動でアップデートする場合はこちら。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
ｍｋ２ and webbeginner2025 reacted
2025年5月29日 23:15
お二方、ご確認いただきありがとうございます！
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。