tweet

お問い合わせ

httpsにしたらioniconsが表示されなくなった問題

前回のエントリーでこのウェブサイトが常時SSL化したとお伝えしたのですが、それに伴ってちょっとつまづいた問題が起こりました。

そう、ioniconsが表示されなくなったのです。その問題は意外に簡単に解決したのですが、あまり情報がなかったので書きます。

ioniconsって何?

一言で言うと無料で使えるWebアイコンセットです。このサイトでもところどころ使っていて、SERVISEページに主に利用しています。このページのアイコンは全てioniconsです。

ioniconsの使い方について

いろんなサイトにioniconsの使い方については解説があるのですが、簡単に言うとこうです。

ioniconsの公式サイトに移動してファイルをダウンロードするかCDN(コンテンツ・デリバリー・ネットワーク)のパスをCSSとしてheaderに読み込みます。以下はCDNの場合です。

	<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

こんな感じ

先ほどの公式サイトに移り、使いたいアイコンを選択します。

簡単なのはこんな感じです。

	<span class="ion-social-apple"></span>

←アップルが表示されてるでしょ?

その他css内にも使えます。例えばこんな感じ

li a:before{
content:"\f227";/*アップルアイコン*/
font-family: ionicons;
}

このUnicodeの指定はチートシートページから確認できます。

前置きが長くなりました。

httpsにしたらioniconsが表示されなくなった(本題)

常時SSL化するためにはサイト内のページや画像などを全てhttpsにしなければならないのですが、それはCDNなどの外部ファイルなどもhttpsである必要があります。

で、先ほどのCDN、「http」なんですねー。さてどうしようか。

ファイルをダウンロードして自分のサーバーにあげた

それなら自分のサーバにあげればいいじゃないということで、早速やってみました。

	<link rel="stylesheet" href="https://ideaideal.jp/なんちゃら/ionicons-min.css">

これだと動きませんでした。なんでかは知りません。もういっそ別のアイコンフォントにしようかなと思った時。。

sつけてみたらどうだろう?

ふとこんな思いが浮かびまして、早速やってみました。

	<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

いけるやん。。

https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.cssありました。書いとけよって感じです。

で、早速上記のパスをCDNに変えて無事解決といった次第です。

最後までお読みくださいましてありがとうございました。

CONTACT

ホームページでの集客やWeb全般・スマートフォンアプリ制作などに関するご相談はお問い合わせフォームをご利用ください。

なお、ご相談いただいた後でも、弊社から営業などの売り込みを行うことは一切ありませんのでご安心ください。

ご相談・お問い合わせはこちら

お電話でのお問い合わせは、
0952-20-1501

平日10:00~18:00まで。セールス目的のお電話はご遠慮ください。