WEB

丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】

2015年2月12日
コメント数:(0)
Junk

このJunkBlogはワードプレスで運用していて、自作テンプレートを使用しています。レスポンシブデザインを採用しているのですが、スマホで表示した時のSNSシェアボタンを何とかしたいなぁと常々考えていました。

何故かと言うと、PCでは表示領域が広いのでボタンが一列に並んで綺麗に見えるのですが、ブラウザのサイズを小さくしてスマホサイズになると、表示領域が足りずにボタンが改行されて2列になり、あまり綺麗なレイアウトとはいえない状態でした。

そこで当ブログで採用しているシェアボタン(Facebook/twitter/はてぶ/pocket/google+)をWebフォントを使ってカスタマイズする事で、スマートフォンでのみ収まりの良い丸ボタン風SNSシェアボタンを作ってみたいと思います。

オリジナルWebフォントの作り方をこのエントリーで解説しています。

Webフォントを使ったSNSアイコンの作り方【はてぶ/Pocket/Feedly/LINE】
簡単にWebフォントとしてダウンロードできるよう、zipファイルを用意しておきますので、よければお使いください。

また日本でよく使われる「はてなブックマーク」などのアイコンですが、海外ではメジャーでないためWebフォントを配布している多くのサイトで、日本独自のアイコンは配布されていないのが実情です。

上記のエントリーで作成したアイコン(feedly/hatebu/LINE/pocket/google+/googledrive/facebook/twitter/feed/youtube)が含まれているWebフォントを「ダウンロード」ボタンからダウンロードいただけるので良ければお使いください:)

ダウンロード

作成手順

CSSで丸(円)を作ってみよう
ブロック要素の丸(div)をリンク領域に
Webフォントを使う準備
Webフォントを使ってSNSアイコンを表示
アイコンに色をつけてリストで表示
四角や角丸のボタンを作る
ワードプレスで記事リンクをシェアする

この方法で実装するとborder-raidersの値を変更するだけで、丸/四角/角丸といったSNSのボタンが簡単に実現できます。

CSSで丸(円)を作ってみよう

スマホのみ(320px)、丸いSNSボタンを表示させようと思いますので、テンプレートはレスポンシブですが、ブラウザの表示領域で大きさが変化しないサイズが固定されたボタンを作成したいと思います。

CCS3で導入されたborder-radiusプロパティを使えば簡単に丸を作ることができます。

これはボックスの4辺の角を丸くする事ができるプロパティです。ここが本題ではないので、かなりざっくりいきますが、高さheightと横幅widthに同じ値を指定しborder-radiusの値を50%に指定すると、ボックスが円になります。

/* CSS */
.sns_circle{
	width:50px;
	height:50px;
	border-radius: 50%;
	background-color:#CCC; /* 好きな色を指定 */
}

<!-- HTML -->
<div class="sns_circle"></div>

CSSを使った丸(円)が完成

横幅と高さが50pxの丸ができました。

ブロック要素の丸(div)をリンク領域に

border-radiusを使って”div(ブロック要素)”を円にしましたが、今回作りたいのはSNSのボタン。作成したブロック要素を”押す”と”シェア”だったり”いいね”というアクションを起こしたいのですが、ブロック要素なのでクリックしようが、タップしようがアクションを起こさせる事ができません。

そこでブロック要素全体に“aタグ”を使ったリンク領域が覆いかぶさるような指定をCSSでしてあげる必要があります。

/* CSS */
.sns_circle{
	position:relative;
	width: 50px;
	height: 50px;
	margin:0 5px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #999;
}

.sns_circle a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-indent:-999px;
	color:#FFF;/* 文字の色 */
}

<!-- HTML -->
<div class="sns_circle">
	<a href="#"></a>
</div>

リンクを適用させたいブロック要素にposition:relative;で相対位置を指定し、リンクにposition:absolute;top:0;left:0;で絶対位置を指定します。

BOXいっぱいにリンク領域を広げるためwidth:100%;height:100%;を指定しています。aタグにborder-radius: 50%;を指定しないと、リンクの範囲だけ四角い(丸くなっていない)まま表示されてしまうので、忘れずにaタグにも追加します。

aタグ内のテキストをtext-indent:-999px;を使ってエリア外へ移動させています。

※過度にtext-indentを使用してテキストを見えなくすると、隠しテキストとみなされ検索エンジンからペナルティを受けることがあるので、注意して下さい。

ブロック要素をリンク範囲にする方法を詳しく知りたい方はこちらの記事を御覧ください。

リンク(aタグ)をブロック要素(div)全体に効かせるCSS
全ての範囲にaタグ(リンク)を適用するCSSの書き方を記述します。

ブロック要素とリンク

先ほど作った円の部分がリンクになりました:)

