なんだか柄にもなくタイトルに♡マークを付けてしまいましたが。
先日、このブログが一時的に落ちてしまいました。
すぐに復旧するだろと思ってたのですが、このブログ以外のMaterialサイトは開くことが出来るので、サーバーの障害ではなさそう…。
私がよく利用しているブラウザは「Firefox」ですが、左下の「〜に繋げております」等のメッセージ部分を見ると、同じ所で止まっていることが分かりました。
どうやら利用している「We Love Icon Fonts」さんのサイトで繋がらなくなっている模様。
案の定、そちらのサーバーが落ちていたようです（その間、他のサイトは表示されたので…）
一時的に繋がらない場合は、その箇所が非表示になったりと以前学習していたのですが、何故か今回、自分の所も一緒に繋がりが悪くなってました（もしかしたらブラウザのキャッシュにも問題があったかも知れませんが、その間、スマホでもうちのサイトは表示されなかったんですよね；）。
というわけで、これを機に、そのサイトで配布されているCSSをダウンロードして、うちでアップした方がいいだろうという流れになりました。
CSSをダウンロードしてみる。
ところで、Icon Fontって何ぞや？と言う方にご説明。
カレンダーマークやタグ、ファイル、ツイッターなどイラストのアイコン。
ちょっと小さいですが、うちも探すと所々に置いてあります。
これもそう→
可愛くてお洒落。これが無料で利用可能なんですね。
でも皆さんが一斉に使い出すと、この大元のサイトのサーバーに少なからず影響が出ます。
なので、自らのサイトにアップした方が負担もかけなくて済むだろうということで、CSSに切り替えてみます。
We Love Icon Fonts様
http://weloveiconfonts.com/
こちらのトップページにある、「Brandico」の下にある緑の文字「fontello」をクリックして下さい。
Fontello-icon fonts generator様
http://fontello.com/
欲しいアイコンをクリック。すると、右上に「Download webfont（０）」の数字が変わります。
（この時点で、何を利用したいのか、整理して確認した方が良さそうです…）
クリックするとダウンロード出来ます。
いろいろ梱包されてますけど、普通に利用するなら、
必要なフォルダーとファイルは
fontフォルダー１式
cssフォルダーから、[fontello.css]のみ。
それを自サーバーにアップロードします。
[fontello.css]を、htmlやphpファイルの<head>内に記述します。
WordPressなら、
<link href="<?php echo get_template_directory_uri(); ?>/css/fontello.css" rel="stylesheet" type="text/css" >
と記述して下さい。
下準備はここまで。
Icon Fontの実装
またこのページに戻るのですが、「Customize Names」というページで確認すると
（トップページの「Select Icons」タブの隣）
このように、アイコン名が記述されております。
これを、サイトの入れたい場所に記述します。
<span class="icon-○○○"><span>
<span>でも<li>でもOK。
これで終了です。
まとめ
今回、CSSで表示させる内容が中心となりましたが、個人のみの利用であるならば、さほど問題ないにしても、素材としての再配布やそれらを使った商用利用については禁止しているところもあります。
各ライセンスに従って下さい。
各場所にデザイナーの方のお名前や、[license:SIL]という風に記述されておりますので、確認してみて下さい。
※「フォント ライセンス SIL」などで検索すると出て来ます。
この仕様にしたら、ちょっとだけサイトの表示が早くなりました。
