Web活用お役立ちコラム

.htaccessによりFont-Awesome(Webアイコンフォント)が表示されなかった件(by WordPress)

WordPress-.htaccess

WordPressサイトを納品、本番UPしたタイミングで、Webアイコンフォントの「Font-Awesome」がリンク切れの状態で表示されなくなり、調べた件について覚書です。

 

解決した原因から言うと、うっかりミスだったのですが、「wp-content」フォルダを守るために設定をした、.htaccessの書き方でした。

 

WordPressでホームページ作成をする場合には、セキュリティー対策として、.htaccessで有効範囲を制限するようにしています。

セキュリティのための、.htaccessは複数設置しますが、その中で、「wp-content」フォルダを守るために、「wp-content」内にアップできるファイルの種類を、画像やcss、jsに限定するように、.htaccessで設定することがあります。

※「wp-content」フォルダで悪さをされる例は、uploadsフォルダにメールスクリプトをアップロードされ、自分のサーバが踏み台にされ、大量のスパムメールを送りつける、という被害にあることもあるようです。

設定方法は、

「wp-content」内に、下記のソースを書いた.htaccessファイルを作成UPするだけですが・・・

Order deny,allow
Deny from all
<Files ~ “.(xml|css|jpe?g|png|gif|js)$”>
Allow from all
</Files>

 

Webアイコンのフォントファイルは、「.eot、.svg、.ttf、.woff」ですので、

上記のように、xml、css、jpeg、png、gif、jsに制限したため、Font-Awesome(Webアイコンフォント)がリンク切れの状態で表示されなかったのです。

UPできる画像を制限しているだけから、関係ないと思っていたのですが、下記にように拡張子を追加すると解決したので、呼び出しの時にも関係するようです。

Order deny,allow
Deny from all
<Files ~ “.(xml|css|jpe?g|png|gif|js|svg|eot|ttf|woff)$”>
Allow from all
</Files>

Webアイコンフォント使用時の.htaccessの書き方は、ご注意ください。

中小企業・小規模ビジネスのオーナーさま、 Webのお悩み、誰に相談していますか?

【無料相談】ホームページの悩みを相談したい方は他にいませんか?
今なら相談特典として「Web活用7つの質問集」をプレゼントしています。

今すぐ無料相談