キャリコ

WordPress や STINGER5 のカテゴリを中心に徒然なるままに綴る個人ブログ「 Calico 」です。

アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法

      2014/10/11

SNS でのフォロワーさんが増えてきて喜んでるキャリコ( @calicocatxyz )です。

ブログ開設1ヵ月でまさかこんなにもフォローされるなんて思ってもいませんでした。だからこそ喜びもひとしおなんですが、今日はその入口となる SNS ボタンについてです。それじゃあラテ、よろしくね♪

こんにちは、ラテにゃ。

最近のエントリーで紹介してるアイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンを設置する方法にゃ。

Ads by Google

アイコンを準備する

今回キャリコで採用したのが IcoMoon というサイトにゃ。

IcoMoon

https://icomoon.io/

右上にある赤いボタン『 IcoMoon App 』をクリックするとアイコン一覧のページに飛べるにゃ。

使いたいアイコンを選ぶ


キャリコではこの5つを採用したにゃ。使いたいアイコンを選んだら『 Font 』ボタンをクリックするにゃ。

次のページで『 Download 』ボタンを押すとアイコンをダウンロードすることが出来るにゃ。

サーバーにアップロードする

zip ファイルを解凍したら『 fonts 』というフォルダをサーバーにアップロードするにゃ。

CSS を記述する

同梱されてる『 style 』というフォルダを開いて CSS を自分のテーマ( style.css )ファイルにコピペするにゃ。

ちなみに中身はこのような記述になってるにゃ。

ハイライトで色を変えた3~7行目は『 fonts 』というフォルダをアップロードした場所に書き換えるにゃ。

※第2ディレクトリにアップロードした場合。

これで IcoMoon のアイコン型ウェブフォントを使う準備が出来たにゃ。

アイコン型ウェブフォントを表示させる

アイコンの使い方は簡単にゃ。表示させたい場所に次の記述をすればオッケーにゃ。

※見やすいように大きさを変えてあるにゃ。

CSS で装飾する

リンクとホバー色を変える

a タグにクラス名を付けて装飾するにゃ。

キャリコでは Twitter のアイコンに sns_twitter というクラス名を付けてテキストの色は #333 、アンダーラインを非表示にして大きさは xx-large 、マウスオーバーは Twitter のアイコンと同じ色の #55acee にしたにゃ。

html の表記

ブログでの表示

これを Facebook 、Google+ 、はてブ、Feedly でも同じことをするにゃ。

SNS ボタンとして設置する

リスト表示させる

アイコン型ウェブフォントはリスト表示で横に並べて、レスポンシブを活かすために等間隔になるよう指定したにゃ。

ポイントは display : table で ul 要素をテーブル扱いにして、横幅をサイドバーの幅100%に固定したところにゃ。li 要素に display : table-cell を指定することで均等幅で配置することが可能になるにゃ。

ブログでの表示

テキストをアイコンの下に表示させる

キャリコでは各 SNS のサービス名を小さな文字で表示させているにゃ。

CSS の記述

html の表記

※ Twitter の場合

ブログでの表示


  • Twitter

  • Facebook

  • Google+

  • はてブ

  • Feedly

まとめ

アイコン型ウェブフォントを利用して CSS で装飾した SNS ボタンは設置できたかにゃ?画像を使わないから拡大・縮小にも対応できて表示も軽くなるメリットがあるにゃ。IcoMoon には、はてブと Feedly のアイコンがないにゃ… これについてはまた次回!

今日はここまで、じゃあにゃ~

ライター紹介

ラテ Web 担当、SNS 広報、イメージキャラクター

スコティッシュフォールドの女の子。主に Web 系のネタを中心にお届けする IT にゃんこです。

 - ウェブデザイン , ,

この記事が気に入ったら
いいね!しよう

キャリコの最新情報をお届けします

Twitter でキャリコをフォローしよう!

【キ】 アドセンス用336px

【キ】 アドセンス用336px

  関連記事

見せます!キャリコの STINGER5 カスタマイズ履歴のすべて

こんにちは、キャリコ( @calicocatxyz )です。 敬遠してた Wor …

キャリコがブログカスタマイズするときに気をつけてる5つのこと

寒さを凌ぐために唐辛子を食べてるキャリコ( @calicocatxyz )です。 …

Photo credit : http://usb.brando.com/
アナタは大丈夫?デザインが崩れてるブログほどダサいものはないと思う

どうも、ネットサーフィンが大好きなキャリコ( @calicocatxyz )です …

アイコン型ウェブフォントで表示した SNS アイコンに CSS3 でアニメーションをつける

暖房の暖かさに幸せを感じてるキャリコ( @calicocatxyz )です。 部 …

パソコンの場合
ブログの右下にあるページ上部に戻るボタンは要らないんじゃないかって話

最近は押していない、キャリコ( @calicocatxyz )です。 記事を見終 …