ブラウザによって、WordPressでの記事幅・ヘッダー画像幅の表示が違う ⇒ 解決したよ~(^^)v

スポンサードリンク
 

IEとChromeでWordPressでの記事幅・ヘッダー画像幅が相違

 

当サイト(WordPressで作成)の「記事幅」と「ヘッダー画像幅」を広げ、「サイドバー幅」を狭めてみました。

幅を調整するのにいじったところは、

「ダッシュボード」→「外観」→「テーマの編集」→「style.css」内の「基本構造」のところにある

ヘッダーの幅サイズを 986px→1080px

記事幅サイズを 550px→680px

サイドバー幅のサイズを 336px→300px

です。

IEで編集し、Chromeでサイトの表示を確認しながら行ってました。

Chromeでの表示は望み通りOK!

ところが、IEで表示したところ、「ヘッダー幅」「サイドーバー幅」「記事幅」のうち、「記事幅」だけが昔のままという状態に。

 

【Chromeでの表示】

chrome%e3%81%a7%e3%81%ae%e8%a8%98%e4%ba%8b%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%80b-%e4%bf%ae%e6%ad%a3%e6%b8%88%e3%81%bf

 

【IEでの表示】

ie%e3%81%a7%e3%81%ae%e8%a8%98%e4%ba%8b%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%80b-%e4%bf%ae%e6%ad%a3%e6%b8%88%e3%81%bf

 

 

 

 

表示相違の原因追及が始まります

いろいろ検証した結果、あやしい箇所が絞られてきました

 

検証1

同じパソコンの別アカウント(当サイトへの投稿記事作成で使ったことのあるアカウント)のIEとChromeで表示させてみる。

すると、IEでは希望通りの幅に調整された画面表示になりました。

ところが、Chromeでの表示が、記事幅だけ昔のままです。

 

【Chromeでの表示】

chrome%e3%81%a7%e3%81%ae%e8%a8%98%e4%ba%8b%e3%83%9a%e3%83%bc%e3%82%b8-a-%e4%bf%ae%e6%ad%a3%e6%b8%88%e3%81%bf

 

【IEでの表示】

ie%e3%81%a7%e3%81%ae%e8%a8%98%e4%ba%8b%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%80a-%e4%bf%ae%e6%ad%a3%e6%b8%88%e3%81%bf

 

検証2

「style.css」 での幅の変更を、IEではなくChromeでやり直してみた。

⇒変化なし(改善なし)

 

検証3

検証用に取得した独自ドメインを同じサーバーに設定し、WordPressをインストール。

「FFTP」で、当サイトの「plugins」「themes」「uploads」をバックアップ。

バックアップした「plugins」「themes」「uploads」を検証用独自ドメインのWordPressに上書き。

 

検証用独自ドメンのWordPressに、

css編集画面・php編集画面で変更した部分を同じにし、各プラグインの設定を可能な限り同じにし、「カテゴリー」構成、パーマリンク設定、アイキャッチ、記事中の画像、記事同士のリンク構成も同じにして記事を書いてみました。

⇒IE、Chrome共、希望通りの幅広サイズで表示OK (どのアカウントのIE・Chromeで試しても、希望通りの幅広サイズで表示OK)

 

検証4

「当サイト」と「検証用独自ドメインサイト」の「sidebar.php」「footer.php」「header.php」「function.php」「style.css」の文字列の相違を一文字ずつ確認。

●「header.php」から、googleの識別コードを削除。

→文字列を全く同じにする。

⇒変化なし(改善なし)

 

検証5

「プラグイン」の干渉を考慮し、「プラグイン」を可能な限り削除してみる。

「Contact form 7」「SiteGuard WP Plugin」も削除して試しました。

⇒変化なし(改善なし)

 

「Contact form 7」「SiteGuard WP Plugin」は大切なプラグインなので、検証後、すぐに再インストールしました。

%e3%83%97%e3%83%a9%e3%82%b0%e3%82%a4%e3%83%b3%ef%bc%93%e3%81%a4%e3%81%a0%e3%81%91

 

 

検証6

当サイトを閲覧したことがある「Windows8.1タブレットPC」のIEとChromeで試してみる。

・Chromeは、希望の幅広サイズで表示OK

・IEは、記事幅だけ昔のまま

⇒ PCと状況同じ

 

検証7

当サイトを閲覧したことがない「Windows10」のパソコンで試してみる。

→IE・Chrome共、希望通りの幅広サイズで表示OK。

 

検証8

当サイトの作成に使っているノートパソコンに、さらに別のアカウントを新規作成。

新規アカウントのIEとChromeで試す。

→IE・Chrome共、希望通りの幅広サイズで表示OK。

 

%e7%9f%a2%e5%8d%b0

 

「キャッシュのクリア」をしてみよう

IEのキャッシュのクリア

IEでの表示がおかしいアカウントのIEの「インターネットオプション」をみていきます。

