質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

2569閲覧

スマホにレスポンシブ対応していたが表示が崩れてしまいました

ebiPT

総合スコア15

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/06/01 05:50

編集2017/06/01 05:58

皆さんにお世話になります。

前提・実現したいこと

投稿させていただきます。
googleアナリティクスでページスピードが遅いことの指摘があったのでページスピードを上げようと四苦八苦していたところ、パソコン上でのHP表示は問題ないのですが、元々はスマホにレスポンシブ対応し画像が適当なサイズになったり、スマホでしか表示しない画像などを登録していたのですが、スマホで閲覧したときに、画像サイズが大きすぎる、スマホで表示するはずのない画像が出てしまう、文字が極端に左寄りになってしまう、など表示が崩れてしまいました(泣)
ほぼ初心者のため、稚拙な内容があれば申し訳ありません。

発生している問題・エラーメッセージ

スマホ閲覧時に表示が崩れてしまう

考えられる原因
0. htaccessの記載ミス
0. プラグインをいくつか入れたことによるもの

入れたプラグイン

  • BJ Lazy Load
  • Kraken Image Optimizer
  • Speed Up - JavaScript To Footer
  • WP Fastest Cache

試したこと

①.htaccessの初期化

スマホ表示での崩れに気づいた時の.htaccess

# BEGIN VA SIMPLE BASIC AUTH <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1] </IfModule> # END VA SIMPLE BASIC AUTH # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress #ブラウザキャッシュの設定 ExpiresActive On ExpiresByType text/css "access plus 1 days" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" #フォント ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 7 days" # CSS ExpiresByType text/css "access plus 1 year" # RSS ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # データはキャッシュさせない ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" ExpiresByType application/x-javascript "access plus 1 year" ExpiresByType text/javascript "access plus 1 year" # マニフェスト ExpiresByType application/manifest+json "access plus 1 week" ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # 画像や動画 ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType image/webp "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Webフォント # Embedded OpenType (EOT) ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType font/eot "access plus 1 month" # OpenType ExpiresByType font/opentype "access plus 1 month" # TrueType ExpiresByType application/x-font-ttf "access plus 1 month" # Web Open Font Format (WOFF) 1.0 ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/woff "access plus 1 month" # Web Open Font Format (WOFF) 2.0 ExpiresByType application/font-woff2 "access plus 1 month" # Other ExpiresByType text/x-cross-domain-policy "access plus 1 week" </IfModule> <IfModule pagespeed_module> ModPagespeed on # 画像劣化が気になる場合は画像圧縮をOFFに ModPagespeedDisableFilters rewrite_images </IfModule> <ifModule mod_headers.c> Header unset ETag </ifModule> FileETag None # Enable Keep-Alive を設定 <IfModule mod_headers.c> Header set Connection keep-alive </IfModule> # ETags(Configure entity tags) を無視する設定 <ifModule mod_headers.c> Header unset ETag </ifModule> FileETag None # プロクシキャッシュの設定(画像とフォントをキャッシュ) <IfModule mod_headers.c> <FilesMatch "\.(ico|jpe?g|png|gif|svg|swf|pdf|ttf|woff|woff2|otf|eot)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> # プロキシサーバーが間違ったコンテンツを配布しないようにする Header append Vary Accept-Encoding env=!dont-vary </IfModule> # ブラウザキャッシュの設定 <IfModule mod_headers.c> <ifModule mod_expires.c> ExpiresActive On # キャッシュ初期化(1秒に設定) ExpiresDefault "access plus 1 seconds" # MIME Type ごとの設定 ExpiresByType text/css "access plus 1 weeks" ExpiresByType text/js "access plus 1 weeks" ExpiresByType text/javascript "access plus 1 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType application/pdf "access plus 1 weeks" ExpiresByType application/javascript "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" ExpiresByType application/x-shockwave-flash "access plus 1 weeks" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/x-font-woff2 "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" </IfModule> </IfModule> # キャッシュを有効にする <Files ~ ".(gif|jpe?g|png|ico)$"> Header set Cache-Control "max-age=2592000, public" </Files> # キャッシュする有効期限を指定する Header set Cache-Control "max-age=2592000, public" # 拡張子によって設定を変える <Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$"> Header set Cache-Control "max-age=2592000, public" </Files> <Files ~ ".(css|js|html|gz)$"> Header set Cache-Control "max-age=86400, public" </Files> SetEnvIf Request_URI ".*" WpLoginNoLimit

