サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月6日 22:47
お世話になっております。
【問題】
これまでヘッダーロゴには大きめの画像（width:1000px）の画像を使用していて、IE(11)を除く全てのブラウザでは問題なく表示されていました。ロゴの設定はCocoon設定の標準の機能を使っています。
しかし、（最近になって？）IEでページ遷移した際に「大きい状態（素の画像サイズ）からCSSで指定したサイズに縮まるような動き」が実際に見えてしまうようになりました。添付ファイルにGIFを用意しています。
【試したこと】
・元の画像が大きすぎるのはやっぱり良くないと思い、1000pxから300pxに変更してみましたが、さすがに画像が荒くなるのが気になり、今は600pxにしています。600だと問題は改善されず…というところです。
・IEではmax-widthが妙な動きをするのは知っていたので、使うCSSプロパティはwidthだけにしてみています。改善せず、です。
IEだけ何か対応されていないCSSプロパティなどがあってこうなってしまうのでしょうか？知識が足らず解決に至りません。Cocoonには関係なくて恐縮ですが、お力を貸していただけますと幸いです。
Topic starter
2020年3月6日 22:51
よく見たら右上の自分で足したメニューとメインカラムのアイキャッチ的なやつも同じ現象が起きていますね…。
記事内の画像では起きないので、何か自分が書いたCSSが原因な気はします…。
2020年3月6日 22:56
みるみさん
実は、もうだいぶ前から気づいていたのですが・・
たぶん、高速化設定の「JavaScriptをフッターで読み込む」のチェックを外すと、症状が治まりませんか？
Topic starter
2020年3月6日 23:01
@leafytreeさん、ありがとうございます。
たぶん、高速化設定の「JavaScriptをフッターで読み込む」のチェックを外すと、症状が治まりませんか？
何度も確認してみましたが、改善しませんでした（現在OFF中ですのでご確認ください）。
ちなみにleafytreeさんの環境でも、やはりIEだけでこうなっていますでしょうか？
2020年3月6日 23:05
いまも、症状が出ていますね。
子テーマが優先だとは思うのですが、親テーマの設定はいかがですか？
Topic starter
2020年3月6日 23:06
環境情報を追記しておきます。
---------------------------------------------- サイト名：みるめも サイトURL： https://milmemo.net ホームURL： https://milmemo.net コンテンツ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.3.2 PHPバージョン：7.3.14 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.125 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.1.1.4 カテゴリ数：22 タグ数：1282 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.0.7 style.cssサイズ：71122バイト functions.phpサイズ：48975バイト ---------------------------------------------- Gutenberg：0 AMP：0 PWA：0 Font Awesome：5 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/uploads/blog-milmemo.png ---------------------------------------------- ブラウザキャッシュ有効化：0 HTML縮小化：0 CSS縮小化：1 JavaScript縮小化：1 Lazy Load：0 WEBフォントLazy Load：1 JavaScript（フッター）：0 ---------------------------------------------- 利用中のプラグイン： AddQuicktag 2.5.3 Akismet Anti-Spam 4.1.3 BackWPup 3.7.0 Broken Link Checker 1.11.11 Compress JPEG & PNG images 3.2.1 Contact Form 7 5.1.6 Google XML Sitemaps 4.1.0 Show Article Map 0.7 TinyMCE Advanced 5.3.0 WebSub/PubSubHubbub 3.0.3 WP-Optimize - Clean, Compress, Cache 3.0.16 WP Fastest Cache 0.9.0.3 WP Multibyte Patch 2.8.3 ----------------------------------------------
2020年3月6日 23:08
私の場合は、「JavaScriptをフッターで読み込む」をONにすると、ニュルッと動く感じだったので、OFFにしています。
症状が出るのはIEだけです。
2020年3月6日 23:21
今、「JavaScriptをフッターで読み込む」をONにしてみたので、ちょっとメニューかなんかをクリックしてみてください。
関係ないかもしれませんが、みるみさんと同じサーバー会社ですね。
以前は、ニュルッと動いたのですが、今、見てみると、カクカクとぎこちない動きですね。
私も！という方、いしゃしゃいますかね？
わいひら reacted
Topic starter
2020年3月6日 23:26
今、「JavaScriptをフッターで読み込む」をONにしてみたので、ちょっとメニューかなんかをクリックしてみてください。
なるほどたしかに、IEだけは同じ現象が起きていますね。
これが「JavaScriptをフッターで読み込む」をOFFにするとなくなるのですか？
2020年3月6日 23:27
では、ちょっとOFFにしてみます。
・・・・
今、やってみると、ちょっと微妙ですね。
OFFにしても、若干、カクカクするような気もします。
でも、ONのときより少ないような気もするし・・
私は、文字間隔をCSSで少し広げているのですが、以前はそれがニュルッとゆっくり効いてくるみたいな感じだったんです。
2020年3月6日 23:36
Akiraさん なら、何かご存じかもしれない・・・
2020年3月7日 12:57
Akiraさんの環境では、症状が出ないんですね。
IEのキャッシュを消して、試してみたのですが、みるみさんのサイトを見てみると、前述の症状が出てしまいます。
私のサイトでは、特に問題にするほど気にならないのですが・・
いろんな要因があるので、なかなか難しいですね。
でも、みるみさんは、困っちゃうかな・・
2020年3月7日 13:19
私の環境でもチェックしてみました。
毎回ではないのですが、#post-29387の添付画像にあるような挙動が見られました。
読み込み後のデザイン崩れはなさそうなので、レンダリング時の問題ではないでしょうか。
CocoonのCSS縮小化によるインラインスタイル部分の処理に時間がかかっていることで、この問題が発生しているような気がします。
CSS縮小化をオフにするとどうなりますか？
あと、Akira様の書かれている内容にもあるように、個人的にはIE対応しないケースも増えてきていますし、そろそろIE対応自体も考えどころではあると思っています。
わいひら reacted
Topic starter
2020年3月7日 15:32
皆様ありがとうございます。
＞Akiraさん
みるみさんの環境が影響を与えているのかもしれません。例えば、IE のキャッシュや拡張機能です。セキュリティソフトもあり得るかもしれません。
Akiraさんがおっしゃるように原因はブラウザ外にもあるかもと想定し、以下を試してみました。
- IEのキャッシュ削除（いつもやっていますが一応）
- 関係ありそうなアドオンのON/OFF
-
- 「XML DOM Document」を無効化→有効化
- 「Shockwave Flash Object」を有効化→無効化
- セキュリティソフトの停止（Avast）
- Windows Defenderのファイアウォールを切ってみる
いずれも効果なしでした…。
＞ロコさん
CSS縮小化をオフにするとどうなりますか？
変わらずでした。現在もOFFですのでロコさんにもご確認いただけますと幸いです。
※JavaScriptの縮小化OFFも試しました。
CocoonのCSS縮小化によるインラインスタイル部分の処理に時間がかかっている
これはすごい思いました！
たしかに「単に時間がかかっている」という印象ですよね。
そろそろIE対応自体も考えどころではあると思っています。
IEの対応を考えたくないのはやまやまですが、実際のアクセスを見ると使用ユーザーはまあまあいるのですよね…。
-----------------
しかも途中で気付いたのですがedgeでも同様の症状が起きてました…。
今のedgeってBlinkなんじゃなかったでしたっけ…？（ただし純粋なChrome系列のブラウザでは一度も起きていません）
どうやら何か問題があってこうなっているわけではないですし、全ての環境で起きている問題でもないようなので解決は見送ろうかと思います。このような問題に皆様の手を煩わせるのも申し訳ないので…。
This post was modified 5年前 by みるみ
2020年3月7日 18:24
そのままの状態で、ヘッダーロゴ画像のサイズを決めている
#header-in > .logo-image {
width: 27.3%;
}
や、トップページコンテンツ最上部の画像サイズを決めている
.home-hajimemashite img {
width: 53%;
}
を子テーマfunctions.phpなどで以下のように記述してみる（Cocoonの親テーマstyle.cssよりも先に読み込む）とどうでしょうか。
add_action('wp_head', function () {
echo '<style>#header-in>.logo-image{width: 27.3%;}</style>';
}, 2);
国内で6%程度だと少し低い方かと思いますが、使用率で考えるというよりも個々の技術ベースで対応させるべきか否かを考えるということです。
わいひら reacted
Topic starter
2020年3月7日 20:01
＞ロコさん
なるほど！そんな手が。
さっそくやってみました。
たしかにスタイルは適用されていますが、添付画像のようにCSS自体は子テーマのstyles.cssのものが有効になっています。これはあとから読み込まれているので当然と思って良いのですよね？
で、今のところ効果は現れていません。。
国内で6%程度だと少し低い方かと思いますが、使用率で考えるというよりも個々の技術ベースで対応させるべきか否かを考えるということです。
はい、たしかにおっしゃるとおりかもしれませんね…。
2020年3月7日 20:51
試しに以下のコードを子テーマのstyle.cssに追記すると、動作は変化しますか？
.header-container * {
transition: 0s !important;
}
これは、固定ヘッダーを追加したときに関連するCSSなんですが、これで変化があるようであれば、ちょっとこちら側でも、改善する必要があるかもしれません。
Topic starter
2020年3月7日 21:00
＞わいひらさん
おおお…！
現象がなくなりました！！
ただし、当然ですがヘッダー関係のtransitionは全て消えています。
今も適用しておりますのでご確認ください。
2020年3月7日 22:49
ご確認ありがとうございます。
とりあえず追記したコードは消していただいて大丈夫です。
アニメーションを固定ヘッダーに必要な部分のみに限定したファイルをアップしておきました（さすがに大ざっぱな指定すぎました^^;）。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
こちらでアップデートしていただいて、もし思い通りになっていないアニメーション部分があれば、その部分を優先度の上回るCSSセレクタで上書きスタイルを追加してみていただければと思います。
Topic starter
2020年3月7日 23:16
ええと。
結論から言いますと、右上のオリジナルで足したメニューだけは改善されました。
わいひらさんが修正された
.header-container .logo {
transition: 0s !important;
}
によって、右上の固定メニューだけは対象から外れたからだと思われます。
つまり、「.logo」というクラスを持っている以上は今回の現象は回避できないということですよね？
解決方法は
- 今回変更されたCSSセレクタをもっと限定的なものに変更してもらえる
- 自サイトでのみ、ロゴのクラスから.logoを削除する
のどちらかしかない感じでしょうか。
IEはtransitionでのアニメーションが何か上手くいかないイメージがありましたが、やっぱり根本的に解決するのは難しいみたいですね…。
トップページ最上部にあるコンテンツでも同じような挙動がありますが、これもきっとtransition:0s;以外に方法はないのかもしれません。
This post was modified 5年前 by みるみ
2020年3月7日 23:42
GitHubのファイルのCSSをさらに固定ヘッダーのみに適用されるように限定してみました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。