「ツール」→「インターネットオプション」→「全般タブ」→「閲覧の履歴」の「削除(D)…」をクリック

→「閲覧の履歴の削除」画面で、「インターネット一時ファイルおよびWebサイトのファイル(T)」にチェックを入れ「削除(D)」をクリック

⇒IEとChromeでの表示相違解消!

ie%e3%81%a7%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5%e3%82%af%e3%83%aa%e3%82%a2%e6%99%82%e3%81%ae%e8%a8%ad%e5%ae%9a%ef%bc%88%e8%a1%a8%e7%a4%ba%e6%94%b9%e5%96%84%e3%81%97%e3%81%9f%ef%bc%89

※ 私は、削除項目をできるだけ最小にとどめたいので、「お気に入りWebサイトデータを保持する(R)」にチェックを入れたまま(当サイトをお気に入りに登録したことがないので)、「インターネット一時ファイルおよびWebサイトのファイル(T)」以外のチェックは外し、「削除(D)」をクリックしました。

 

Chromeのキャッシュのクリア

Chromeでの表示がおかしいアカウントのChromeの「履歴」をみていきます。

Chrome右上の「縦3つの点々」をクリック→「履歴(H)」をクリック→「閲覧履歴データの消去…」ボタンをクリック。

→「閲覧履歴データを消去する」画面で、「キャッシュされた画像とファイル」にチェックを入れ「閲覧履歴データを消去する」ボタンをクリック。

⇒ChromeとIEでの表示相違解消!

chrome%e3%81%a7%e3%81%ae%e3%82%ad%e3%83%a3%e3%83%83%e3%82%b7%e3%83%a5%e6%b6%88%e5%8e%bb%e8%a8%ad%e5%ae%9a%e7%94%bb%e9%9d%a2%e8%a1%a8%e7%a4%ba%e8%a7%a3%e6%b1%ba%e3%81%97%e3%81%9f%ef%bc%89%e4%bf%ae

 

 

タブレットPC(Windows8.1)のIEも、キャッシュのクリアで解決!

【IEでの表示】

ie-%e8%a8%98%e4%ba%8b

 

【Chromeでの表示】

chrome-%e8%a8%98%e4%ba%8b

 

 

いろいろ検証するために、いろいろ削除したり、変更を戻したりしましたが、「css編集」「php編集」「プラグイン」「編集に使用するブラウザでIEを使った」などは「ブラウザによる表示幅の相違」とは関係なく、表示がおかしいブラウザの「キャッシュのクリア」をするだけで解決するようなものでした。
 
 

スポンサードリンク

関連記事

LaLa Call(ララコール) 留守番電話詳細(通知メール) アプリ内設定項目(画面ショット)

LaLa Call 不在着信時の通知メール 「LaLa Call」アプリ ⇒ 「設定」 ⇒ 「オプ

記事を読む

Polaroid(ポラロイド) Pigu Wi-Fi(無線)接続設定       (SIMフリースマホ)

SIMフリースマホをSIM以外でデータ通信(インターネット)してみよう! WiMaxを使って、Po

記事を読む

WiMAX 機器比較(W04・WX03・W03・WX02・L01・novasHome+CA)

  目次 ●前書き ●Speed Wi-Fi NEXT W04 ●Spee

記事を読む

PPPoE接続設定 ー パソコン初心者向け

  パソコンにプロバイダー(ISP)の「接続用ID・パスワード」を設定する方法をWi

記事を読む

Polaroid(ポラロイド) pigu  該当SIMのアクセスポイントが一覧にない場合

1 この画面に、該当のアクセスポイントが無い場合は、 画面右上の赤丸1をタップ。

記事を読む

パソコン初心者のための失敗しないWiMax選び 重要ポイント (転勤族、引っ越しに便利なモバイル 申込み・購入前のチェック項目)

  利用していたWiMax(昔のWiMax)が、2015年初め頃から速度が遅く感じる

記事を読む

パソコン側の無線接続設定 ー パソコン初心者の無線接続設定【3】

  無線ルーター側で暗号化を含む無線の設定が完了したら、次はパソコン側での無線設定に

記事を読む

スマホAS01MのWifi スリープ時常時接続で050IP電話も固定電話のように

SIM未装着のスマホをネットに常時接続するには AS01M(android5.1)で説明

記事を読む

同一住所・同一名義人が、eo回線サービスはmineo1回線のみでLaLa Call 050番号を2つ持てました!

eo回線サービス1契約のみで eoID2つ持つ 基本料金が月額100円の「LaLa Call 05

記事を読む

WEP・WPA・TKIP・AESのセキュリティ度 ー パソコン初心者の無線接続設定【1】

目次 【1】無線の「認証方法・暗号化方法」の種類 ・・一般の無線設定で厳密な分類は不要 ・

記事を読む

  • スポンサードリンク
PAGE TOP ↑