今回は、日本でよく利用されているWEBサービスのアイコンフォントファイルと、使い方をまとめてみました。
でき上がりはこんな感じのアイコンフォントになります。
目次
WEBサービスのアイコンフォントについて
ウェブアイコンフォントと言えば現時点ではFont Awesomeが最も使われています。
Font Awesomeには、多数のウェブアイコンフォントがあり使い勝手もとても良いです。WEBサービスのロゴアイコンも多数揃っています。
ただ、Font Awesomeは海外で制作されていることもあり、海外でよく利用されているWEBサービスロゴしかありません。
例えば、Twitter、Facebook、Google＋、YouTube、Tumblrなどはあるのですが、feedly、はてブ、ポケット、LINEなど日本のブログ界隈でよく利用されているWEBサービスのロゴはありません。
こういうのは、自前でウェブアイコンフォントを作るしかありません。
僕も以前feedlyのアイコンフォントがなかったので以下のように作成しました。
で先日、ドウラクを運営されているさわさわさんが、feedly、はてブ、ポケット、LINEのSVGファイルを利用自由で配布されているのを見つけました。
需要があるか分かりませんが、今回トレースしたFeedly、LINE、はてなブックマークのSVGファイルを公開しておきますので、ご自由にダウンロードして使ってください。おまけでPocketも同梱しておきました。
今回は、このSVGファイルを利用させてもらって、日本のブログ界隈でよく利用されている、WEBサービスのロゴのウェブフォントを作成し、その使い方も紹介したいと思います。
IcoMoonでアイコンフォントの作成方法
で、早速アイコンフォントを作成してみました。
feedly、はてブ、ポケット、LINEの素材はドウラクで公開されているものを使わせてもらって、その他のものはIcoMoonに元からあるものを使用して、IcoMoonのジェネレータでウェブアイコンフォント作成しました。
作成した方法を、簡単に説明します。（IcoMoonの詳しい使い方は、前項目で紹介したリンクを参照してください）
とりあえず、IcoMoonでロゴのSVGファイルを読み込んで選択。
その他のWEBサービスロゴも、日本でよく使用されてそうなものは一応選択。
ジェネレートフォントをクリックします。
SVGファイルからインポートしたアイコンフォントには名前がないので自前で名前を入力します。
また、アイコンをクリックすることで、図柄の回転、上下左右反転、拡大・縮小、図柄の移動をなども行います。
全ての設定が済んだら、「Download」ボタンを押してアイコンフォントファイルをダウンロードします。
たったこれだけの作業です。IcoMoon素晴らしいです。
日本でよく使われるウェブサービスアイコンフォント
上記の方法で作成したものが以下になります。
[wpdm_file id=5 title=”true” desc=”true” ]
ダウンロードボタンを押すと、「icomoon.zip」ファイルがダウンロードされます。
使用方法
これらのウェブアイコンフォントをWordpressで使用する方法を紹介します。
日本のブログなどで、よく利用されているのはTwitter、Facebook、Google＋、はてなブックマーク、ポケット、LINE、feedlyが多いので、今回はそれらのロゴリストを作成してみたいと思います。
準備
まずは、ダウンロードした「icomoon.zip」ファイルを解凍して出来たフォルダを、FTPソフトなどを用いてテーマフォルダ直下に置きます。
そして、header.phpテンプレート内の<head></head>内に以下のように書いてstyle.cssファイルを呼び出します。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">
子テーマで利用する場合
子テーマで利用する場合は、以下のように書きます。
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/icomoon/style.css">
HTMLを記入
例えば、リストを横並びにしてアイコンフォントを並べるには以下のように書きます。
<ul class="web-logo-font">
<li class="twitter-btn-icon">
<a href="#" class="twitter-btn-icon-link"><span class="icon-twitter"></span></a>
</li>
<li class="facebook-btn-icon">
<a href="#" class="facebook-btn-icon-link"><span class="icon-facebook"></span></a>
</li>
<li class="google-plus-btn-icon">
<a href="#" class="google-plus-btn-icon-link"><span class="icon-googleplus"></span></a>
</li>
<li class="hatena-btn-icon">
<a href="#" class="hatena-btn-icon-link"><span class="icon-hatena"></span></a>
</li>
<li class="pocket-btn-icon">
<a href="#" class="pocket-btn-icon-link"><span class="icon-pocket"></a>
</li>
<li class="line-btn-icon">
<a href="#" class="line-btn-icon-link"><span class="icon-line"></a>
</li>
<li class="feedly-btn-icon">
<a href="#" class="feedly-btn-icon-link"><span class="icon-feedly"></a>
</li>
</ul>
<div style="clear:both;"></div>
この状態のままだと、アイコンフォント通常の文字の大きさとリンク色で表示されます。
スタイルを記入
あとはスタイルを整えます。
ロゴを横並びに表示
とりあえず、ロゴの色とか関係なくアイコンフォントロゴを横並びに以下のように表示させてみたいと思います。
上記のようにするには、、style.cssなどに以下のようにスタイルを書きます。
ul.web-logo-font {
padding: 0;
font-family: sans-serif;
}
ul.web-logo-font li {
float: left;
list-style-type: none;
margin-right: 5px;
padding-right: 5px;
}
ul.web-logo-font li a{
font-size: 40px;
text-decoration: none;
color: #000;
}
ul.web-logo-font li a:hover{
opacity: 0.6;
}
アイコンフォントに色をつける
アイコンフォントそれぞれにウェブサービス特有の色をつけて以下のように表示させたいと思います。
上記のようなスタイルにするには、以下のように先程のスタイルに加えて、いくつか追記します。
ul.web-logo-font {
padding: 0;
font-family: sans-serif;
}
ul.web-logo-font li {
float: left;
list-style-type: none;
margin-right: 5px;
padding-right: 5px;
}
ul.web-logo-font li a{
font-size: 40px;
text-decoration: none;
}
ul.web-logo-font li a:hover{
opacity: 0.6;
}
/*フォント色を設定*/
ul.web-logo-font a.twitter-btn-icon-link{color:#55ACEE;}
ul.web-logo-font a.facebook-btn-icon-link{color:#3C5A99;}
ul.web-logo-font a.google-plus-btn-icon-link{color:#DD4B39;}
ul.web-logo-font a.hatena-btn-icon-link{color:#3C7DD1;}
ul.web-logo-font a.pocket-btn-icon-link{color:#EE4257;}
ul.web-logo-font a.line-btn-icon-link{color:#00C300;}
ul.web-logo-font a.feedly-btn-icon-link{color:#2BB24C}
スクエア型のロゴにする
通常の色付きロゴもよく見かけますが、角が丸くなっているスクエア型の以下のようなロゴもよく見かけます。
このようなスタイルにするには、以下のように書きます。
ul.web-logo-font {
padding: 0;
font-family: sans-serif;
}
ul.web-logo-font li {
float: left;
list-style-type: none;
margin-right: 5px;
padding-right: 5px;
}
ul.web-logo-font li a{
font-size: 40px;
text-decoration: none;
color: #000;
}
ul.web-logo-font li a:hover{
opacity: 0.6;
}
/*強調するためにあらためて記入しただけでまとめて書いてもOK*/
ul.web-logo-font li a{
color: white;
padding: 7px;
border-radius: 5px;
}
/*背景色を設定*/
ul.web-logo-font a.twitter-btn-icon-link{background-color:#55ACEE;}
ul.web-logo-font a.facebook-btn-icon-link{background-color:#3C5A99;}
ul.web-logo-font a.google-plus-btn-icon-link{background-color:#DD4B39;}
ul.web-logo-font a.hatena-btn-icon-link{background-color:#3C7DD1;}
ul.web-logo-font a.pocket-btn-icon-link{background-color:#EE4257;}
ul.web-logo-font a.line-btn-icon-link{background-color:#00C300;}
ul.web-logo-font a.feedly-btn-icon-link{background-color:#2BB24C}
まず、ウェブフォントの文字色を白色にします。加えてそれぞれpaddingをつけ、角をborder-radiusで丸みを持たせて、アンカーの背景色をそれぞれ設定することによって、スクエア型を実現します。
まとめ
こんな感じで、これまでブログなどではあまり見かけることができなかった、feedly、はてブ、ポケット、LINEのアイコンフォントを作成することができました。
これから、自作テーマを作成したり、テーマをカスタマイズしたいとき、「サービスロゴのアイコンフォントが欲しい」なんて時には、この方法を試してみてください。
何回もすみません。表示されない、と質問させていただいた者です。
こちらに書けばよかったことに後から気がつきました、重ねてすみません。
◎表示されるようになったのですが、twitterとfacebookだけ表示されています。
・このページにあるウェブサービスアイコンフォントをダウンロードして使用しました。
・親テーマ header.php の内に書き加えたコードが以下です。
<link rel="stylesheet" href="/icomoon/style.css”>
・htmlはこのページにあるものをそのまま、サンプルページと右メニューに書きました。
お手数おかけしますが、どうすれば良いのかご教示いただけたら助かります。よろしくお願いします。