スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介

twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。

今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。

web-font-icon00.png

実物は別サーバーにアップしていますので、こちらでご確認ください。

今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。

で、まず最初にアイコン形式のフォントを読み込む設定をします。

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('websymbols-regular-webfont.eot');
    src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('websymbols-regular-webfont.woff') format('woff'),
         url('websymbols-regular-webfont.ttf') format('truetype'),
         url('websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

次からは実際にアイコンを表示していく設定になります。

最初

web-font-icon07.png

まずは普通に並べてみます。

<div id="social-icon">f g k r v</div>

HTMLはこのようにアルファベットを並べただけになります。

#social-icon {
	font-size:50px;
	font-family: 'WebSymbolsRegular';
}

CSSで最初に読み込んだアイコン形式のフォントを指定すると、そのアルファベットに該当するアイコンが表示されます。

リンクにしてみる

web-font-icon07.png

リンクにしないと意味がないのでリンクを指定してみます。すると当然青くなって下線が入ります。

<div id="social-icon">
  <a href="#">f</a>
  <a href="#">g</a>
  <a href="#">k</a>
  <a href="#">r</a>
  <a href="#">v</a>
</div>

先ほどと同じようにHTMLはこのようにアルファベットを並べただけになります。コードを見ただけだとアイコンだと分かりませんし、検索エンジン様に誤解を与えるかもしれません。解決方法は次で紹介します。

アイコンごとに色を付けてみる

web-font-icon07.png

アイコンごとに色を付けてみます。さらに、表示したいアイコンに該当するアルファベットをHTMLではなくCSSで記述します。

<div id="social-icon">
  <a href="#" class="facebook"></a>
  <a href="#" class="google-plus"></a>
  <a href="#" class="twitter"></a>
  <a href="#" class="feed"></a>
  <a href="#" class="hatena"></a>
</div>

HTMLはこのように空のリンクになります。この先色々変形させていきますが、HTMLは変えずにCSSを変えていきます。

そして、それぞれのアイコンに該当するアルファベットはCSSで指定します。セレクタが長くなっていますが、別にクラス名だけでも大丈夫です。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	padding: 0 5px;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}

個人的にほとんど使うことがない「:before擬似要素」を使っています。「.facebook:before {content: "f";}」だとfacebookというクラス名がついた要素の前にアルファベットの「f」が挿入されることになります。

テキストシャドウを使ってみる

web-font-icon07.png

テキストシャドウを使ってみます。これがあるとかなり見栄えが良くなります。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 5px;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}

オンマウスで色を変えてみる

web-font-icon07.png

最初は白くてマウスを乗せたときに色が変わるようにします。アルファベットと色を別々に指定することになるので、ちょっと長くなります。

#social-icon a {
	font-size:50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 5px;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}

transitionを使ってみる

web-font-icon07.png

先ほどとほぼ一緒ですがtransitionを使って滑らかに色が変わるようにします。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 5px;
	-moz-transition-duration: 0.3s;
	-webkit-transition: 0.3s;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}

transitionについては、ChromeやSafariのWebKit系とFirefoxがベンダープレフィックス付きで対応しています。また、WebKit系は一括指定できますが、Firefoxは一括指定できませんので、「-moz-transition-duration」で指定しています。

transitionについてはこの画像をご参考に。

css3-transition.png

RGBaカラーを使ってみる

web-font-icon07.png

元の色にRGBaカラーを使っています。サンプルのように背景に画像を使っているときなどに効果的です。RGBaカラーに対応していないブラウザのために、「color: #fff;」は残しています。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	color: rgba(0,0,0,0.1);
	text-decoration: none;
	padding: 0 5px;
	-moz-transition-duration: 0.3s;
	-webkit-transition: 0.3s;
}
#social-icon a.facebook:before {content: "f";}
#social-icon a.google-plus:before {content: "g";}
#social-icon a.twitter:before {content: "k";}
#social-icon a.feed:before {content: "r";}
#social-icon a.hatena:before {content: "v";}
#social-icon a.facebook:hover {color: #3b5998;}
#social-icon a.google-plus:hover {color: #c53727;}
#social-icon a.twitter:hover {color: #00a1e9;}
#social-icon a.feed:hover {color: #ff8c00;}
#social-icon a.hatena:hover {color: #0075c2;}

オンマウスで大きくしてみる

web-font-icon07.png

マウスを乗せたときにアイコンが大きくなります。単純ですがtransitionを使うと滑らかに大きくなり印象はぐっと良くなります。

#social-icon a {
	font-size: 42px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000, 2px 2px 2px #aaa;
	padding: 0 3px;
	-moz-transition-duration: 0.3s;
	-webkit-transition: 0.3s;
	vertical-align:text-top;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover {
	font-size: 60px;
}

オンマウスでくるっと回る

web-font-icon07.png

0.3秒かけてくるっと回ります。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 10px;
	-moz-transition-duration: 0.3s;
	-webkit-transition: 0.3s;
	display: block;
	float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
}

もっと回してみる

web-font-icon07.png

先ほどと一緒ですが、今度は2秒かけて20回転します

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 10px;
	-moz-transition-duration: 2s;
	-webkit-transition: 2s;
	display: block;
	float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
	-moz-transform: rotate(7200deg);
	-webkit-transform: rotate(7200deg);
}

めくってみる

web-font-icon07.png

最後はめくれるように回ります。

#social-icon a {
	font-size: 50px;
	font-family: 'WebSymbolsRegular';
	color: #fff;
	text-decoration: none;
	text-shadow: 0 0 1px #000,2px 2px 2px #aaa;
	padding: 0 10px;
	-moz-transition-duration: 1s;
	-webkit-transition: 1s;
	display: block;
	float: left;
}
#social-icon a.facebook:before {color: #3b5998; content: "f";}
#social-icon a.google-plus:before {color: #c53727; content: "g";}
#social-icon a.twitter:before {color: #00a1e9; content: "k";}
#social-icon a.feed:before {color: #ff8c00;content: "r";}
#social-icon a.hatena:before {color: #0075c2;content: "v";}
#social-icon a:hover{
	-moz-transform: rotateY(360deg);
	-webkit-transform: rotateY(360deg);
}

最後に

ということで、ソーシャルメディア関連のアイコンをWebフォントで指定する方法を色々紹介しました。

「画像でいいやん」と言われればそれまでですが、CSS3の様々なプロパティと組み合わせると画像にはない動きも可能ですので面白いかなと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
なんと!地味に凄いテクニックですね。
【2012/10/07 10:11】 | tommy #pQNNMhYI | [edit]
tommy さん

ありがとうございます。
Webフォント、CSS3どっちも面白いです。
【2012/10/08 04:38】 | 管理人 #E2ywrYdA | [edit]
すごい記事ですね。

font-size:250%;

とかやるのが、レスポンシブなのかな?
【2012/12/11 19:36】 | あ #- | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加
  • このエントリーをはてなブックマークに追加
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。