サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年4月29日 14:06
いつもお世話になっています。
0.5.3の時はカエレバ・ヨメレバ共に綺麗に表示されていたのですが
スマホ表示で0.5.4になった途端に、画像は大きく拡大されて汚くなるし、画像の下に大きな余白が出てきてしまっています。
また、PC時でも画像の下に余白があるのが確認されます。
画像を添付させて頂きます。
取り急ぎご報告いたしました。
環境情報
サイト名：テイクチャンネル
サイトURL： https://takechannel.com
ホームURL： https://takechannel.com
コンテンツURL： https://takechannel.com/wp-content
インクルードURL： https://takechannel.com/wp-includes/
テンプレートURL： https://takechannel.com/wp-content/themes/cocoon-master
スタイルシートURL： https://takechannel.com/wp-content/themes/cocoon-child-master
Wordpressバージョン：4.9.5
PHPバージョン：7.1.4
ブラウザ：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.189 Safari/537.36 Vivaldi/1.95.1077.60
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：0.5.4.1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.3
----------------------------------------------
参考ページ
2018年4月29日 22:23
僕の環境では、特におかしな表示にはなっていないようです（添付画像）。
写真では、Cocoonデフォルトの表示ではないようですが、何かカスタマイズを行なっておられるのでしょうか？
トピックスターター 2018年4月29日 22:51
何かカスタマイズを行なっておられるのでしょうか？
カスタマイズは行っております。
ここのをそのままコピペしてる感じです。
0.5.3では正常に表示されていましたが、0.5.4になった途端に表示が崩れた形になります。
試しに0.5.3にバージョンダウンしたところ、やはり表示が綺麗に戻りました。
そこで再び0.5.4にするとまた表示がおかしくなります。
ともにcssは変えずにバージョンの上げ下げだけした形です。
こちらではPCでもスマホでも表示が崩れています。
2018年4月29日 23:55
いつもお世話になっています。
私の環境でも同じように表示が崩れました。
tantaaさんの該当URLを確認した所こちらの環境からみても同じように表示が崩れており、自サイトのカエレバの表示も同様に表示が崩れてしまっています。（カエレバ表示に関するカスタマイズは行っておりません）
環境情報
----------------------------------------------
サイト名：トラック運転手のブログ
サイトURL： https://truck.nagoya
ホームURL： https://truck.nagoya
コンテンツURL： https://truck.nagoya/wp-content
インクルードURL： https://truck.nagoya/wp-includes/
テンプレートURL： https://truck.nagoya/wp-content/themes/cocoon-master
スタイルシートURL： https://truck.nagoya/wp-content/themes/cocoon-child-master
Wordpressバージョン：4.9.5
PHPバージョン：7.2.4
ブラウザ：Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36
サーバーソフト：LiteSpeed
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：0.5.4
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
----------------------------------------------
該当ページ こちら
2018年4月30日 01:01
haruさんと同じく、CocoonにプリインされているCSS以外なにも触っていない状態で、表示が崩れています。
どうやら、カエレバ・ヨメレバのアフィリエイトタグについてくる1x1のトラッキング用imgタグに対して、CSSでwidth:100%;があたっているのが原因のようです。
突貫ですが、下記CSSを入れると症状が治りました。
.booklink-image>img, .kaerebalink-image >img, .tomarebalink-image>img {
width:auto;
}
以上、ご報告です。
トピックスターター 2018年4月30日 19:10
@naeさんの
.booklink-image>img, .kaerebalink-image >img, .tomarebalink-image>img {
width:auto;
}
を追加した所余白はなくなりました。
カエレバでの出力時に画像は小で取得していたので、画像は引き伸ばされてピンボケの状況は変わらずです。
0.5.3の時は小でも綺麗に表示されていました。
もし、このままのスタイルでいくのであればカエレバで画像出力時に中サイズを選ぶ必要がありそうですね。
個人的には0.5.3の時がベストでした。
2018年4月30日 20:02
どうやら、カエレバ・ヨメレバのアフィリエイトタグについてくる1x1のトラッキング用imgタグに対して、CSSでwidth:100%;があたっているのが原因のようです。
僕のテスト環境は、トラッキング画像が入っていなかったので、再現しなかったりですね。
0.5.5で一応、不具合を修正しました。おそらく。
2018年4月30日 22:29
わいひらさん
アップデートお疲れさまです＆ご対応ありがとうございます！
ぼくのブログで問題解消確認いたしました。@TanTaaさんはいかがでしょうか？
わいひら reacted
トピックスターター 2018年4月30日 23:24
わいひらさん、ご対応ありがとうございます！
@TanTaaさんはいかがでしょうか？
はい、こちらも問題解消を確認しました！
わいひら reacted
トピックスターター 2018年4月30日 23:33
あ、あと蛇足にはなるんですけど、
cocoonの場合はカエレバなどのcssが元から入っているから
コピペでOK！系のカエレバカスタマイズコードは使用しない方がいいのかなと思ったり。
カスタマイズするならcocoonのコードをちょこちょこ変えるやり方が一番いいのかなと思いました。
2018年5月1日 20:25
皆様、動作確認ありがとうございます！
先日、トマレバに対応した時に、トマレバのサムネイル画像があまりにも小さすぎたので、ちょっとでも大きく見せようと考え、余計なことをしたのが良くなかったようです。
やはり、HTMLに書かれた画像サイズはそのままのサイズで表示させようと思います。
コピペでOK！系のカエレバカスタマイズコードは使用しない方がいいのかなと思ったり。
使用しないほうがいいとは言いませんが、当然記事などで書かれたコピペ用のコードは、CSSの競合問題までは考えて書かれていません。
なので、使用してもいいですが、表示に問題が出ているところは、自分で修正する必要は出てくると思います。
デベロッパーツールなどを用いて、問題点を見つけ出し解決する力は必要になるかもしれません。
表示に問題さえ出なければ、そのまま使用しても良いかと思います。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。