【さくらレンタルサーバ】WordPress Simplicity2 のテーマで運用しているブログをSSL化したらWebフォント(アイコン)が表示されなくなった

WordPressのブログをSSL化にした記事を書いた(さくらレンタルサーバ)。↓

kiyoshi.hatenablog.com

その中で、ブログ上のWebフォントが正常に表示されなかったので、対応方法をまとめておく。

SSL化後、Webフォントが表示されない

Webフォントとは、外部のサーバ上の画像?アイコンを読み込んで表示させるアイコンのようなもの。

  • 正常時
    • f:id:kiyoshi_net:20210115140306p:plain
  • SSL化後、表示されない
    • f:id:kiyoshi_net:20210115140335p:plain

原因

ほんらい、http://xxx で記載されていた箇所をすべてSSL対応のhttps://xxx に変更しないといけいが、変更が漏れていることが原因だった。

ワードプレスのテーマ内のファイルの変更が必要。

対処方法

2箇所の.htaccessを編集した。

  1. (ブログ配置している場所)/blog/wp-content/themes/simplicity2/webfonts/fonts/.htaccess

  2. (ブログ配置している場所)/blog/wp-content/themes/simplicity2/webfonts/icomoon/fonts/.htaccess

f:id:kiyoshi_net:20210115141107p:plain

変更前: Header set Acces-Control-Allow-Origin "http://ドメイン名"

変更後: Header set Acces-Control-Allow-Origin "https://ドメイン名"

すると、正常にWebフォント(アイコン)が表示されるようになった。

以上