前回の記事「賢威7でフラットな独自デザインのSNSボタンを設置する方法」で、賢威7に「フラットでかっこいい、独自デザインのソーシャルボタン」を設置する方法をご紹介しましたが、今回は、さらにボタンを「スリム化」する方法をご紹介します。

SNSボタンをスリム化したかった理由

まず、これまでのSNSボタンを見てみましょう。

PC(デスクトップ)表示

モバイル(スマホ)表示

以下の画像は、iPhone5sでのキャプチャ画像です。

ご覧いただくと分かるかと思いますが、PC、スマホともに縦(高さ)の長さが結構とられます

特に記事の上の方に設置するSNSボタンの場合は、ここまで大きくなくてもいいんじゃないかと判断しました。

ただ、記事下にもSNSボタンを設置するには、この大きさがいいかもしれません。

目的と優先順位を考慮して設置した方がいいですよね。

今回は「記事タイトルの下に設置するSNSボタン」を想定しています。

完成イメージ

修正後の完成イメージを先に掲載します。

PC(デスクトップ)表示

冒頭の画像と同じです。

モバイル(スマホ)表示

影も削除し、縦の長さがだいぶスッキリしました。

それでは、このようにするための修正内容をご紹介します。

「sns_button.php」の修正

当サイトでは賢威の子テーマで運用しているため、子テーマディレクトリの「sns_button.php」を以下のように修正しました。

<?php
  $url_encode=urlencode(get_permalink());
  $title_encode=urlencode(get_the_title());
?>

<div class="share">

<?php if(is_mobile()) {  //以下スマホの場合 ?>
<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"><a href="http://twitter.com/share?text=<?php echo $title_encode ?>&amp;url=<?php echo $url_encode ?>&amp;via=★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★&amp;tw_p=tweetbutton&amp;related="★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★"><i class="fa fa-twitter"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>

<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&amp;u=<?php echo $url_encode;?>&amp;t=<?php echo $title_encode;?>"><i class="fa fa-facebook"></i><?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>

<!--Google+1ボタン-->
<li class="googleplus"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" ><i class="fa fa-google-plus"></i><?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>

<!--はてブボタン-->
<li class="hatebu"><a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo $url_encode ?>"><i class="icon-hatebu"></i><?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a></li>

<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&amp;title=<?php echo $title_encode;?>"><i class="fa fa-get-pocket"></i><?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F★★★ここにサイトのドメインのみ入れる。当サイトの場合はwebdesigner.fans-web.net★★★%2Ffeed%2F"  target="blank"><i class="icon-feedly"></i><?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>

<!--LINEボタン-->
<li class="line"><a href="http://line.me/R/msg/text/?<?php echo $title_encode . '%0A' . $url_encode;?>"><i class="icon-line"></i></a></li>
</ul>
</div> 

<?php } else { //以下PCの場合?> 

<div class="sns">
<ul class="clearfix">
<!--ツイートボタン-->
<li class="twitter"><a href="http://twitter.com/share?text=<?php echo $title_encode ?>&amp;url=<?php echo $url_encode ?>&amp;via=★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★&amp;tw_p=tweetbutton&amp;related="★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=600');return false;"><i class="fa fa-twitter"></i><?php if(function_exists('scc_get_share_twitter')) echo (scc_get_share_twitter()==0)?'':scc_get_share_twitter(); ?></a></li>

<!--Facebookボタン-->
<li class="facebook"><a href="http://www.facebook.com/sharer.php?src=bm&amp;u=<?php echo $url_encode;?>&amp;t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1000');return false;"><i class="fa fa-facebook"></i>&amp;nbsp;<?php if(function_exists('scc_get_share_facebook')) echo (scc_get_share_facebook()==0)?'':scc_get_share_facebook(); ?></a></li>
      
<!--Google+1ボタン-->
<li class="googleplus"><a href="https://plus.google.com/share?url=<?php echo $url_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=500');return false;"><i class="fa fa-google-plus"></i>&amp;nbsp;<?php if(function_exists('scc_get_share_gplus')) echo (scc_get_share_gplus()==0)?'':scc_get_share_gplus(); ?></a></li>

<!--はてブボタン-->
<li class="hatebu">
<a href="http://b.hatena.ne.jp/add?mode=confirm&amp;url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=510');return false;" ><i class="icon-hatebu"></i>&amp;nbsp;<?php if(function_exists('scc_get_share_hatebu')) echo (scc_get_share_hatebu()==0)?'':scc_get_share_hatebu(); ?></a>
</li>

<!--ポケットボタン-->
<li class="pocket"><a href="http://getpocket.com/edit?url=<?php echo $url_encode;?>&amp;title=<?php echo $title_encode;?>" target="blank"><i class="fa fa-get-pocket"></i>&amp;nbsp;<?php if(function_exists('scc_get_share_pocket')) echo (scc_get_share_pocket()==0)?'':scc_get_share_pocket(); ?></a></li>

<!--feedlyボタン-->
<li class="feedly"><a href="http://feedly.com/index.html#subscription%2Ffeed%2Fhttp%3A%2F%2F★★★ここにサイトのドメインのみ入れる。当サイトの場合はwebdesigner.fans-web.net★★★%2Ffeed%2F"  target="blank"><i class="icon-feedly"></i>&amp;nbsp;<?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a></li>
</ul>  
</div>
<?php } ?>
</div>

