賢威7のSNSボタンをオシャレに

小さいSNSボタンをなんとかしたい!

と思われている方、多いのではないでしょうか?

 

そんなあなたに、この記事では、

賢威7のSNSボタンをオシャレに変更する方法を

初心者でもわかるようにお伝えします。

 

機械音痴の私がSNSボタンをオシャレに変更しようと思ったきっかけ

 

賢威7にもともと入っているSNSボタンは、

こんな感じです。

SNSボタン

 

ちょっと貧弱だと思いませんか?

 

最近、かわいいSNSボタンや

オシャレなSNSボタンを使っている人が

結構増えてきたので、

私も!と言いたいところだったのですが。。。

 

私は、機械物が大の苦手なので、

できるだけ中をいじるようなことは

したくないんですね。

 

それをすることで、もし失敗して

WordPressの画面が真っ白になってしまったとしたら。。。

 

それこそ、大変ですからね。

 

見た目よりとにかく記事の投稿を

優先していました!

 

そんな時、私と同じで機械音痴の友達が

SNSボタンを変えたよ~

というメールを送ってきたんですね。

 

おっ、友達ができたなら私も!

とちょっと負けず嫌いの性格が出てきて、、、(笑)

 

恐る恐るやってみることに。。。

 

確かにブログの見た目も大事かな?

と思い始めていたところだったので、

タイミングよく火が付いた感じです。

 

でも1度目は失敗したんですよ。笑

 

で、どうしたかというと、、、

何事もなかったように

元の状態に戻して寝ました!笑

 

ただ、自分で言うのも何ですが、

なんだか心が強くなっている!

 

いつもだったら、焦ってしまう私なのに、、、

「もとに戻せばいいだけ。」

と冷静な自分を外から見ている自分がいて。。。

 

経験って、すごいなと思いましたね。

 

WordPressを立ち上げてから

もうすぐ1年です。

 

何もわからず、何か起きるたびに

青ざめていた私も、

どうにかなるさ!

という余裕が備わってきました。

 

だから、あなたも怖がらずに

やってみてくださいね。

 

メモ帳にデフォルトをとっておけば

変更しておかしくなった時は

もとに戻せばいいだけですからね。

 

SNSボタンをオシャレに変える方法

 

デフォルトの状態では賢威7のSNSボタンが

非表示になっているので変更します。

ダッシュボードから

賢威の設定」→ 「SNSの設定」をクリック

SNSの設定

SNSボタンの表示のところで、

『投稿ページ』のチェックを外します。

SNSボタン

これによって各記事にSNSボタンが

表示されるようになります。

 

SNSボタンのカスタマイズ方法は簡単!

 

ダッシュボードから、

外観』→『テーマ編集』を選択します。

SNSボタン

右下の方にある『social-button2.php』を

クリックします。

SNSボタン

たくさんのコードが書かれています。

これを全部カットします。

 

ちょっと怖いですよね?

私も恐る恐るやりましたよ。

 

SNSボタン

               ↓ ↓ ↓

SNSボタン

元のデーターは、メモ帳に残しておいた方がいいですよ。

 

変更したあと何か不具合がある時に

元の状態に戻す事ができるように

バックアップは必ずとっておきましょうね。

 

コードをコピー&ペーストする

 

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

上記をコピーして先ほどカットしたところに

下記のように貼り付けます。

SNSボタン7

ブログを表示させて確認してみると、

縦並びに出てくるのですが、、、

失敗ではありません。

 

この状態でOKです。

SNSボタン

『Simple Custom CSS』に下記のコードを貼り付けます

 

『Simple Custom CSS』をインストールしていない方は

インストールと有効化を先にやってくださいね。

 

『Simple Custom CSS』のインストール方法が

わからない方は、

こちらの記事を参考にしてみてくださいね。

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

コピーしたら、

メニューから「外観」→「カスタムCSS」をクリックします。

『カスタムCSS』に先ほどのコピーを貼り付けます。

SNSボタン

コードをこんな感じで貼り付けます。

「カスタムCSSの更新」をクリックしたら終了です。

 

SNSボタンにシェアされた回数をのせる方法

 

どのくらいシェアされたのか

気になる方多いと思います。

SNSボタン

デフォルトの状態ですとオシャレではありますが、

数字が反映されないんですね。

 

数字が見えたほうが

モチベーションが上がると思いますので、

ぜひ、次の方法で設置してみてくださいね。

 

簡単ですので安心してください!

 

『SNS Count Cache』というプラグインを利用します。

 

ダッシュボードから

「プラグイン」→「新規追加」をクリックします。

 

検索窓に『SNS Count Cache』と入れます。

 

SNSボタン

今すぐインストール」をクリックして

有効化」します。

 

これでオシャレなSNSボタンの設定は終了です。

SNSボタン

こんな感じになっていますか?

 

オシャレなSNSボタンが現れないときの対処法

 

SNSボタンの設定ができない方は、

他のSNSボタン系のプラグインを

使っているのかもしれません。

 

私は、昨日失敗しているんですよね。

 

SNSボタンが出てこなかったんです。

 

縦並びまでは出てきたのですが、、、。

 

とりあえずメモ帳に貼っておいた

デフォルト状態に戻しました。

 

そして、よく考えてみると、

WP Social Bookmarking Light』を

使っていたんですよね。

 

なので、こちらの機能を停止させてから

もう一回気を取り直して

1つ1つやってみました。

 

まずは、ダッシュボードから

「プラグイン」→「インストール済みのプラグイン」

をクリックします。

 

WP Social Bookmarking Light』の「停止」を

クリックします。

 

この状態でブログを見てみると、

SNSボタンがない状態になります。

 

ここからまた最初に戻って

もう一度ていねいにやり直していけば

今度はSNSボタンの設置ができるはずですよ。

 

まとめ

 

私が運用しているトレンドサイトの

SNSボタンも変えてみたのですが、、、

 

すでに、「ボタン、可愛いですね。」

とシェアしてもらいました。

 

なんだか嬉しい!

 

作業が終わるまでのドキドキ感は

ハンパないのですが、、、

 

反応してもらえるのって

やっぱりうれしいですよね。

 

ブログの印象もSNSボタンを変えるだけで

かなり変わってくると思います。

 

記事を書く合間に

設置してみてくださいね。

 

今回は、

賢威7のSNSボタンをオシャレに変更する方法を

初心者でもわかるようにお伝えしました。

 

ぜひ、記事を参考にやってみてくださいね。

 

メルマガLP15