IEでの大きいサイズ画像の表示仕様についてご教授ください | カスタマイズ相談 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
IEでの大きいサイズ画像の表示仕様につ...
 
Share:
Notifications

[解決済] IEでの大きいサイズ画像の表示仕様についてご教授ください  


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月6日 22:47  

お世話になっております。

https://milmemo.net/

【問題】

これまでヘッダーロゴには大きめの画像(width:1000px)の画像を使用していて、IE(11)を除く全てのブラウザでは問題なく表示されていました。ロゴの設定はCocoon設定の標準の機能を使っています。

しかし、(最近になって?)IEでページ遷移した際に「大きい状態(素の画像サイズ)からCSSで指定したサイズに縮まるような動き」が実際に見えてしまうようになりました。添付ファイルにGIFを用意しています。

【試したこと】

・元の画像が大きすぎるのはやっぱり良くないと思い、1000pxから300pxに変更してみましたが、さすがに画像が荒くなるのが気になり、今は600pxにしています。600だと問題は改善されず…というところです。

・IEではmax-widthが妙な動きをするのは知っていたので、使うCSSプロパティはwidthだけにしてみています。改善せず、です。

 

IEだけ何か対応されていないCSSプロパティなどがあってこうなってしまうのでしょうか?知識が足らず解決に至りません。Cocoonには関係なくて恐縮ですが、お力を貸していただけますと幸いです。  


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月6日 22:51  

よく見たら右上の自分で足したメニューとメインカラムのアイキャッチ的なやつも同じ現象が起きていますね…。

記事内の画像では起きないので、何か自分が書いたCSSが原因な気はします…。

 


leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 22:56  

みるみさん

実は、もうだいぶ前から気づいていたのですが・・

たぶん、高速化設定の「JavaScriptをフッターで読み込む」のチェックを外すと、症状が治まりませんか?


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月6日 23:01  

@leafytreeさん、ありがとうございます。

投稿者:: @leafytree

たぶん、高速化設定の「JavaScriptをフッターで読み込む」のチェックを外すと、症状が治まりませんか?

何度も確認してみましたが、改善しませんでした(現在OFF中ですのでご確認ください)。

ちなみにleafytreeさんの環境でも、やはりIEだけでこうなっていますでしょうか?

 


leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 23:05  

いまも、症状が出ていますね。

子テーマが優先だとは思うのですが、親テーマの設定はいかがですか?


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
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
----------------------------------------------

leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 23:08  

私の場合は、「JavaScriptをフッターで読み込む」をONにすると、ニュルッと動く感じだったので、OFFにしています。

症状が出るのはIEだけです。


leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 23:21  

今、「JavaScriptをフッターで読み込む」をONにしてみたので、ちょっとメニューかなんかをクリックしてみてください。

https://leafytree.info/

関係ないかもしれませんが、みるみさんと同じサーバー会社ですね。

以前は、ニュルッと動いたのですが、今、見てみると、カクカクとぎこちない動きですね。

私も!という方、いしゃしゃいますかね?


わいひら 件のいいね!
みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月6日 23:26  
投稿者:: @leafytree

今、「JavaScriptをフッターで読み込む」をONにしてみたので、ちょっとメニューかなんかをクリックしてみてください。

なるほどたしかに、IEだけは同じ現象が起きていますね。

これが「JavaScriptをフッターで読み込む」をOFFにするとなくなるのですか?


leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 23:27  

では、ちょっとOFFにしてみます。

・・・・

今、やってみると、ちょっと微妙ですね。

OFFにしても、若干、カクカクするような気もします。

でも、ONのときより少ないような気もするし・・

私は、文字間隔をCSSで少し広げているのですが、以前はそれがニュルッとゆっくり効いてくるみたいな感じだったんです。


leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月6日 23:36  

Akiraさん なら、何かご存じかもしれない・・・


Akira
(@akira)
Reputable Memberサイト
参加: 2年 前
投稿: 498
Akira - FacebookAkira - Twitter
2020年3月7日 12:09  

私の IE では、そのような動きはしませんでした。

また、デベロッパーツールでも変な部分は見られませんでした。

みるみさんの環境が影響を与えているのかもしれません。例えば、IE のキャッシュや拡張機能です。セキュリティソフトもあり得るかもしれません。

昨日わいひらさんのツイート先を見てみたら、WordPressに IE でログインすると警告が出るんですね。よくやった WordPress 。

WordPress 5.4 をチェックしています

This post was modified 3週間 前 3 times by Akira

わいひら 件のいいね!
leafytree
(@leafytree)
Reputable Member
参加: 1年 前
投稿: 305
2020年3月7日 12:57  

Akiraさんの環境では、症状が出ないんですね。

IEのキャッシュを消して、試してみたのですが、みるみさんのサイトを見てみると、前述の症状が出てしまいます。

私のサイトでは、特に問題にするほど気にならないのですが・・

いろんな要因があるので、なかなか難しいですね。

でも、みるみさんは、困っちゃうかな・・


ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
2020年3月7日 13:19  

私の環境でもチェックしてみました。

毎回ではないのですが、#post-29387の添付画像にあるような挙動が見られました。

 

読み込み後のデザイン崩れはなさそうなので、レンダリング時の問題ではないでしょうか。

CocoonのCSS縮小化によるインラインスタイル部分の処理に時間がかかっていることで、この問題が発生しているような気がします。

CSS縮小化をオフにするとどうなりますか?

 

あと、Akira様の書かれている内容にもあるように、個人的にはIE対応しないケースも増えてきていますし、そろそろIE対応自体も考えどころではあると思っています。