上記コード内にあるTwitterとfeedlyで、「★★★ここにTwitterアカウントを「@」無しで入れる。当サイトの場合はwebdesigner_fan★★★」というように、前後に「★」が3つある箇所は、ご自身のTwitterアカウントやドメインに合わせて修正してください。

変更点

  • PCはRSSとLINEのアイコンを削除
  • スマホはRSSアイコンを削除
  • スマホのLINEアイコンは並びを一番最後に移動
  • スマホのアイコンの右側のスペース(&nbsp;)を削除

PCでRSSとLINEのアイコンを削除した理由

スマホも共通ですがRSSアイコンを削除したのは、feedlyアイコンがあるのでそこまではいらないと判断しました。

LINEアイコンですが、LINEはPC版のアプリケーションもありますが、PCで「LINEに送る」を使うユーザーさんはあまりいないと判断し削除しました。

スマホのLINEアイコンの並びを一番最後に移動した理由

LINEアイコンは、TwitterやFacebook等のその他のボタンと若干機能というか意味合いが違う印象があるので、一番右側になるようにしました。

スマホのアイコンの右側のスペース(&nbsp;)を削除した理由

理由は2点あります。

  • スマホだと横幅が限られるため、シェア数の数字が増えた場合に幅が厳しいことから余白を削除
  • (PCだとあまり気になりませんが)スマホだとスペースの分だけアイコンが左にあるため、デザイン的に若干気になる

CSSファイルの修正

CSSファイルも当サイトの場合は子テーマにある「base.css」と「rwd.css」を修正しています。

子テーマにある「base.css」の修正内容

/*--------------------------------------------------------
SNSボタン
--------------------------------------------------------*/
.share{
	width:100%;
}
.sns{
	margin:0 auto;
	text-align:center;
}
.sns ul {
	list-style:none;
}
.sns li {
	float:left;
	width:48%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:10px;
	color:#fff;
	border-radius:2px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
}
.sns .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns .facebook a {
	background:#3b5998;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
}
.sns  .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
	background:#5d8ac1;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns .line a {
	background:#25af00;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns .pocket a {
	background:#f03e51;
}
.sns .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns .rss a {
	background:#ffb53c;
}
.sns .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns .feedly a {
	background:#87c040;
}
.sns .feedly a:hover {
	background:#74a436;
}

/*--------------------------------------
  780px SNS
--------------------------------------*/
.share{
	padding-bottom:10px;
}
.sns ul {
	margin:0 auto;
	list-style:none;
}
.sns li {
	width:14%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:75%;
	padding:0px;
}

子テーマにある「rwd.css」の修正内容

/*--------------------------------------------------------
解像度1200px以下
--------------------------------------------------------*/
@media
only screen and (max-width : 1200px){

/*--------------------------------
SNS
---------------------------------*/
.share{
	width:100%;
}
.sns{
	margin:0 auto;
	text-align:center;
}
.sns ul {
	list-style:none;
}
.sns li {
	float:left;
	width:23.5%;
	margin:0 2% 3% 0;
}
.sns li a {
	font-size:80%;
	position:relative;
	display:block;
	padding:0px;
	color:#fff;
	border-radius:2px;
	text-align:center;
	text-decoration: none;
	text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.sns li a:hover {
	box-shadow:none;
}

/* ツイッター */
.sns .twitter a {
	background:#00acee;
}
.sns .twitter a:hover {
	background:#0092ca;
}

/* Facebook */
.sns .facebook a {
	background:#3b5998;
}
.sns .facebook a:hover {
	background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
	background:#db4a39;
}
.sns .googleplus a:hover {
	background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
	background:#5d8ac1;
}
.sns .hatebu a:hover {
	background:#43638b;
}

/* LINE */
.sns .line a {
	background:#25af00;
}
.sns .line a:hover {
	background:#219900;
}

/* Pocket */
.sns .pocket a {
	background:#f03e51;
}
.sns .pocket a:hover {
	background:#c0392b;
}

/* RSS */
.sns .rss a {
	background:#ffb53c;
}
.sns .rss a:hover {
	background:#e09900;
}

/* Feedly */
.sns .feedly a {
	background:#87c040;
}
.sns .feedly a:hover {
	background:#74a436;
}

/*--------------------------------------
  780px SNS
--------------------------------------*/
.sns li:nth-child(4n) {
	margin-right:0;
}

}

変更点

  • 立体的に見えている影を削除し、厳密なフラットに変更
  • 「Twitter」などのSNSサービス名を削除
  • 高さを短くした
  • 角丸の大きさを小さくした

これで「スリム」な独自デザインのSNSボタンになります。