晴れ・曇り・雨などの天気マークをアイコンフォントで表示

Meteocons

無料で使用できるwebサービス「Meteocons」では、晴れ・曇り・雨・雪などのお天気マーク(アイコン)を40種類以上も無料で提供しています。

またお天気アイコンは、webフォント以外にもEPS・PSDなどのフォーマットでもダウンロードすることができます。 このページでは、無料webサービス「Meteocons」のお天気マーク(アイコン)をwebフォントとして使用する方法を紹介していきますね。

アイコンフォントをダウンロード

アイコンフォントDownloadボタンの場所

まずはMeteoconsにアクセスします。 アクセスしたら、ページ下の方にあるDownload(TTF+OTF+@font-face kit)の方をクリックします。(ページの上の方にあるDownloadは、PSD・EPS・SVGなどのフォーマットですので、ページ下の方をクリックして下さい。)

ダウンロードしたファイルを解凍します。

※よくわからない場合は、ダウンロードしたzip形式のファイルをダブルクリックしすると中に2つフォルダが入っていますので、「meteocons-font」のフォルダを切り取り、デスクトップなどに貼り付けて下さい。

Font-faceの場所

ダウンロードしたデータを開くと上記のようになってます。 この中でFont-faceのフォルダのみを使います。

アップロードする

ffftpなどを使用し、「Font-face」のフォルダをアップロードします。 ここではワードプレスで天気のアイコンフォントを使用する場合と通常のホームページで使用する方法を紹介しますね。

ワードプレスの場合

まずは「Font-face」のフォルダをテーマフォルダ直下に置きます。 そして、header.phpテンプレート内の<head>~</head>内に下記のように記述し、style.cssファイルを呼び出します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/Font-face/stylesheet.css">

子テーマで使用する場合

子テーマで使用する場合は下記のように記述します。

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/Font-face/stylesheet.css">

ホームページで使用する場合

「Font-face」のフォルダを任意のディレクトリに配置します。 (よくわからない場合は、HTMLファイルと同じ場所にアップして下さい)

HTMLファイルの<head>~</head>内に下記を記述し、cssファイルを呼び出します。

<link rel="stylesheet" href="/Font-face/stylesheet.css">

これで「Meteocons」のお天気マークアイコンフォントを使う準備は完了です!

Meteoconsの使い方

Meteoconsのお天気アイコン一覧

アイコンフォントを使う時は、コードが記載されているアイコンの一覧を見ながら指定していきます。 Meteoconsのページに上記のようなアイコン一覧がありますので、そこを見て下さい。(上記の画像でも同じなので大丈夫です)

お天気アイコンごとに割り振られている文字

例えば晴れのアイコンを使いたい場合は「B」が割り振られています。(お天気アイコンの下にあるアルファベットです) なのでHTMLファイルに<i class="icon" data-icon="B"></i>というように記述すれば、晴れマークのアイコンが表示されます。

ただしcontentプロパティと:before疑似要素(:afterでも可能)を使って、アイコンフォントを挿入しているので、併せて下記のようにCSSを記述して下さい。

.icon:before{
  font-family:'MeteoconsRegular';
  content: attr(data-icon); 
}
<i class="icon" data-icon="B"></i>

上記の場合、i要素に対してアイコンフォントを挿入していますが、これはpでもspanに対してでも大丈夫です。 ただしアイコンフォントを表示したい要素に対して、cssで指定したclass名を設定しないとアイコンフォントは表示されないので気を付けて下さい。

ちなみにテキストの前にアイコンフォントを表示したい場合は下記のように記述します(cssは上記と同様)

<p class="icon" data-icon="B">晴れのアイコン</p>
テキストの前にお天気アイコンを付けた例

そうするとこんな感じでテキストの前に晴れのアイコンが表示されます。 ただこのままだと、天気アイコンが小さかったりするので、スタイルを適用していきます。

アイコンのスタイル

晴れ、曇り、雨、雪、日暮れの天気アイコンを並べた例

とりあえず晴れ、曇り、雨、雪、日暮れの天気アイコンを並べてみました。 フォントサイズだけ変えています。

html・cssは下記のようになっています。

<ul>
<li class="icon" data-icon="B"></li>
<li class="icon" data-icon="N"></li>
<li class="icon" data-icon="T"></li>
<li class="icon" data-icon="X"></li>
<li class="icon" data-icon="J"></li>
<li class="icon" data-icon="1"></li>
</ul>
<div style="clear:both;"></div>
.icon:before{
  font-family:'MeteoconsRegular';
  content: attr(data-icon);
  font-size:50px;
}
ul{list-style:none;}
li{
  float:left;
  margin-right:10px;
}

お天気アイコンの色を変える

まずは各アイコンの色を変えてみます。

色をつけたアイコンフォント
.icon:before{
  font-family:'MeteoconsRegular';
  content: attr(data-icon);
  font-size:50px;
  color: red;
}
ul{list-style:none;}
li{
  float:left;
  margin-right:10px;
}

お天気のアイコンは画像ではなくwebフォントなので、通常のテキストの色を指定する時と同じように設定することができます。 なので下記のようにボーダーを付けることなどもできます。

ボーダーを付けたアイコンフォント
.icon:before{
  font-family:'MeteoconsRegular';
  content: attr(data-icon);
  font-size:50px;
  color: red;
  border:solid 1px red;
}
ul{list-style:none;}
li{
  float:left;
  margin-right:10px;
}

ロゴ風のお天気マーク

お天気マークはwebフォントなので、下記のようなロゴ風にすることもできます。

ロゴ風のアイコンフォント
.icon{border-radius:5px;}
.icon:before{
  font-family:'MeteoconsRegular';
  content: attr(data-icon);
  font-size:50px;
  color:#fff;
}
.sample1{background:red;}
.sample2{
  background:#DFEFFF;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.sample3{background:#3399FF;}
.sample4{background:#3C5A99;}
.sample5{background:#ccc;}
.sample6{background:#000;}

ul{list-style:none;}
li{
  float:left;
  margin-right:10px;
}
<ul>
<li class="icon sample1" data-icon="B"></li>
<li class="icon sample2" data-icon="N"></li>
<li class="icon sample3" data-icon="T"></li>
<li class="icon sample4" data-icon="X"></li>
<li class="icon sample5" data-icon="J"></li>
<li class="icon sample6" data-icon="1"></li>
</ul>
<div style="clear:both;"></div>

左から二つ目の曇りのロゴ風アイコンは、天気マークの部分だけtext-shadowプロパティで影を付けています。 それと背景の角の丸みはborder-radiusで指定しています。

まとめ

こんな感じでお天気のアイコンフォントでは、色々なデザインにすることができます。 お天気マークの部分が画像のアイコンだとすごい面倒なんですが、アイコンフォントだとCSSをいじるだけで色々できちゃいます!

使用用途は人それぞれだと思いますが、色々デザインしてみて下さいね! webフォントで表示する方が圧倒的に画像より楽ですよ(^^♪