サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2019年1月18日 01:01
エッジにおいて、Lazy Loadを有効にすると、ヘッダーロゴが何故か小さくなります。スクロールさせたり、再読込で本来の大きさになります。
クロームは問題ありません。
「Lazy Loadを行いたくない場合は、該当するimgタグに含まれている文字列を改行区切りで入力してください。」f欄に、classのsite-logo-imageを入れると、改善されました。
よろしくお願いします。
2019年1月18日 01:28
テスト環境でテストした結果、そのような状況にもなりませんでした。
あと公式ページを表示してもそのようになりません。※Cocoon機能のLazy Loadが有効になっているようです。
- 原因の特定のため、親テーマのみで試す。
この状況で表示されるのであれば、子テーマカスタマイズのない状況では問題ない。子テーマのカスタマイズで影響がある可能性が高い。
- プラグインを停止して、子テーマで表示。
表示されたら、プラグインが原因の可能性が高い。となるかと思います。
わいひら reacted
トピックスターター 2019年1月18日 09:11
了解です。
諸々ご検証いただきありがとうございました。
こちらもsite-logo-imageを入れているので実害はございません。
一応ご報告しておくと、
●環境
----------------------------------------------
サイト名：Idol.ne.jp
サイトURL： https://idol.ne.jp
ホームURL： https://idol.ne.jp
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン：5.0.3
PHPバージョン：7.2.13
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8,de;q=0.7,es;q=0.6,vi;q=0.5,zh-CN;q=0.4,zh;q=0.3,zh-TW;q=0.2,pl;q=0.1,pt;q=0.1,fr;q=0.1,it;q=0.1
----------------------------------------------
テーマ名：Cocoon
バージョン：1.5.2.3
カテゴリ数：59
タグ数：1981
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
Gutenberg：1
ホームイメージ：/wp-content/uploads/2018/12/og-image.png
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：1
CSS縮小化：1
JavaScript縮小化：1
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.1
BackWPup 3.6.6
Contact Form 7 5.1.1
Disable Google Fonts 2.0
Google XML Sitemaps 4.1.0
PS Auto Sitemap 1.1.9
Really Simple CAPTCHA 2.0.1
Remove Query Strings From Static Resources 1.4
Smart Custom Fields 4.1.2
WP-Polls 2.75.2
WP-PostViews 1.75
WP Multibyte Patch 2.8.1
----------------------------------------------
コクーン設定「ヘッダー設定」は、
●ヘッダーレイアウト：トップメニュー(右寄せ)
●ヘッダーロゴ
400×120px画像を指定。
●それ以外はデフォルトのままです。
ただし、こうするとヘッダーロゴ画像の比率が歪むので、子テーマのstyle.cssに
.header-container-in.hlt-top-menu .logo-header img {
max-height: 75px;
max-width: 250px;
height: 100%;
width: 100%;
}
としています。
当サイトのヘッダーロゴのclass属性にsite-logo-imageは付いていますが、lozad lozad-imgは付いていないようです。
よろしくお願いします。
2019年1月18日 11:30
詳細な情報に感謝です。
ヘッダーレイアウト：トップメニュー(右寄せ)
こちらをローカルで試すとタブレットサイズ『679pxくらい～サイドバーが表示される幅』まで、微妙に画像の比率が変わっているようですね。
img { max-width: 100%; }が入っている上で以下、幅widthがautoになってます。
.header-container-in.hlt-top-menu .logo-header img {
max-height: 60px;
height: 100%;
width: auto;
}
max-width: none;などの指定がその幅（メディアクエリ）で指定すれば問題ない印象です。
Lazy Load機能が原因か確かめたかったのですが、今ブラウザがおかしいようで、検証できてません。
当サイトのヘッダーロゴのclass属性にsite-logo-imageは付いていますが、lozad lozad-imgは付いていないようです。
そうですね。それは正常だと思いますよ。
Lazy Load除外で以下項目を設定されてるいれば、lozad lozad-imgがclass属性に付かない認識だからです。
こちらもsite-logo-imageを入れているので実害はございません。
大きさは変わりませんが、比率が変わるだけで、小さくはなりませんでした。
※ローカルでは画像サイズ: 300 × 288で試したのみです
https://gyazo.com/7f6021f18eebc78ca37b75bcf18f5106
max-width:none なし↑ あり↓ の表示テスト
この投稿は6年前 4回ずつかうたっくに変更されました
わいひら reacted
トピックスターター 2019年1月18日 14:30
.header-container-in.hlt-top-menu .logo-header img {
max-height: 60px;
height: 100%;
width: auto;
}
これは親cssですね。
このままでは画像左右の比率？が崩れたので、ご案内の通り子テーマに
.header-container-in.hlt-top-menu .logo-header img {
max-height: 75px;
max-width: 250px;
height: 100%;
width: 100%;
}
とした所、私の環境下では改善しました。
そのへんの違いが今回の原因かなと思い、site-logo-imageを遅延読み込み対象から外し、子テーマの.header-container-in.hlt-top-menu .logo-header img を外してみましたが、現象が再現してしまいました。(今は戻して正常です)
ほかでは再現していないようなので私の他のカスタマイズが原因かもしれませんね。
よろしくお願いします。
2019年1月18日 16:19
ほかでは再現していないようなので私の他のカスタマイズが原因かもしれませんね。
よろしくお願いします。
こちらは冒頭で書いた通りかもです。#post-11202
もし私がその状態で自分1人用のスタイルを作るとしたら、全て同じサイズで統一しても良いのでは。と思いstyleを付けると思います。
ヘッダーロゴ
400×120px画像を指定。
例えばこの半分の画像を指定し、問題ないか確認してみる感じです。。
.header-container-in.hlt-top-menu .logo-header img {
max-height: 60px;
max-width: 200px;
height: 60px;
width: 200px;
}
とりあえず小さくなる状況も見れないので、どこが原因かを特定するのも良いかもしれませんね。
わいひら reacted
トピックスターター 2019年1月18日 16:42
度々のコメントありがとうございます。
ご指定のとおり、子テーマのCSSを
.header-container-in.hlt-top-menu .logo-header img {
max-height: 60px;
max-width: 200px;
height: 60px;
width: 200px;
}
に変更し、遅延読み込みからsite-logo-imageを外してました。
見事エッジの不具合が解消されました。
かうたっくさんにはお手数をおかけいたしました。
ありがとうございます。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。