サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年2月10日 10:08
不具合なのか仕様なのかわかりませんが報告させていただきます。
先日のCocoon 1.5.7のアップデートで追加された「行間の余白」を設定すると、その設定に連なって、画像とキャプションの余白も広がってしまいました。
応急の対策としてstyle.cssに以下のコードを記入して回避することに。
p.wp-caption-text, .gallery-caption {
margin: 0;
}
自分は素人なので、この方法で合ってるのかわかりませんがこれで見た目は良くなりました。
もし間違いなどがあれば教えて頂けると助かります。
どうぞよろしくおねがいします。
P.S いつも素晴らしいアップデートに修正お疲れ様です。
Cocoonはとっても良いテーマで無料で使わさせてもらってることにいつも感謝しています。これかも良いテーマになっていくことを願っています。
2019年2月10日 19:46
ちょっと、実際の設定状態を見るためにも、該当ページのURLがあれば助かります。
もしくは、余白設定部分のキャプチャ画像とか。
応急対策についてもそれであれば、それで見た目的に良ければ問題ないと思います。
Topic starter
2019年2月12日 22:24
わいひらさん返信ありがとうございます！
そして返信おそくなって申し訳ありませんでした。
早速ですが、該当するページはこちらのURLとなります。
https://tokolog.net/archives/8254
ただ現状はCSSを弄ってあるので、見た目上はマージンが0となっています。
一応CSSで設定を弄る前の画像を添付しておきました。
ちなみに本文の設定は
行高が2.0
行間の空白が2.2emで設定してあります。
どうぞよろしくおねがいします。
2019年2月13日 06:43
圧縮されてるのを切ってもらわなければ、誰がどんなコードを書いてるのかが確認できないんですね。
Cocoon設定・高速化にある縮小化を気ってもらえますか。
2019年2月13日 19:58
一応、デベロッパーツールで確認してみました。
見たところ、不具合というか、僕がその部分にスタイリングしていない（し忘れている）のが原因のようです。
一応スタイルをあてがったもの以下にアップしておきました。
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
※多少の差異があるので現在margin:0にしているカスタマイズはそのままで良いかと思います。
2024年3月26日 06:02
だいぶ前の話題のようですが、ちょっと乗っからせてください。
私もキャプションつきの画像まわりの改行が気になり、何度もテキストエディターで修正しては下書き保存し、Cocoon設定からキャッシュを削除（WP Fastest Cacheもインストール済みですがACFの設定で不具合が起こる？とかで無効に）しているのですが、すぐに戻ってしまいます。
このトピックから時間も空いているので、わいひらさんのgithubは修正しているものと思ったのでダウンロードしてません。でも最初に投稿されたトコロさんのコードはググって同じものが出ていたのでstyle.cssに追加してみています。
まだテストサイトの段階ですが、環境情報は以下のとおりです。
よろしくお願いいたします。
----------------------------------------------
サイト名：☆ネリハリ☆Make Nerima to Hollywood!☆
サイトURL： http://neri-hari.com.testrs.jp/site
ホームURL： http://neri-hari.com.testrs.jp/site
コンテンツ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
WordPressバージョン：6.4.3
PHPバージョン：8.2.15
ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate
言語：ja
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.2
カテゴリー数：14
タグ数：2
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：2830 バイト
functions.phpサイズ：2424 バイト
----------------------------------------------
Gutenberg：1
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Admin Menu Editor 1.12.1
Advanced Custom Fields 6.2.7
Advanced Google reCAPTCHA 1.20
Cache Clear for お名前.com 1.0.0
Classic Editor 1.6.3
Contact Form 7 5.9.3
Enable Media Replace 4.1.5
MetaSlider 3.62.0
Site Kit by Google 1.123.0
UpdraftPlus - Backup/Restore 1.24.1
Wordfence Security 7.11.4
----------------------------------------------
2024年3月26日 13:06
@gumby さん
●原因
画像は、標準vertical-align:baselineとなっている。
[Cocon設定]→[本文]→行の高さ
の設定に応じ、画像下に余白ができる。
●対策
vertical-alignを定義する。
.wp-caption img {
vertical-align: middle;
}
●ご参考
githubは修正しているもの
本件のmarginとは、別の事です。
2024年3月27日 15:46
@chu-yaさま
早々のご回答ありがとうございました。何度か試してみましたが、初心者でコードの扱いに慣れてないためか、なかなかうまくいきません（添付画像のようになってしまいます）。
どうしたもんでしょうか？
この現象が起こるのは<caption>~img~</caption>のまわりだけです。
This post was modified 8か月前 by gumby
2024年3月29日 05:00
@chu-yaさま
＞ただ図の青枠のmargin-bottomではないのですか？
ここだけ特別に設定をいじっているとかはないつもりなのですが…。
どのようにテストサイトを実際に見ていただくか？がわからないので、歯がゆく思われたなら申し訳ございません。
が、もしかしたら、全部の行を詰めるより、このように開けたほうが見やすくなるかな？とも思い始めました。根本的な解決にはなりませんが、その方向で調整しようと思います。
お騒がせしました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。