• このエントリーをはてなブックマークに追加

賢威7ソーシャルボタンカスタマイズ

どうも。葉です。

あなたは、ソーシャルボタンのカスタマイズをしていますか?

僕は、『いつかカスタマイズしてやろう!』と思いつつもずっと放置してきました。笑
ただ、賢威が『賢威6.2→賢威7.0』にバージョンアップしたということで、
これをきっかけにソーシャルボタンのカスタマイズをすることにしました。

なお、この記事のとおりにカスタマイズを行うと、ソーシャルボタンは次のように変化します。

カスタマイズ前

賢威7ソーシャルボタンカスタマイズ1

カスタマイズ後

賢威7ソーシャルボタンカスタマイズ2

なぜソーシャルボタンをカスタマイズしたのか?

僕が今回賢威7のソーシャルボタンをカスタマイズする理由は2つあります。

表示までに時間がかかる

賢威7ソーシャルボタンカスタマイズ3


約5秒後

賢威7ソーシャルボタンカスタマイズ4

ひとつ目理由は、賢威7のデフォルトのソーシャルボタンだと表示するまでに時間がかかってしまうことです。気にしない人は気にしないんでしょうけど、僕はどうしてもこの表示の遅さが気になってしまったのです。

また、Googleの評価項目の一つに『表示速度の速さ』があるので、
表示速度を上げる事でSEO的にも効果があるかも!
と思いました。

単純にデザインが気に入らなかった

2つの目の理由は、ただ単純にデザインが気に入らなかったからです。笑

後は、ソーシャルボタンが小さくて目立たないですよね。
ブログを見てもらった時に、

『ソーシャルボタンがちゃんとあるんだよ!』

というのを知ってもらうためにももっと目立つボタンにしたかったんです。

賢威7のソーシャルボタンをカスタマイズ!

WebCraftLogさんで紹介している2パターン

ということで賢威7のソーシャルボタンのカスタマイズ方法を探ってみると
WebCraftというサイトで作り方を紹介してくれていました。

WebCraftLogさんでは、次の2パターンのソーシャルボタンのカスタマイズ方法を紹介しています。

パターン1

ソーシャルボタンデザイン1

パターン2

ソーシャルボタンデザイン2

このデザインのカスタマイズボタンを設置したい場合は、WebcraftLogさんのサイトを参考にしてください。丁寧に解説してくれているのですぐにわかるはずです。

賢威7にカスタムSNSボタンを設置する方法 

さらにもう1パターン追加

これでも十分なのですが、僕的には

  • Twitter
  • Facebook
  • Google+
  • はてブ
  • Pocket
  • feedly

が表示されるソーシャルボタンが欲しかったんです。

なので、WebCraftLogさんで紹介してくれたコードをほんのちょっとだけいじって
次のようなソーシャルボタンを作りました。

PC

賢威7ソーシャルボタンカスタマイズ2

スマホ

賢威7ソーシャルボタンカスタマイズスマホ

コピペできる!ソーシャルボタンのカスタマイズ手順

葉(よう)葉(よう)

このソーシャルボタンをコピペで作成するよ。

賢威7ソーシャルボタンカスタマイズ2

では、ここからは、上図で紹介したソーシャルボタンを設置していきます。
全手順を丁寧に解説していくので初心者さんでも簡単に設置できますよ。

SNS Count Cacheのインストール

まずは、WordPressプラグインsns count cacheをインストールします。

WordPress管理画面の左メニューより『プラグイン→新規追加』をクリックします。

賢威7ソーシャルボタンカスタマイズ5

プラグインの検索窓に『SNS Count Cache』と入力しエンターボタンを押します。

賢威7ソーシャルボタンカスタマイズ6

SNS Count Cacheの『今すぐインストール』をクリックします。

賢威7ソーシャルボタンカスタマイズ7

『プラグインを有効化』をクリックします。

賢威7ソーシャルボタンカスタマイズ8

以上で、プラグインSNS Count Cacheのインストールは完了です。

注意!
SNS Count Cacheは、SNSでシェアされた数を表示するためにインストールします。
『シェアされた数は、表示しなくていいよ!』
という方はインストール不要です。

SNS Count Cache-シェアされた数

social-button2.phpを編集

注意!
ソーシャルボタンを元の戻したいという時のために『social-button2.php』のバックアップはとっておきましょう!

ここでは、賢威7のソーシャルボタン表示を管理する『social-button2.php』を編集していきます。

WordPress管理画面より『外観→テーマ編集』をクリックします。

賢威7ソーシャルボタンカスタマイズ9

『social-button2.php』をクリックします。

賢威7ソーシャルボタンカスタマイズ10

social-button2.phpに次のコードを貼り付け『ファイルを更新』をクリックします。

注意!
【Twitterのアカウント名】と書かれている場所には、あなたのTwitterアカウント名を入れてください。
Twitterアカウント名とは@●●●の●●●の部分です。

