ブログ運営

【賢威7】ブログのSNSソーシャルボタンデザインをカスタマイズする方法

WordPressブログでSNS拡散の役割をするソーシャルボタン

デフォルトではボタンが小さいのでもっと大きくおしゃれにカスタマイズ出来れば、簡単にシェア率をあげるデザインはないか・・・と思うものの、デザインの変更はHTMLやCSSコードの編集で難しそう!と思いがちですよね。

賢威7では簡単にデザインをカスタマイズすることが可能ですので、今回はその方法を初心者でも分かりやすく解説していきます^^

 

賢威7でSNS表示設定を行う方法

まずはWordPressブログにSNS表示設定を行う必要があります。

ダッシュボードから「賢威の設定」→「SNSの設定」をクリックし、「投稿ページ」の「表示しない」のクリックを外しましょう。

賢威7・Wordpressブログの SNSソーシャルボタンのデザインをカスタマイズする方法を動画で解説!

動画内で出てくるHTMLコード&CSSコードは⬇︎⬇︎⬇︎に書いてあります^^

賢威7・Wordpressブログの SNSソーシャルボタンのデザインをカスタマイズする方法を文章&画像で解説!

WordPressブログで賢威7を使っている場合、ソーシャルボタンデザインカスタマイズはさほど難しい作業は必要ありません。

以下の流れに沿って進めば意外に簡単に終わりますので、早速内容を見ていきましょう!

ソーシャルボタンのデザインをカスタマイズ①テーマの編集からHTML書き換え

まずはダッシュボードから、「外観」→「テーマの編集」を選択し、右側の一覧から「social-button2.php」を選択します。

 

するとテキストがずらっと並んだHTMLコードが表れますので、こちらを編集していきます。

ちなみにHTMLやCSSなど、コードを編集するときは必ず編集前にバックアップをとりましょう!

元に戻したい時などに必ず必要となりますので、ご自身の保存しやすい形でメモやevernoteなどに保存する事をお勧めします。

 

バックアップを取り終えたら、こちらのコードを全て削除します。

 

ブランクになった画面に、以下のコードをコピペします。

11行目の【Twitterアカウント名】部分は、ご自身のツイッターアカウント名の@以降部分を入力してくださいね。

<?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>

貼り付けたら更新ボタンを押します。

 

すると、ブログのソーシャルボタンがこの様にテキストに変化しているはずです。

ここからさらにデザインを変えていきます。

ソーシャルボタンのデザインをカスタマイズ②Simple Custom CSSのカスタムCSSを追加

ダッシュボードに戻り、カスタムCSSにこちらのコードを貼り付けます。

参考記事:カスタムCSSの使い方!テーマ編集をしないで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;
    }
}

1行目〜92行目までいくかと思います。

 

貼り付け終わったら、「カスタムCSSの更新」をクリック。

 

すると、大きなボタンに変わります^^

 

このままでも勿論OKですが、ソーシャルボタンにシェアされた回数を表示させたい場合は、以下の作業が必要です。

ソーシャルボタンのデザインをカスタマイズ③シェア回数の表示はSNS Count Cashe追加

プラグインから「SNS Count Cashe」を追加し、インストール&有効化します。

参考記事:WordPressでプラグインをインストール&有効化する方法

 

すると回数が表示される様になります!

やはり回数は表示しなくていいや・・という場合はプラグインの停止&削除すればOKです。

参考記事:WordPressでプラグインを停止&削除する方法

ソーシャルボタンのカスタマイズは以上になります!

 

ちなみにデフォルトだと本文の上下どちらにもSNSボタンが設置されていますので、「どちらかだけでいいんだけど・・」という場合は、別コンテンツで削除方法も紹介していますので、そちらをご参考くださいね。

【賢威7】ブログのソーシャルボタンを記事上下どちらか片方削除する方法WordPressブログの記事本文上下についているSNS拡散の為のソーシャルボタン。 今回は賢威7でこちらの記事上下どちらか片方を削除...
〜PC1台で”生き方”を”働き方"へ〜
ABOUT ME
MAI
MAI
webマーケター・コンサルタント 某マンモス出版社勤務後、フリーのダンサー・ヨガインストラクターとして独立するも「好きな仕事」の現実に直面しゼロから起業。 ブログ収入は累計350万円突破。▶︎さらに詳しいプロフィール ▶︎ブログ起業入門講座