皆さんにお世話になります。
前提・実現したいこと
投稿させていただきます。
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
回答1件
あなたの回答
tips
プレビュー