恐らく初期状態かと思われる設定に、以下のように書き換えました

# BEGIN VA SIMPLE BASIC AUTH <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP:Authorization} ^(.*) RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1] </IfModule> # END VA SIMPLE BASIC AUTH # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress SetEnvIf Request_URI ".*" WpLoginNoLimit

②追加したプラグインの停止もしくは削除

以上を行ってみましたが、崩れてしまった表示は元に戻りませんでした。

ワードプレス上の、カスタマイズの画面でスマホの大きさで見たときには表示は崩れていないのですが、自分のiphone6や、PageSpeed Insightsで、スマホ画面の中に表示されている状態では崩れてしまっています。

念のため、iphoneのキャッシュも全て初期化して再閲覧してみましたが変わりませんでした。

状態を確認する必要がある場合は、
http://ebi-seitai.com/
へアクセスしてご確認していただければ幸いです。

自分ではどうにも改善策が思いつかず、ずっと嘆いています。
どうかみなさんお助けください!
よろしくお願いします!!

補足情報(言語/FW/ツール等のバージョンなど)

サーバーはエックスドメインの無料サーバー
ワードプレスのバージョンはWordPress 4.7.4
PHPはPHP7.0.7

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2017/06/01 06:13 編集

あれ?いまAndroidスマートフォンで観てたんですが、別のページにいってトップに戻ってきたときにはご提示の内容のようなズレが直ってました。解決しましたか?
ebiPT

2017/06/01 06:22

あ!申し訳ありません、たしかに直っています!解決したんだと思いますが、何が原因だったのか...。とりあえず元通りになったので良かったです!ありがとうございます!
m.ts10806

2017/06/01 06:36 編集

良かったです。もしかしたら直る前と直った後の境目の決定的な瞬間に立ち会えたかもしれません(笑
ebiPT

2017/06/01 06:38

そのようです(笑)回復したのでプラグインを入れても表示崩れなく、やはり.htaccessが原因のようです。変更されるまで時間がかかるようなので、気長に編集するつもりで行こうかと思います。ありがとうございました!
guest

回答1

0

ベストアンサー

もしかしたら
WEB作成メモBLOG htaccessのキャッシュはなかなかクリアされない
かもしれませんね。

ただ、初期状態に近いところまで戻したのであれば現サイトに必要な記述も削除してしまった可能性もあります。
デザイン崩れはCSSとかJavaScriptとかが影響していることがほとんどです。
htaccessで様々な設定をされているようですので、そのどれかが影響しているかもしれません。
元に戻していく際は重々注意してください。

投稿2017/06/01 06:30

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ebiPT

2017/06/01 06:41

ありがとうございます! 一応元通りになることは確認できたので、復帰できたのかと思われます。 たしかに.htaccessは反映されるまでに時間がかかるようですね。1回目は編集してから2時間後、2回目は10分後に反映されたので、何がきっかけになっているかもわからず、ご提示いただいたサイトのようにブラウザを再起動しても反映されないので、まだなにか要素があるのかもしれません。
m.ts10806

2017/06/01 07:15 編集

基本は変更後、即反映されるようなのでサーバー側の再起動も関係なさそうですしね。 ひとまず解決済みにします?原因わかったら知りたいのは知りたいですが。。
ebiPT

2017/06/01 07:21

原因は.htaccessのどれかだと思いますが、特定には時間がかかると思うので解決済みにしたいと思います。 ありがとうございます!
m.ts10806

2017/06/01 07:22

了解です。この手の問題は複合的な要因になることが多いのでややこしいですよね。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問