CSS・CSS3 2014-05-25

CSS3だけで作れるソーシャル系アイコン [ダウンロードファイル]

css3-social

今回は、個人・商用利用出来るCSS3だけで制作出来るソーシャル系アイコンをご紹介したいと思います。
作れるアイコンの数は、24種類もあり、
Webフォントを利用しているのですが、サイズもとても軽量で使いどころがありそうなので、記事にしてみたいと思います。
ダウンロードファイルは下記リンク先よりお願いたいます。(利用は無料ですのでご安心下さい)

Free CSS3 Social Media Buttons

また、ダウンロードファイルには、ベクター画像やPSDも収録されていますのでとても有難いです。
それでは、利用方法を下記にまとめてみましたのでご参考頂ければと思います。

利用方法

まずは、ダウンロードしたフォルダの中に【CSS】というフォルダがありますのでその中身の【font】というフォルダと【ml-social-buttons.css】スタイルシートがあります。

css3-social2

【font】というフォルダは、WebフォントやWebフォントを読み込ませているCSSファイルが収録されています。
そしてもう一つの【ml-social-buttons.css】スタイルシートは、上記のWebフォントを表示させて装飾しているファイルとなります。
なので、どちらか一つが欠けると表示されませんのでご注意下さい。

今回は、別々のCSSファイルにWebフォントの読み込みと表示をしているのですが、別に一つのCSSファイルで行っても問題はありません。

それでは、まず<head>~</head>の間にCSSファイルを読み込ませます。

	<link rel="stylesheet" href="ml-social-buttons.css" type="text/css" charset="utf-8" />
	<link rel="stylesheet" href="font/font.css" type="text/css" charset="utf-8" />

読み込ませるフォイルからの階層にはご注意下さい。

次に表示させたい場所に、下記タグを追加します。
今回は意外と使いそうな【Facebook】【Twitter】【Google+】を表示させたいと思います。

<a href="#" class="facebook" title="Facebook"></a>
<a href="#" class="twitter" title="Twitter"></a>
<a href="#" class="google" title="Google+"></a>

そうしますと下記のように表示されると思います。(リンク先などは、ご自身のに変更して下さい)

css3-social3

また、画像だと大きさを変えるときも一苦労ですしiPhone等のRetinaディスプレイにもWebフォントなどを利用して装飾をしていますので、画像の用にぼやける心配もありません。
装飾が気に食わなかったり、大きさを変更したいときはCSSファイルを変更するだけでいいのでとても助かると思います。

また、とても簡単に導入出来ますので画像はちょっと・・・と思っている方は、是非この機会に導入してみてはいかかでしょうか?
ダウンロードは下記リンク先よりお願いたします。

Free CSS3 Social Media Buttons

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS textures

【商用無料】 くしゃくしゃ感や汚れた質感の紙テクスチャ素材パック

NEXT img-upload

ワードプレス 投稿画面にて記事内に画像を挿入・アップロード方法