マウスオーバー

スマホ用なので今回はあまり関係ありませんが、マウスカーソルが上に来た場合aタグを半透明にしてあげれば、ユーザビリティの向上に繋がります。

/* CSS */
.sns_circle a:hover{
	background-color:#FFF;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

Webフォントを使う準備

ダウンロードしたウェブフォントをサーバにアップロードして、HTMLのhead内にcssのパスを記述する手順です。

HTML(CMSを利用していない)でサイトを運用されている場合、ワードプレスでサイトを運用されている場合。両方の手順を記載します。

ワードプレスの場合

・アップロード先
wordpress/wp-content/themes/テーマフォルダ/【ここにアップロード】

・パスの指定

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

CMSを利用せずHTML運用の場合

ルートディレクトり直下にファイルをアップしましょう。

・アップロード先
root/【ここにアップロード】

・パスの指定

<link rel="stylesheet" href="icomoon/style.css">

Webフォントを使ってSNSアイコンを表示

ここまでくれば後は作った丸の中にウェブフォントでSNSアイコンを表示してあげれば完成です！

もし僕と同じウェブフォントを使用されるのであれば、下記をコピペでアイコンを表示できます。

<!-- ウェブフォント -->
<span class="icon-facebook"></span>
<span class="icon-twitter"></span>
<span class="icon-hatebu"></span>
<span class="icon-pocket"></span>
<span class="icon-google-plus"></span>
<span class="icon-feedly"></span>
<span class="icon-line"></span>
<span class="icon-google-drive"></span>
<span class="icon-feed"></span>
<span class="icon-youtube"></span>

/* CSS */
.sns_circle span{
	position:absolute;
	padding:10px;
	font-size:30px;
	color:#FFF;/* 文字の色 */
}

<!-- HTML -->
<div class="sns_circle">
	<span class="icon-twitter"></span><a href="#"></a>
</div>

丸いSNSアイコン

これでオリジナルのウェブフォントを使ったSNSアイコンが完成しました！

アイコンに色をつけてリストで表示

各SNSアイコンに配色しつつ、リストタグを使用して320px内にアイコンを等間隔に配置したのがこちらのソース。

このソースをコピペすれば同じアイコンが使えると思います。

<!-- html <head>に記載 -->

<!-- ワードプレスの場合 -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/icomoon/style.css">

<!-- CMSを使っていない場合 -->
<link rel="stylesheet" href="icomoon/style.css">

/* CSS */

/* 回り込み解除のためのクラス */
.clearfix{
	zoom:1;
}
.clearfix:after{
	content:"";
	display: block;
	clear: both;
	height: 0;
	visibility:hidden;
}

/* サークルのスタイル */
.sns_circle{
	position:relative;
	width: 50px;
	height: 50px;
	margin:0 5px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #999;
	float:left;
	list-style: none;
}

/* Webフォントに関する指定 */
.sns_circle span{
	position:absolute;
	padding:10px;
	font-size:30px;
	color:#FFF;/* 文字の色 */
}

/* リンク領域をブロック全体に */
.sns_circle a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-indent:-999px;
	color:#FFF;/* 文字の色 */
}