わいひら 件のいいね!
みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月7日 15:32  

皆様ありがとうございます。

>Akiraさん

投稿者:: @akira

みるみさんの環境が影響を与えているのかもしれません。例えば、IE のキャッシュや拡張機能です。セキュリティソフトもあり得るかもしれません。

Akiraさんがおっしゃるように原因はブラウザにもあるかもと想定し、以下を試してみました。

  • IEのキャッシュ削除(いつもやっていますが一応)
  • 関係ありそうなアドオンのON/OFF
    • 「XML DOM Document」を無効化→有効化
    • 「Shockwave Flash Object」を有効化→無効化
  • セキュリティソフトの停止(Avast)
  • Windows Defenderのファイアウォールを切ってみる

いずれも効果なしでした…。

>ロコさん

投稿者:: @lococo

CSS縮小化をオフにするとどうなりますか?

変わらずでした。現在もOFFですのでロコさんにもご確認いただけますと幸いです。
※JavaScriptの縮小化OFFも試しました。

投稿者:: @lococo

CocoonのCSS縮小化によるインラインスタイル部分の処理に時間がかかっている

これはすごい思いました!
たしかに「単に時間がかかっている」という印象ですよね。

投稿者:: @lococo

そろそろIE対応自体も考えどころではあると思っています。

IEの対応を考えたくないのはやまやまですが、実際のアクセスを見ると使用ユーザーはまあまあいるのですよね…。

-----------------

しかも途中で気付いたのですがedgeでも同様の症状が起きてました…。
今のedgeってBlinkなんじゃなかったでしたっけ…?(ただし純粋なChrome系列のブラウザでは一度も起きていません)

どうやら何か問題があってこうなっているわけではないですし、全ての環境で起きている問題でもないようなので解決は見送ろうかと思います。このような問題に皆様の手を煩わせるのも申し訳ないので…。

This post was modified 3週間 前 by みるみ

ロコ
(@lococo)
Honorable Member
参加: 2年 前
投稿: 536
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%程度だと少し低い方かと思いますが、使用率で考えるというよりも個々の技術ベースで対応させるべきか否かを考えるということです。


わいひら 件のいいね!
みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月7日 20:01  

>ロコさん

なるほど!そんな手が。
さっそくやってみました。

たしかにスタイルは適用されていますが、添付画像のようにCSS自体は子テーマのstyles.cssのものが有効になっています。これはあとから読み込まれているので当然と思って良いのですよね?

で、今のところ効果は現れていません。。

投稿者:: @lococo

国内で6%程度だと少し低い方かと思いますが、使用率で考えるというよりも個々の技術ベースで対応させるべきか否かを考えるということです。

はい、たしかにおっしゃるとおりかもしれませんね…。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月7日 20:51  

試しに以下のコードを子テーマのstyle.cssに追記すると、動作は変化しますか?

.header-container * {
  transition: 0s !important;
}

これは、固定ヘッダーを追加したときに関連するCSSなんですが、これで変化があるようであれば、ちょっとこちら側でも、改善する必要があるかもしれません。


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月7日 21:00  

>わいひらさん

おおお…!
現象がなくなりました!!

ただし、当然ですがヘッダー関係のtransitionは全て消えています。

今も適用しておりますのでご確認ください。


わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月7日 22:49  

ご確認ありがとうございます。
とりあえず追記したコードは消していただいて大丈夫です。
アニメーションを固定ヘッダーに必要な部分のみに限定したファイルをアップしておきました(さすがに大ざっぱな指定すぎました^^;)。

------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------
こちらでアップデートしていただいて、もし思い通りになっていないアニメーション部分があれば、その部分を優先度の上回るCSSセレクタで上書きスタイルを追加してみていただければと思います。


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月7日 23:16  

ええと。

結論から言いますと、右上のオリジナルで足したメニューだけは改善されました。

わいひらさんが修正された

.header-container .logo {
  transition: 0s !important;
}

によって、右上の固定メニューだけは対象から外れたからだと思われます。

つまり、「.logo」というクラスを持っている以上は今回の現象は回避できないということですよね?

解決方法は

  • 今回変更されたCSSセレクタをもっと限定的なものに変更してもらえる
  • 自サイトでのみ、ロゴのクラスから.logoを削除する

のどちらかしかない感じでしょうか。

IEはtransitionでのアニメーションが何か上手くいかないイメージがありましたが、やっぱり根本的に解決するのは難しいみたいですね…。

トップページ最上部にあるコンテンツでも同じような挙動がありますが、これもきっとtransition:0s;以外に方法はないのかもしれません。

This post was modified 3週間 前 by みるみ

わいひら
(@yhira)
メンバーサイト Admin
参加: 2年 前
投稿: 8715
わいひら - Facebookわいひら - Twitter
2020年3月7日 23:42  

GitHubのファイルのCSSをさらに固定ヘッダーのみに適用されるように限定してみました。


みるみ
(@mirumi)
Estimable Memberサイト
参加: 6か月 前
投稿: 134
みるみ - Twitter
2020年3月8日 10:15  

ありがとうございます。
解決しました!

(よく考えたら自分で足していたtransitionがあったので、それはIEでのみ解除するようにCSSを変更しました)

他の皆様も色々とご指南いただきありがとうございました。

This post was modified 3週間 前 by みるみ

わいひら 件のいいね!
Share:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:1年8ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:1年6ヶ月

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:16年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon
タイトルとURLをコピーしました