WordPressを使ったWebサイトをロリポップで、復旧することになりました。
WordPressの引越しとテーマの反映が容易に終わったので、完成と思いました。
ところが、画像が表示されていないのです。
imagesフォルダのパスが相対パスで書かれていたので、今の環境に合わないのか？と思って修正してもダメでした。
ブラウザの検証機能を使って要素を調べたら、SVGファイルだけが表示されていないと分かりました。
ネットで調べて、この記事を見つけました。
ロリポップのようにサーバーにSVGの表示ができるように、設定が必要なサーバーがあるようです。
.htaccessに、MIMEタイプの設定をすると解決します。
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
ブログの中には、
AddType image/svg+xml .svg
AddType image/svg+xml .svgz
と二つにして書かれている記事もありますが、最初に記載したように、まとめて記載できます。
AddEncoding gzip .svgz
このコードは。gzip .svgzで圧縮されているファイルをエンコードできるようにしているそうです。
この設定をしても、表示されないのです。
さらに調べました。
HTMLの画像のタグは、imgとimageの二つがあります。
そして、SVGの画像を扱うときは、imgではなくimageを使うと良いそうです。
試しにソースの一部を変えて、試してみました。
でも、表示されないのです。
サーバーにアップロードされたHTMLファイルの内容を確認したところ、修正箇所が反映されていないのです。
どこかで、キャッシュが働いているようです。
ネットで調べたところ、この記事を見つけました。
私も、ロリポップのアクセレーターの設定が影響していると思ったのです。
でも、この記事を読みHTMLで修正できることが分かりました。
<meta http-equiv="Cache-Control" content="no-cache">
このコードを記載すると良いそうです。
今回重要なコードは、リンク先のページが消えてしまったときに備えて、ここでも掲載しました。
ここまでのことをしても解決しないため更に検索したら、このCSSのソースを見つけました。
img[src*='.svg']{
width: 100%;
height: auto;
}
解決した理由
色々やっても改善されずPHPファイルを見直している中で、念の為imagesのフォルダのパスを絶対パスで書いてみました。
その結果、全ての動画と画像が正常に表示できました。
お騒がせしました。
今回オリジナルの WordPressのテンプレートのCSSの中で、imagesのフォルダのパスを自動で読み取って設定していると思われる箇所がありました。
それが機能していないのは、ロリポップのエコノミープランのせいでPHPがCGI版だからなのかな？と思ってみたりしてます。
CSSは、PHPの扱いと関係ないですが、今回PHPがCGI版というのが気になっています。
とりあえず、本来 WordPressは使えないとされていロリポップのエコノミープランで、WordPressを使っています。