SNS Count Cacheのインストール


はじめにWordPressプラグイン「sns count cache」をインストールします。

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

「sns count cache」を検索してインストールします。

 

snspuraginsuutia (1)


SNS Count Cacheは、SNSでシェアされた数を表示するためにインストールします。

シェアされた数を表示したくない場合はインストール不要です。


snspuraginsuutia (2)



賢威7ソーシャボタンを表示



賢威6では、デフォルトでもソーシャルボタンが表示されていましたが、
賢威7は、デフォルトの状態ではソーシャルボタンが表示されておりません。

ソーシャルボタンを表示させる為には、

ワードプレス管理画面にある「賢威の設定→SNSの設定」をクリック

keni7so-sharubotan (2)


投稿ページにソーシャルボタンを表示させたいので、
投稿ページの表示しないの枠にあるチェックマークを外します。

keni7so-sharubotan (3)


すると、投稿ページにソーシャルボタンが表示される様になりました。

このソーシャルボタンでも良いのですが、
ボタンの大きさが小さく目立たない為、今回はデザインを変えます。

keni7so-sharubotan (1)


ワードプレス管理画面から「外観→テーマの編集→social-button2.php」

keni7so-sharubotan (5)


「social-button2.php」に既にあるコードを全部削除します。

keni7so-sharubotan (6)


この様に空っぽにします。

keni7so-sharubotan (7)


そして、次のコードを挿入します。

【Twitterのアカウント名】と書かれている箇所は、
あなたのTwitterアカウント名を入れてください。

Twitterアカウント名とは@◯◯◯の◯◯◯の部分です。


keni7so-sharubotan (8)


記事を確認するとソーシャルリンクが文字で表示されました。
文字に画像を入れる設定は以下の設定をします。

keni7so-sharubotan (9)


ワードプレスの管理画面から「外観→テーマ編集→base.css」を開きます。

keni7so-sharubotan (10)

「base.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;
}
}




keni7so-sharubotan (11)

すると、ソーシャルボタンがカスタマイズされました。
標準のソーシャルボタンより大きく拡散されやすいデザインです。

keni7so-sharubotan (12)



ソーシャルボタンは記事上と記事下に表示されます。

どちらか片方表示で良い場合は、下記の記事を参照して設定して下さい。

参照:賢威7で投稿記事上、記事下のソーシャルボタンを削除する方法


参照:賢威7カスタマイズまとめ一覧