<div class="sns-wrap">
    <?php 
        if( function_exists( "enqueue_font_awesome") ):
             add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
             function enqueue_font_awesome() {
                 wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css' );
             }
         endif;
     $url_encode = urlencode( get_permalink() );
     $title_encode = urlencode( get_the_title() ); 
     $twitter_account = '【Twitterのアカウント名】';
     ?>
     <ul class="sns clearfix">
         <li class="twitter">
             <a href="http://twitter.com/intent/tweet?url=<?php echo $url_encode; ?>&text=<?php echo $title_encode . urlencode( ' | ' ); echo urlencode( get_bloginfo('name')); ?>&via=<?php echo $twitter_account; ?>&tw_p=tweetbutton&related="<?php echo $twitter_account; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-twitter"></i><span class="pc">ツイート</span></a>
         </li>
         <li class="facebook">
             <a href="http://www.facebook.com/sharer.php?src=bm&u=<?php echo $url_encode;?>&t=<?php echo $title_encode;?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-facebook"></i><span class="pc">シェア</span><span class="share-count"><?php if(function_exists('get_scc_facebook')) { echo scc_get_share_facebook();}?></span></a>
         </li>
         <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=600');return false;"><i class="fa fa-google-plus"></i><span class="pc">Google+</span><span class="share-count"><?php if(function_exists('get_scc_gplus')) { echo scc_get_share_gplus();}?></span></a>
         </li>
         <li class="hatebu">       
             <a href="http://b.hatena.ne.jp/add?mode=confirm&url=<?php echo $url_encode ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><span class="hatena-icon">B!</span><span class="pc">はてブ</span><span class="share-count"><?php if(function_exists('get_scc_hatebu')) { echo scc_get_share_hatebu();}?></span></a>
         </li>
         <li class="pocket">
             <a class="no-deco" target="_blank" href="http://getpocket.com/edit?url=<?php echo $url_encode; ?>&title=<?php echo $title_encode; ?>" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"><i class="fa fa-get-pocket"></i><span class="pc">Pocket</span><span class="share-count"><?php if(function_exists('scc_get_share_pocket')) echo scc_get_share_pocket(); ?></span></a>
         </li> 
         <li class="feedly">
             <a href="http://feedly.com/i/subscription/feed/<?php bloginfo('rss2_url'); ?>" rel="nofollow" target="_blank"><i class="fa fa-rss"></i>feedly  <?php if(function_exists('scc_get_follow_feedly')) echo (scc_get_follow_feedly()==0)?'':scc_get_follow_feedly(); ?></a>
         </li>
     </ul>
 </div>

賢威7ソーシャルボタンカスタマイズ11

記事をチェックすると次のようになっているはずです。

賢威7ソーシャルボタンカスタマイズ12

これで、『social-button2.php』の編集は完了です。

CSSを編集(デザインを編集)

次に、ソーシャルボタンのデザイン編集を行っていきます。

WordPress管理画面の左メニューより『外観→CSS編集』をクリックします。

賢威7ソーシャルボタンカスタマイズ13

次のコードを貼り付けて『スタイルシートを保存』をクリックします。

/* ----------------------------------------------------
 SNSボタン
-----------------------------------------------------*/
.sns-wrap {
	width: 100%;
	margin-top: 1em;
	margin-bottom: 1%;
}

.sns {
	margin: 0 auto;
	list-style: none;
}

.sns a {
	text-decoration: none;
	font-size: 15px;
}

.sns {
	text-align: center;
}

.sns li {
	float: left;
	width: 32.3%;
	margin: 0 .5% 2%;
}

.sns a {
	position: relative;
	display: block;
	padding: 10px 5px;
	color: #fff;
	border-radius: 5px;
	text-align: center;
}

.sns span,
.sns .fa {
	margin-right: .4em;
	color: #fff;
}

.sns li a:hover {
	-webkit-transform: translate3d(0px,5px,1px);
	-moz-transform: translate3d(0px,5px,1px);
	transform: translate3d(0px,5px,1px);
	box-shadow: none;
}

.sns .twitter a {
	background: #55acee;
	box-shadow: 0 5px 0 #0092ca;
}

.sns .facebook a {
	background: #315096;
	box-shadow: 0 5px 0 #2c4373;
}

.sns .googleplus a {
	background: #dd4b39;
	box-shadow: 0 5px 0 #ad3a2d;
}

.sns .hatebu a {
	background: #008fde;
	box-shadow: 0 5px 0 #016DA9;
}

.sns .pocket a {
	background: #f03e51;
	box-shadow: 0 5px 0 #c0392b;
}

.sns .feedly a {
	background: #87c040;
	box-shadow: 0 5px 0 #74a436;
}

@media only screen and ( max-width: 736px ) {
	.sns li {
		width: 32.3%;
		margin: 0 .5% 4%;
	}
	
	.sns a {
		font-size: 13px;
		padding: 6px 3px;
	}
}

賢威7ソーシャルボタンカスタマイズ14

記事を確認すると次のようにソーシャルボタンがカスタマイズされているはずです。

賢威7ソーシャルボタンカスタマイズ2

以上で、賢威7のソーシャルボタンカスタマイズは完了です。

まとめ

賢威7でソーシャルボタンをカスタマイズする方法をまとめました。

このソーシャルボタンのカスタマイズを取り入れることで
デザイン性のアップはもちろんのこと、
ブログの表示速度も上昇するのでSEO的にも効果が期待できます。

phpやCSSをいじるのはちょっと。。。
という方も多いと思いますがやってみると意外と楽しいです。
ぜひとも挑戦してみてください。

また、慣れてきたら、自分でCSSをいじってみてください。
意外と簡単にデザイン編集できちゃいますよ。

こんな感じに!

ソーシャルボタンデザイン3

では、最後まで読んでいただきありがとうございました!

 

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

最新情報をお届けします

賢威カスタマイズ