/* マウスオーバー */
.sns_circle a:hover{
	background-color:#FFF;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}

/* 横幅を300pxに固定して真ん中に表示 */
ul.circle_group{
	width:300px;
	margin:auto;
	list-style: none;
	padding:0;
}

/* アイコン毎の配色と配置 */
.sns_circle.feedly{
	background-color: #6CC655;
}

.sns_circle.facebook{
	background-color: #265a96;
}

.sns_circle.twitter{
	background-color: #00acec;
}

.sns_circle.hatebu{
	background-color: #006fbb;
}

.sns_circle.pocket{
	background-color: #EE4256;
}

.sns_circle.googleplus{
	background-color: #dd4b39;
}

.sns_circle.line{
	background-color: #2cbf13;
}

.sns_circle.feed{
	background-color: #ff9900;
}

.sns_circle.youtube{
	background-color: #e22d26;
}

<!-- HTML -->
<ul class="circle_group clearfix">
	<li class="sns_circle feedly"><span class="icon-feedly"></span><a href="#"></a></li>
	<li class="sns_circle facebook"><span class="icon-facebook"></span><a href="#"></a></li>
	<li class="sns_circle twitter"><span class="icon-twitter"></span><a href="#"></a></li>
	<li class="sns_circle hatebu"><span class="icon-hatebu"></span><a href="#"></a></li>
	<li class="sns_circle pocket"><span class="icon-pocket"></span><a href="#"></a></li>
	<li class="sns_circle googleplus"><span class="icon-google-plus"></span><a href="#"></a></li>
	<li class="sns_circle line"><span class="icon-line"></span><a href="#"></a></li>
	<li class="sns_circle"><span class="icon-google-drive"></span><a href="#"></a></li>
	<li class="sns_circle feed"><span class="icon-feed"></span><a href="#"></a></li>
	<li class="sns_circle youtube"><span class="icon-youtube"></span><a href="#"></a></li>
</ul>

完成したアイコン

横幅300pxで固定し中央揃え

四角や角丸のボタンを作る

丸いボタンだけでなく、四角や角丸も「.sns_circle」と「.sns_circle a」のborder-radiusの値を変えてやれば簡単に実装できます。

/* サークルのスタイル */
.sns_circle{
	position:relative;
	width: 50px;
	height: 50px;
	margin:0 5px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	background-color: #999;
	float:left;
	list-style: none;
}
 
/* リンク領域をブロック全体に */
.sns_circle a{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	text-indent:-999px;
	color:#FFF;/* 文字の色 */
}

四角

border-radiusの値に0%を指定すると四角いSNSボタンが簡単にできます。

角丸

border-radiusの値に15%を指定すると角丸のSNSボタンが簡単にできます。

ワードプレスにSNSボタンを実装する

このブログで実装したSNSシェアボタンですが、ソースは下記のようになっています。ワードプレスでブログ運用されている場合は、下記をコピペすると同じように丸いシェアボタンが使えるようになると思います。

<!-- HTML -->
<ul class="circle_group clearfix">
	<li class="sns_circle facebook"><span class="icon-facebook"></span><a href=""></a></li>
	<li class="sns_circle hatebu"><span class="icon-hatebu"></span><a href="http://b.hatena.ne.jp/entry/<?php the_permalink() ?>" data-hatena-bookmark-title="<?php the_title(); ?>" data-hatena-bookmark-layout="simple"></a></li>
	<li class="sns_circle twitter"><span class="icon-twitter"></span><a href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>"></a></li>
	<li class="sns_circle pocket"><span class="icon-pocket"></span><a href="http://getpocket.com/edit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" onclick="window.open(this.href, 'FBwindow', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;"></a></li>
	<li class="sns_circle googleplus"><span class="icon-google-plus"></span><a href="https://plus.google.com/share?url=<?php echo get_permalink() ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"></a></li>
	<li class="sns_circle line"><span class="icon-line"></span><a href="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>"></a></li>
</ul>

この記事をシェアする

About us

JunkBoy

サイト内検索

良く見られる記事

ひと目で分かる！ゲームソフト発売日【新作/レビュー・評価/おすすめ/一覧】

丸いSNSボタンをCSSとWebフォントで作る方法【いいね/ツイート/Pocket/LINE/はてぶ/feedly】

作成手順

CSSで丸(円)を作ってみよう

CSSを使った丸(円)が完成

ブロック要素の丸(div)をリンク領域に

ブロック要素とリンク

マウスオーバー

Webフォントを使う準備

ワードプレスの場合

CMSを利用せずHTML運用の場合

Webフォントを使ってSNSアイコンを表示

丸いSNSアイコン

アイコンに色をつけてリストで表示

完成したアイコン

横幅300pxで固定し中央揃え

四角や角丸のボタンを作る

四角

角丸

ワードプレスにSNSボタンを実装する

この記事をシェアする

関連記事はコチラ

コメント

コメントを残す コメントをキャンセル

About us

サイト内検索

良く見られる記事

ひと目で分かる！ゲームソフト発売日【新作/レビュー・評価/おすすめ/一覧】

アトピーの湿疹、かゆみが完治！原因を改善する22の治療法と食事

新着記事

チャットレディ紹介会社を様々な条件で検索できるバイトク

[書評/レビュー]セルフトーク・マネジメントのすすめ | 鈴木 義幸

[書評/レビュー]ザ・ラストマン 日立グループのV字回復を導いた「やり･･･

膝の痛みと筋肉痛が軽減した！マラソン、ランニングにおすすめのタイツ[ワ･･･

これから始める初心者の人へ！SEOを意識したブログの書き方

カテゴリー

この記事と関連性の高い記事

チャットレディ紹介会社を様々な条件で検索できるバイトク

【アメブロ/無料ブログ】アフィリエイトでお金を稼げるのか？

超軽量！CSSだけで実装する横スクロールできるスライダーとパンくずリスト

[PHP]どうしてfilter_input関数を使うのか

[PHP]bindValueとbindParamの違い

[PHP]htmlspecialcharsでサニタイズ。入力時/出力時/その中間どのタイミング？

コメントを残すコメントをキャンセル

[書評/レビュー]セルフトーク・マネジメントのすすめ | 鈴木義幸

[書評/レビュー]ザ・ラストマン日立グループのV字回復を導いた「やり･･･