アイコン無料で使用できるwebサービス「Meteocons」では、晴れ・曇り・雨・雪などのお天気マーク(アイコン)を40種類以上も無料で提供しています。お天気アイコンは、webフォント以外にもEPS・PSDなどのフォーマットでもダウンロードすることができます。このページでは、無料webサービス「Meteocons」のお天気マーク(アイコン)をwebフォントとして使用する方法を紹介していきますね。アイコンフォントをダウンロードまずはMeteoconsにアクセスします。kit)の方をクリックします。(ページの上の方にあるDownloadは、PSD・EPS・SVGなどのフォーマットですので、ページ下の方をクリックして下さい。)ダウンロードしたファイルを解凍します。※よくわからない場合は、ダウンロードしたzip形式のファイルをダブルクリックしすると中に2つフォルダが入っていますので、「meteocons-font」のフォルダを切り取り、デスクトップなどに貼り付けて下さい。ダウンロードしたデータを開くと上記のようになってます。この中でFont-faceのフォルダのみを使います。アップロードするffftpなどを使用し、「Font-face」のフォルダをアップロードします。ここではワードプレスで天気のアイコンフォントを使用する場合と通常のホームページで使用する方法を紹介しますね。ワードプレスの場合まずは「Font-face」のフォルダをテーマフォルダ直下に置きます。header.phpテンプレート内の<head>~</head>内に下記のように記述し、style.cssファイルを呼び出します。子テーマで使用する場合は下記のように記述します。「Font-face」のフォルダを任意のディレクトリに配置します。(よくわからない場合は、HTMLファイルと同じ場所にアップして下さい)HTMLファイルの<head>~</head>内に下記を記述し、cssファイルを呼び出します。href="/Font-face/stylesheet.css">これで「Meteocons」のお天気マークアイコンフォントを使う準備は完了です!Meteoconsの使い方アイコンフォントを使う時は、コードが記載されているアイコンの一覧を見ながら指定していきます。Meteoconsのページに上記のようなアイコン一覧がありますので、そこを見て下さい。(上記の画像でも同じなので大丈夫です)例えば晴れのアイコンを使いたい場合は「B」が割り振られています。data-icon="B"></i>というように記述すれば、晴れマークのアイコンが表示されます。contentプロパティと:before疑似要素(:afterでも可能)を使って、アイコンフォントを挿入しているので、併せて下記のようにCSSを記述して下さい。data-icon="B"></i>上記の場合、i要素に対してアイコンフォントを挿入していますが、これはpでもspanに対してでも大丈夫です。アイコンフォントを表示したい要素に対して、cssで指定したclass名を設定しないとアイコンフォントは表示されないので気を付けて下さい。data-icon="B">晴れのアイコン</p>そうするとこんな感じでテキストの前に晴れのアイコンが表示されます。このままだと、天気アイコンが小さかったりするので、スタイルを適用していきます。アイコンのスタイルとりあえず晴れ、曇り、雨、雪、日暮れの天気アイコンを並べてみました。フォントサイズだけ変えています。html・cssは下記のようになっています。margin-right:10px;}お天気アイコンの色を変えるまずは各アイコンの色を変えてみます。margin-right:10px;}お天気のアイコンは画像ではなくwebフォントなので、通常のテキストの色を指定する時と同じように設定することができます。下記のようにボーダーを付けることなどもできます。margin-right:10px;}ロゴ風のお天気マークお天気マークはwebフォントなので、下記のようなロゴ風にすることもできます。style="clear:both;"></div>左から二つ目の曇りのロゴ風アイコンは、天気マークの部分だけtext-shadowプロパティで影を付けています。それと背景の角の丸みはborder-radiusで指定しています。まとめこんな感じでお天気のアイコンフォントでは、色々なデザインにすることができます。