WEB

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

オリジナルのSNSシェアボタンをつくろう

この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フォントを「ダウンロード」ボタンからダウンロードいただけるので良ければお使いください:)

ダウンロード

PR

作成手順

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

この方法で実装すると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>

この記事をシェアする

前の記事
次の記事

コメント

コメントを残す

* が付いている欄は必須項目となりますので、必ずご記入をお願いします。
メールアドレスは公開されませんのでご安心ください。

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