サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
このフォーラムには初心者の方も多く参加されています。質問に不慣れな方も安心して相談できるよう、できるだけ穏やかな言葉でご案内いただけますと幸いです。
通知
すべてクリア
トピックスターター 2026年4月29日 07:51
不具合・カスタマイズ対象ページのURL： https://gardening-beginner.ryo-yasukawa.com
相談内容：スマホ画面ではアイコンボックスのアイコンが左端に固定されず、上に表示されます。これを左端に固定したいです。
不具合の発生手順：
解決のために試したこと：
ChatGPTに相談し、以下のCSSを貼りましたが表示は変わらずでした。
/* Cocoonのボックス系を全部左寄せ */
:is(
.memo-box,
.info-box,
.warning-box,
.alert-box,
.comment-box
){
display: flex;
align-items: flex-start;
/* 上揃え（中央ならcenter） */
}
/* アイコン部分 */
:is(
.memo-box,
.info-box,
.warning-box,
.alert-box,
.comment-box
) .box-icon {
flex-shrink: 0;
margin-right: 10px;
}
/* テキスト部分 */
:is(
.memo-box,
.info-box,
.warning-box,
.alert-box,
.comment-box
) .box-content {
flex: 1;
}
環境情報：----------------------------------------------
サイト名：園芸初心者が、鉢で果樹栽培を始めてみた。
サイトURL： https://gardening-beginner.ryo-yasukawa.com
ホームURL： https://gardening-beginner.ryo-yasukawa.com
コンテンツ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-child-master/skins/skin-template/style.css
WordPressバージョン：6.9.4
PHPバージョン：8.3.30
データベース：10.5.27
サイト言語：ja
タイムゾーン：Asia/Tokyo
HTTPS：有効
マルチサイト：無効
WP_DEBUG：無効
DISABLE_WP_CRON：無効
WP_CACHE：無効
DISALLOW_FILE_EDIT：無効
パーマリンク構造：/%postname%/
ホームページ表示：最新の投稿
PHPメモリ上限：256M
WPメモリ上限：40M
WP管理画面メモリ上限：256M
PHP最大実行時間：30秒
PHP max_input_vars：1000
アップロード上限：30M
POST上限：30M
PHP拡張：curl:有効, mbstring:有効, gd:有効, imagick:有効, xml:有効, zip:有効, intl:有効, exif:有効
画像エディタ：EWWWIO_Imagick_Editor
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：en,ja;q=0.9,en-US;q=0.8,fr;q=0.7,it;q=0.6
----------------------------------------------
テーマ名：Cocoon
バージョン：2.9.2.7
カテゴリー数：5
タグ数：13
投稿数：6
固定ページ数：3
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：847 バイト
functions.phpサイズ：1464 バイト
----------------------------------------------
Gutenberg：0
Font Awesome：4
Auto Post Thumbnail：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
簡単SSL：0
コードハイライト：0
----------------------------------------------
canonicalタグ：1
カテゴリnoindex：0
タグnoindex：1
----------------------------------------------
サイドバー位置：sidebar_right
サイドバー表示：display_all
メインカラム幅：デフォルト
サイドバー幅：デフォルト
----------------------------------------------
全広告表示：1
AdSense表示方法：
----------------------------------------------
GA4：設定済み
GTM：未設定
Search Console：設定済み
----------------------------------------------
ブラウザキャッシュ有効化：1
CSS縮小化：0
JavaScript縮小化：1
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools 5.9.2
Broken Link Checker 2.4.8
Contact Form 7 6.1.5
EWWW Image Optimizer 8.5.0
UpdraftPlus - Backup/Restore 1.26.3
XML Sitemap Generator for Google 4.1.23
----------------------------------------------
※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
2026年4月29日 14:33
●原因
添付頂いたコードで、.box-icon、.box-contentと言う要素は存在しないため、コードは無効となります。
AIは実際の画面を見ているわけでなく、正しい情報を文章化して伝えないと、間違えた回答をします。
●対策
表示幅が480px以下のとき、アイコン位置を変更しています。
このため、元の横並びのコードで上書きします。
@media (width <= 480px) {
.common-icon-box::before {
border-width: 1px;
border-right-style: solid;
font-size: 34px;
left: 10px;
margin-left: 0;
padding-right: 0.15em;
top: 50%;
width: 44px;
}
.common-icon-box {
padding: 20px 20px 20px 72px;
}
}
この投稿は2日前ずつ大門未知子に変更されました
わいひら reacted
トピックスターター 2026年4月29日 19:42
大門未知子さま
ありがとうございます！解決しました！！
カスタマイズの追加CSSにコードを追加しても変わらなかったのですが、子テーマのstyle.cssに追加したら希望通りの配置になりました。
「style.css」と「カスタマイズの追加CSS」はどちらが優先されるとかあるのでしょうか？
他にもCSSを追加したこともあるのですが、「style.css」に書き込んでも反映されなかったものが「追加CSS」に書き込んだら反映された、その逆もあったりしています。
style.cssへの書き込みで統一したいのですが、現状は反映された方で妥協しているので「style.css」と「追加CSS」にそれぞれ書き込まれています。
もう一点、お訊きしたいことがありますが、その場合は改めてトピックを立てた方が良いのでしょうか？
お訊きしたいこととは、「自動でアイキャッチを作成する」でアイキャッチが自動生成されるのは非常に便利で助かるのですが、アイキャッチ画像のボックスの上部に小さいフォントでタイトルの文章がつらつらと書かれているので見にくいのが気になっています。
文字数にもよりますが、ボックス内に上下左右均等に大きく文字を表示したいのですが、CSSの追加だけで可能でしょうか？
たとえば、「ブログの書き方」みたいに短い文章なら、ボックスの横幅いっぱいに一段で「ブログの書き方」と表示される方が視認性があっていいと思います。
トピックスターター 2026年4月29日 19:45
すみません、もう一点教えてください。
今回は鉛筆マークのボックスだけでしたが、全てのアイコンボックスについて同様の設定にしようと思った場合、全てのアイコンのコードを調べて（まとめて）、CSSで記述するしかないのでしょうか？
アイコン全般を指すコードなどはありますでしょうか？
申し訳ございませんが、よろしくお願い致します。
2026年4月29日 20:14
●回答
アイコン全般を指すコードなどはありますでしょうか？
図示の通り、アイコンボックスにはcommon-icon-boxと共通クラスが付与されています。
先述のコードは共通クラスに対し、指定をしているので、メモ、情報など個別の設定は不要です。
2026年4月29日 20:17
●回答
「style.css」と「カスタマイズの追加CSS」はどちらが優先されるとかあるのでしょうか？
カスタムCSSが子テーマより優先されます。
WordPressのエディターで直接コードを入力する場合、文字化けし正しく反映されないことがあります。
https://wp-cocoon.com/community/postid/73179/
この投稿は2日前ずつ大門未知子に変更されました
2026年4月29日 20:24
●回答
もう一点、お訊きしたいことがありますが、その場合は改めてトピックを立てた方が良いのでしょうか？
YES。
今後、別の内容で質問がある場合、別トピックとしてください。
文字数にもよりますが、ボックス内に上下左右均等に大きく文字を表示したいのですが、CSSの追加だけで可能でしょうか？
アイキャッチですが、GDライブラリを用いて、プログラムで座標計算をし、文字などを並べています。
このため、CSSのようにユーザーが簡単にレイアウトを変更できません。
恐れ入りますが、現状の仕様のままご利用ください。
この投稿は2日前 3回ずつ大門未知子に変更されました
わいひら reacted
トピックスターター 2026年4月29日 21:44
ありがとうございました！
勉強になりました。
今後とも、ご負担のない範囲で助言頂けますと幸いです。
またよろしくお願い致します。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。