どうも、ケイジです。今回は賢威7のSNSボタン(ソーシャルボタン)のカスタマイズ方法について説明していきたいと思います。賢威7のデフォルトのSNSボタン(ソーシャルボタン)は小さいためシェアされにくい可能性もあり、表示速度も遅いことからSEO的にも悪影響をもたらす恐れがあるため本記事を参考にカスタマイズしてみましょう!

賢威7のSNSボタン(ソーシャルボタン)のカスタマイズは必要か?

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法メイン

賢威7デフォルトのSNSボタン(ソーシャルボタン)はまずすごく小さいため目立ちにくいです。目立ちにくいことで訪問者がSNSボタンを発見できず、もっとSNSボタン(ソーシャルボタン)が見やすかったら、もしかしたらシェアされた可能性も十分にあるので、ある程度の大きさで存在感を出すことはやはり必要だと思います。

 

大きさを変更すると次はデザインも気になってくると思います。デフォルトのSNSデザイン以外にもたくさんデザインはありますし、この際色々なデザインを見比べて気に入ったデザインに変更するとともに大きさもサイトにあったサイズでカスタマイズすることがおすすめだと思います。

 

今回紹介するこのカスタマイズ方法ではスマホでみた状態でも自然に表示されるためおすすめです!

 

 

賢威7デフォルトのSNSボタン(ソーシャルボタン)のデメリット

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法1

こちらが賢威7のデフォルトのSNSボタン(ソーシャルボタン)ですがとても小さいですね。これでは一応あるにはありますが、やはり目立ちにくいです。

 

さらにデフォルトの状態では表示されるまでに少し時間がかかってしまっています。読込速度が遅いというのはSEO的にもあまりいい状態とはいえません。

 

より多くシェアされることでSEO的にも効果がありますし、シェアされることで検索エンジン以外からのアクセスにも期待が持てるようになりますので是非カスタマイズしてみましょう!

 

 

ちなみにSNSボタンカスタマイズ後の完成図がこちらです。

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法8

では、このようなSNSボタンにカスタマイズする方法をこれから順番に説明していくのでやっていきましょう!

 

 

賢威7でSNSボタン(ソーシャルボタン)のデザインをおよびサイズを変更する方法

賢威7で投稿ページにSNSボタンが表示されるようにする

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法3

ダッシュボード→賢威の設定→SNSの設定の中にソーシャルボタンの表示とありますので、ここで投稿ページのチェックを外しましょう

 

 

social-button2.php内の元のソースをメモ帳などにコピーして空白にする

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法4

 

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法5

ダッシュボード→外観→テーマの編集→social-button2.php内のソースを丸ごとメモ帳などにコピーして空白にしましょう。コピーしておくのは何かあった時のためにデフォルトの状態に戻せるためのものでバックアップという意味なので分かるように保存しておきましょう。

 

 

social-button2.php内にソースを貼り付ける

<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 = 'yuukivp';
     ?>
     <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のSNSボタン(ソーシャルボタン)をカスタマイズする方法6

上記コードをコピーして貼り付けます。すると、各記事ページではこのようにツイートからフェイスブックまで文字で表示されるようになります。

 

プレビューしてみてこうなっていれば正解なので、次はこの文字をボタンに変更する作業に移っていきます。

 

 

Simple Custom CSSにコードを入力

/* ----------------------------------------------------
 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;
    }
}

 

Simple Custom CSSというプラグインの中に上記コードを入力します。まだこちらをインストールしていない方はこちらの記事を参考にインストールし有効化後に上記コードを貼り付けてください。

 

テーマ編集を直接変更しないで追記できるワードプレスプラグイン

 

 

SNSボタンの設置完了

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法7

 

以上の工程でSNSボタンが表示されるようになりました。この方法なら記事の上部と下部に上記画像のSNSボタンがある程度目立って表示されますので、賢威7のデフォルトの状態よりもシェアされやすくなるのではないかと思います。

 

 

シェア回数をカウントさせるプラグインを導入する

賢威7のSNSボタン(ソーシャルボタン)をカスタマイズする方法2

見栄えはいいですが、このままではシェア回数が反映されていません。

 

シェア回数を反映させるためにはSNS Count Cacheというプラグインが必要になってきます。このプラグインはインストールし有効化するだけでシェア回数が表示されますので、SNS Count Cacheをインストールし有効化しましょう。

 

これでシェア回数も表示されて、賢威7のデフォルトよりも目立ちやすいSNSボタンとなったため、力の入れたコンテンツや心がこもったコンテンツならばデフォルトの状態よりもシェアされるようになるかもしれません!

 

 

まとめ

賢威7のデフォルトではSNSボタンは小さくて目立ちにくいだけじゃなく、実は表示される速度も遅いものとなっています。

 

表示される速度が遅いとSEO的にも悪影響が起こってしまうんですね。本記事の方法ではSNSボタンをある程度目立たせることができてシェアされやすくなる期待と、表示速度を改善させることでSEO的な悪影響を防ぐことができますので一石二鳥だと思います!

 

今回のこの記事は

賢威7のソーシャルボタンをオシャレにカスタマイズする方法を書いている結城おさむさんの記事を参考にさせていただいています。