サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019-09-23 21:34
ちょうどおすすめカード機能を用いてカスタマイズを行っていたので、早速今回追加された機能を触ってみたところ、おそらくですが不具合かと思われる点がいくつか見つかったので報告します。
1. サイドバー以外での余白の有無について
サイドバー以外のウィジェットで用いた場合、余白を有効化してもカードリンク間に余白ができません。
4等分（25%）に対する余白用のスタイルが用意されていないのではないでしょうか？
2. 余白を有効化した場合の834px以下について
last-childのカードリンクが「margin-right: 0;」となっているため、ずれてしまいます。
あと、余白なしの場合でも元からmarginで下に余白が入るようになっていたような気がするのですが、余白なしの場合は下にも余白が入らないようにする仕様にはできないでしょうか？
edit reacted
Topic starter
2019-09-23 22:47
以下の添付画像では、デフォルトの親テーマでプラグインも全て無効化してあります。
スタイルのバージョンは1.9.8.2、ブラウザはChrome/76.0.3809.132からです。
（カスタマイズの都合でサムネイル画像が1:1になっています。）
【1. サイドバー以外での余白の有無について】
①がインデックスリストトップに「余白が有効」で入れた状態で、②は①と同じ設定でサイドバーに入れた状態です。
どちらもクラス名は入っているようです。
【2. 余白を有効化した場合の834px以下について】
③は②のままモバイル幅で表示したときのものです。
【余白なしの場合でも元からmarginで下に余白が入る...】
④は余白を無効にした場合のものです。
edit reacted
Topic starter
2019-09-23 23:20
1.についてはCocoon設定でヘッダー下に出力したときのようにmarginが入っていないか、サイドバーでの表示のようにwidthによる間隔を設けていないのが問題のようです。
2.についてはstyle.css#L9382によって生じているようです。
edit reacted
Topic starter
2019-09-24 11:57
サイドバー以外でのおすすめカードに
flex-wrap: wrap;
を入れて、余白等のスタイルを調整する（サイドバー同様に左右のmarginをなくし、代わりにwidthで間隔を持たせる）ことで解決しました。
1だけでなく、2の不具合もこのあたりのmarginに起因していたようで上記の修正で解決しました。
【余白なしの場合でも元からmarginで下に余白が入る...】については、画像に対して
vertical-align: bottom;
を入れると解決します。
サイドバー以外はwrapされないようにしているのは仕様ということでしょうか？
edit reacted
Topic starter
2019-09-24 21:56
wrapというのは、どれのことを指しているのですか？
私の環境では、サイドバーに置いた場合（style.css#L8020）とタブレット以下の場合（style.css#L9372）しか
flex-wrap: wrap;
は適用されておらず、上記の条件に当てはまらない場合はwrapされません。
おすすめカードのリンク数が少なくても画像が拡大されすぎないように、サイズに合わせた幅の上限（style.css#L2324）が設けられている一方、カードリンクを4等分することを想定した幅（style.css#L7951）が設定されていたりしてよく分からなかったので、とりあえずサイドバー上でのおすすめカードのスタイルと同様に、4等分（25%）を基準としてスタイルを書き直したのが前の返信（#post-22314）の添付画像下部にあるものです。
edit reacted
Topic starter
2019-09-25 02:00
flex-wrapは、モバイルより大きな画面では、nowrapは仕様です。
width:25%の方が間違いです。
ということはやはり#post-22314の修正で解決したように、wrapを想定したスタイルとnowrapを想定したスタイルが混在していたのが問題だったのですね。
では、nowrapで統一する形でスタイルの調整よろしくお願いします。
edit reacted
2019-09-25 19:02
とりあえず、25％の方は修正しておきます。
https://github.com/yhira/cocoon/commit/e80edb22a4aed12764b340311acc6aca1646f695
ただ、max-widthはそのままのままです。1つや2つ、画像が大きく表示されすぎても、粗すぎて見た目的にも良くないので。
vertical-align: bottom;なんですけど、なんでか不具合が再現できないので、ちょっと様子を見てみようと思います。
Topic starter
2019-09-25 19:48
確認しました。
flex-wrapにwrapを指定している箇所にwidthを入れるのは分かるのですが、デフォルトはnowrapの仕様で
width: 100%;
は必要なのでしょうか？
edit reacted
Topic starter
2019-09-25 20:32
そうなのですね。
おすすめカードエリアをなるべくぎっしりと埋めたい
についてはよく分からないのですが、nowrapに統一した場合で確認した限りではwidthを取り払ったことで
vertical-align: bottom;
の部分を含めて不具合が解決したように見えるので、とりあえずwidth指定を無効にする形で対応しようと思います。
修正ありがとうございました。
edit reacted
2019-09-25 23:02
さっきチェックしてみたんですけど、冒頭にある不具合は再現できないんですよね。
デフォルトだと320pxから、横幅が余る場合はmax-width:400pxまでは大きく表示
多くの人も想定使用枚数4枚の表示で、出来る限りブラウザいっぱいに
4個を想定としているのでwidth:25％➡100%の件もmax-widthの400pxの仕様も問題ないですし。
- わいひらさんの画像：左右の余白
- （3個以下ならwidth: 100%でもmax-widthの400pxの都合でPC大画面では左右の余白ができるのは仕方ない感じ）
flex-wrapは、モバイルより大きな画面では、nowrapは仕様です。
width:25%の方が間違いです。
ということはやはり#post-22314の修正で解決したように、wrapを想定したスタイルとnowrapを想定したスタイルが混在していたのが問題だったのですね。
では、nowrapで統一する形でスタイルの調整よろしくお願いします。
混在してるって言うより、サイドバーとかスマホ・タブレットの場合はメディアクエリでmax-width: 834pxのときだけ.recommended .navi-entry-cards に flex-wrap: wrap; を指定している感じで。
その領域メディアクエリなしで、全幅 flex-wrapにnowrap と指定したら、タブレット以下でも2列にはなりません。
※おすすめカードに6個置いていれば、モバイルでも1列で6個表示される感じだったり。
2. 余白を有効化した場合の834px以下について
last-childのカードリンクが「margin-right: 0;」となっているため、ずれてしまいます。
この挙動もおかしくないですよ
last-childだけでなく、おすすめカードのリンクすべてに margin-right か何かの余白が付いていればそうなるかも
親テーマのカスタマイズを無効にしてみるとキチンと表示されませんか？
以下の添付画像では、デフォルトの親テーマでプラグインも全て無効化してあります。
スタイルのバージョンは1.9.8.2、ブラウザはChrome/76.0.3809.132からです。
（カスタマイズの都合でサムネイル画像が1:1になっています。）
This post was modified 5年前 by かうたっく
わいひら reacted
2019-09-26 00:03
PCビューですよね。
本来はスマホビューでの不具合。って話だと思ってるんですが。だからなんとなく状況が違っている気がします？
画像だけの提示だと、きついカモ。どんなデバイスで見てるかとかも分からないし、実際の様子が見れないし。何らかのキャッシュが邪魔していた可能性もあるので。
HTMLとかもチェックできないし、ローカルでチェックしても再現できないので・・・
WindowsのChromeでは問題ないっす（笑
わいひら reacted
2019-09-26 17:12
URLが無理な場合は、よろしければwidthが100%になっているところを元に戻して、以下のファイルで問題ないか確認してみていただけますでしょうか。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
Topic starter
2019-09-26 19:52
修正前後の動作から軽く調べてみたところ、おそらくですが少なくともChromium系のブラウザでの問題のようです。
国内ではあまり見当たりませんでしたが、海外でググるとちらほらと情報が出てきます。
OSで画像の最適化設定を行っていると、ブラウザ上で読み込まれる画像がサイズ以上に引き延ばされる場合にDOM上で補正が入る仕組みのようです。
画像が引き伸ばされて荒くならないよう画像サイズまでに止める形で、古いサイトの画像でも画像が最適なサイズで見られるためとのことです。
ただ、ブラウザ側が設定を読み込んでいるのか、OS側が設定値をブラウザに渡しているのか。
また、どの設定値のことなのかは分かっていません。
画像をサイズ以上で表示させるデザインは滅多にないことと、解決できたスタイルひとつに時間を割く余裕はないので、申し訳ないですが分かったことは以上です。
国内ではあまり情報がないことから影響はそんなに大きくなさそうなので、
おすすめカードエリアをなるべくぎっしりと埋めたい
というCocoonの仕様はそのままで、必要に応じてスタイルに修正を加える形でよいかと思います。
【解決方法】
同様の問題が生じた方のために、解決方法を簡潔にまとめておきます。
以下の3つの方法のうち、いずれかを適用することで調整できると思います。
- 現在のCocoonのスタイルに対し、「.recommended .navi-entry-cards a」の「width: 100%;」を無効にする（または画像サイズ以下のピクセル幅を設定する）。
- 十分に大きなサムネイル画像を用意し、おすすめカード（ナビカード）のサムネイル画像に採用する。
- Flexboxのタイプをサイドバーやタブレット以下のものと共通にし、カード画像に「vertical-align: bottom;」を設定する。
ざっくりと回答しておきます。
100％にする場合は、おすすめカード内のimgに対してvertical-align: bottom;を挿入すれば改善される感じですか？
いいえ。
問題点1・2とvertical-alignの根本的な原因は同じですが、現在のスタイルではvertical-alignを入れるだけでは改善しません。
4個を想定としているのでwidth:25％➡100%の件もmax-widthの400pxの仕様も問題ないです
いいえ。
上述したように、結果的にはこのwidthの仕様が原因です。
混在してるって言うより、サイドバーとかスマホ・タブレットの場合はメディアクエリでmax-width: 834pxのときだけ.recommended .navi-entry-cards に flex-wrap: wrap; を指定している感じで。
その領域メディアクエリなしで、全幅 flex-wrapにnowrap と指定したら、タブレット以下でも2列にはなりません。
解決方法3の視点から見ると、複数のタイプが混在しているのが問題とも言えます。
デフォルトのタイプに補正が入り、その補正が他のタイプのボックススタイルに影響しています（問題点1が問題点2やvertical-align問題に影響しているということ、問題点2やvertical-align問題はPCで表示したものをそのままスマホ幅に持っていったのが主な原因）。
last-childだけでなく、おすすめカードのリンクすべてに margin-right か何かの余白が付いていればそうなるかも
ひとつ上の回答にある影響とこれの関係でスタイルが崩れていました。
親テーマのカスタマイズを無効にしてみるとキチンと表示されませんか？
本トピックで添付した画像は全て、新たなローカル環境を用意して検証したものです。
Cocoon設定を引き継いだのと検証用に入れたコンテンツ以外は初期の状態です。
widthが100%になっているところを削除してみると改善できました
添付された画像とこれで解決したことから、#post-22301の添付画像内①や#post-22314の添付画像内上部と同じ症状だと思います。
子テーマを用意し、子テーマのスタイルでwidthを上書きするなどして対応してください。
PCビューですよね。
本来はスマホビューでの不具合。って話だと思ってるんですが。
いいえ。
主にPCビューで起こる問題です。
WindowsのChromeでは問題ない
いいえ。
この組み合わせでも生じ得る問題です。
edit reacted
Topic starter
2019-09-26 22:10
OSはWindowsで、ブラウザ情報は本トピック立ち上げ時では#post-22301にある情報です。
再現できないとのことだったので、#post-22301の時点でブラウザに起因する問題だと考え、念のため最新版へのアップデートを行い、#post-22314にある検証結果からはわいひら様と同バージョンのものとなっています。
edit reacted
2019-09-26 22:23
ブラウザ情報があったんですね。見落としていました。失礼しました。
- 現在のCocoonのスタイルに対し、「.recommended .navi-entry-cards a」の「width: 100%;」を無効にする（または画像サイズ以下のピクセル幅を設定する）。
- 十分に大きなサムネイル画像を用意し、おすすめカード（ナビカード）のサムネイル画像に採用する。
- Flexboxのタイプをサイドバーやタブレット以下のものと共通にし、カード画像に「vertical-align: bottom;」を設定する。
とりあえず、一番良いのは②にした方が一番良いのでしょうが、新たに大きなサムネイルサイズを作成し、利用者側でRegenerate Thumbnailsしてもらわなければならないので、これはやめておきます。
③も不具合環境がなく確認しながら修正ができないので、これも難しい。
ということで、消去法で①の修正をやっておこうと思います。出来れば、不具合を見て修正したかったんですけど、ちょっと再現出来そうもなかったので。
優先性で言えば「表示が崩れない」 >>> 「おすすめエリアを埋めたい」とした方が良いので。
Topic starter
2019-09-27 08:12
消去法で①の修正をやっておこうと思います。
とのことで、修正を確認しました。
ありがとうございます。
ひとつ返信し忘れておりましたが、#post-22368についてはこの環境下からだと確認できておりませんでした。
画像サイズまでに止めてしまうので、余白の不具合を除けばwidthによってボックス幅は変わらなかったということです。
不具合を見て修正したかったんですけど、ちょっと再現出来そうもなかったので。
一応、ブラウザのドキュメントを読み込めばどこかには載っているとは思います。
ブラウザネイティブなLazyLoadとかHTTP/3とか、いろいろ先取りして実験的に導入してしまうので、標準化される動きになればもっと情報が出てきたり、実装方法が分かりやすい仕様に変更されたりすると思います。
特に画像周りについては、Webからブラウザ・OS側に内製しつつあるので。
2019-09-27 10:59
ひとつ返信し忘れておりましたが、#post-22368についてはこの環境下からだと確認できておりませんでした。
画像サイズまでに止めてしまうので、余白の不具合を除けばwidthによってボックス幅は変わらなかったということです。
どの環境下かわからないですが、4個ってことかな？って思ったり？？？
その前に何かしらのChrome側で何かのCSSで、画像サイズ以上の指定をCSSですればおかしくなる。ってことかもしれませんね？？？
たぶんわいひらさんの環境でも小さいアイキャッチを利用した場合、例えば画像150px位の正方形に近い形だと、崩れる状態に似てるのかな？？とか。思ったり？？？
一応、ブラウザのドキュメントを読み込めばどこかには載っているとは思います。
ブラウザネイティブなLazyLoadとかHTTP/3とか、いろいろ先取りして実験的に導入してしまうので、標準化される動きになればもっと情報が出てきたり、実装方法が分かりやすい仕様に変更されたりすると思います。
一般記事を書いているユーザーさんの多くは、そのようなブラウザ？？？を使ってないと思います。
でも、それでどこもおかしくないのであれば、それはそれでいい結果が出たのかも知れないですね＾＾
ロコさん、わいひらさん、詳細までチェックをし続け疲れたかもですが、より良い環境になってるかもしれないですね！？？？おつかれさまでした ? ? ?
わいひら reacted
2019-09-27 18:41
画像最適化設定環境下でということです。
画像サイズが幅の最大値となるので、それ以上のwidthを指定していても変化がありません。
ロコさんの環境でって事かな？わからないですが、どっちでも大丈夫です。
丁寧なご返信ありがとうございます ?
一般記事を書いているユーザーさんの多くは、そのようなブラウザ？？？を使ってないと思います。
Chromeを使用している方は、よほどバージョンアップを怠っていない限りは実装されていて、標準化する方向に進みつつあります。
今はそうでないから確認ができない状態で。
標準化されたとき、はじめて確認できそうです ?
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。