【無料】めちゃオモロくてためになる『ザ・ブロガー~ブログ収益化の教科書~』詳しくはこちらをクリック!

   

【STINGER5】記事下部分にオリジナルのSNSボタンを設置する方法

 

この記事を書いている人 - WRITER -

色んな人にブログ運営の事を教えている。得意なのはブログ集客・SNS活用法・SEOライティング。
※このおっさんの取扱注意点:ブログと漫画を描くのが好きで、書けない日が続くとストレスで爆発する。
詳しいプロフィールはこちら 

JUNICHI

どうも、JUNICHIです。

今回は、「SNSボタンのカスタマイズ」です。SNSボタンのカスタマイズは、STINGER5のカスタマイズといえばこの方、ちゅんこさんのカスタマイズをそのまま使わせていただきました。

念のために、僕がStinger5-Cheetahを作る時に使わせていただいた方法を備忘録として残します。

この記事を全部参考にさせていただきました⇒【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

 

コピペで簡単カスタマイズができた!

以下の手順で簡単に、以下のようなSNSボタンが設置できました。

SNSボタン

STEP1. スタイルシート(style.css)をいじる

↓手順1)まずは、以下のコードを全部コピーしてください。

/*——————————–
SNS
———————————*/
.share{
width:100%;
}
.share h4{
font-size:120%;
text-align:center;
}

.sns{
margin:0 auto;
text-align:center;

}
.sns ul {
list-style:none;

}
.sns li {
float:left;
width:48%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:80%;
position:relative;
display:block;
padding:5px;
color:#fff;
border-radius:3px;
text-align:center;
text-decoration: none;
text-shadow:1px 1px 0 rgba(255,255,255,0.3);
}
.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:#00acee;
box-shadow:0 5px 0 #0092ca;
}
.sns .twitter a:hover {
background:#0092ca;
}

/* Facebook */
.sns .facebook a {
background:#3b5998;
box-shadow:0 5px 0 #2c4373;
}
.sns .facebook a:hover {
background:#2c4373;
}

/* グーグル */
.sns .googleplus a {
background:#db4a39;
box-shadow:0 5px 0 #ad3a2d;
}
.sns .googleplus a:hover {
background:#ad3a2d;
}

/* はてぶ */
.sns .hatebu a {
background:#5d8ac1;
box-shadow:0 5px 0 #43638b;
}
.sns .hatebu a:hover {
background:#43638b;
}

/* LINE */
.sns .line a {
background:#25af00;
box-shadow:0 5px 0 #219900;
}
.sns .line a:hover {
background:#219900;
}

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

/* RSS */
.sns .rss a {
background:#ffb53c;
box-shadow:0 5px 0 #e09900;
}
.sns .rss a:hover {
background:#e09900;
}

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

 

↓手順2)コピーができたら、WordPressのダッシュボードから、「外観」>「テーマの編集」をクリック
STINGER5カスタマイズ1

 

↓手順3)では実際にstyle.cssのコードを置き換えます。
カスタマイズ手順12

 

↓手順4)「Ctrl」+「F」を押して「SNS」と入力して検索するなどして、以下の部分を探してください。
SNSボタンカスタマイズ1

↑すると、赤枠で囲ったこんなコードが出てきますね。

/*——————————–
SNS
———————————*/
.sns li {
margin: 5px 0;
}
.sns .snsb li {
float: left;
margin-right: 10px;
list-style-type: none;
}
.post .sns .snsb.clearfix {
padding-top: 20px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 0px;
}

↑手順5)これを全部消して、そのままさっき手順1)でコピーしたコードに置き換えて下さい。

 

次に別のコードをコピーして貼り付ける作業です。

↓手順6)次に以下のコードをコピーしてください。

/*————————————–
780px SNS
————————————–*/
.share{
padding-bottom:10px;
}
.sns ul {
margin:0 auto;
list-style:none;
}
.sns li {
width:23%;
margin:0 2% 3% 0;
}
.sns li a {
font-size:75%;
padding:10px 2px;
}
.sns li:nth-child(4n) {
margin-right:0;
}

このコードを、またstyle.cssというファイルに貼り付けます。

SNSボタンカスタマイズ2

↑ 手順7)/*– ここまで –*/ という部分があるので、その1行上に空白行を作ります。

 

↓ 手順8)手順6)でコピーしたコードを、この赤枠部分にボンと貼り付けます。
SNSボタンカスタマイズ3

これで「ファイルを更新」をクリックしてあげればOKです。

 

STEP2. sns.phpのコードを以下のコードに全て置き換える

まずは、以下のコードをコピーします。

 

↓次に、「外観」>「テーマの編集」から、右側のテンプレートの「sns.php」をクリックします。SNSボタンカスタマイズ4

 

↓このsns.phpというファイルの中身を全て消して、さっきコピーしたコードを貼り付けます。そして「ファイルを更新」をクリック!
SNSボタンカスタマイズ5

 

ココまで出来たら↑で貼り付けたコードの以下の部分にあなたの専用のコードを書いてあげます。

  1. ★ツイッターアカウント名(@なし)★ ⇒ Junichi_Santa(あなたのTwitterアカウント@なし)
  2. ★ドメイン名(例:junichi.com)★ ⇒ junichi-manga.com (あなたのサイトのドメイン)

それぞれ、2か所ずつ、合計4か所入力してください。(★~★の部分までを置き換えて、★自体も消して下さい)

 

STEP3. sns-top.phpのコードも以下のコードに全て置き換える

 

↑このコードがコピーできたら「外観」>「テーマの編集」をクリックして、右側のテンプレートから「sns-top.php」を選びます。
SNSボタンカスタマイズ6

そして、またファイルの中身を全てコピーしたコードに置き換えて、「ファイルを更新」とクリックすればOK!

またTwitterとfeedlyの部分(★~★)の部分も同様にあなたのアカウントに合わせてコードを書いてください。

 

念のために動画解説も置いておきます。

動画解説

 

 

『SNS Count Cache』というプラグインをインストール&有効化すればカウント数が表示される!

このオリジナルボタンですが、「SNS Count Cache」というプラグインをインストール&有効化するだけで、ボタン上にシェアされた数が表示されるようになります。こりゃ便利!

SNS Count Cacheのインストール&有効化方法

普通のプラグインと全く同じ流れでOKです。

↓ まずは、「プラグイン」>「新規追加」をクリック
プラグインの新規追加1

 

↓ 右上の検索窓に「SNS Count Cache」と入力して、ENTERを押す。
プラグインの新規追加2

 

↓ こんな感じでSNS Count Cacheというプラグインが出てくるので「今すぐインストール」をクリック
プラグインの新規追加3

 

↓インストールが終わったら「プラグインを有効化」をクリックして完了。
プラグインの新規追加4

 

お疲れ様でした。以上です。

 

まとめ

こんな素晴らしいオリジナルボタンを作ってくださったちゅんこさんに、本当に感謝ですね!

落ち着いて作業をすれば、絶対初心者でもできるので挑戦してみて下さい。

⇒STINGER5のカスタマイズ方法一覧へ

参考記事:「【WordPress】8種類の自作SNSボタンのコードをご紹介!カウントも表示するよ

この記事いいなと思ったら
いいね ! して下さい!

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

何やらここでは言えない
『超豪華特典』が付いています。

詳しくはE-bookの最後で。

e-book

運営者JUNICHIについて

プロフィール

株式会社ファンファーレ
代表取締役 松原 潤一

ブログマーケッターのJUNICHIです。
ブログを書いて、人に喜んでもらいながら集客までできてしまう「ブログマーケティング」を専門に扱う会社『株式会社ファンファーレ』の人です。

ほんまはふざけるのが大好き。社長になってもおもろいおっさん目指して頑張ります。

漫画を描くのも大好物。一度きりの人生、自分の「夢」を大切にしたいと思います。

⇒詳しいプロフィールはこちら

ブログ集客と収益化がオンラインで学べる!!
ブログマーケティングスクール

『集客』さえできれば、ほぼどんなビジネスも成功させることができます。

そしてブログは、現在のWEBメディアの中でも、最も強力な『集客メディア』として位置づけられています。

ブログマーケティングスクールでは、コンテンツマーケティング・SEOを意識したWEBマーケティングがオンラインで学べるスクールです。

BMSバナー

ブログマーケッターJUNICHI
×
OPEN CAGEコラボWordPressテーマ

STORK

あなたは今自分のサイトがスマートフォンからどれだけの人が見ているか知っていますか?

実は、2016年6月現在、6割~8割の人がスマホからブログを読んでいます。

なので、スマホから見た時に「分かりやすい」「使いやすい」「便利」というWordPressテーマが必要です。

『新しいスマホビュー時代を作ろう!』

がコンセプトの『STORK(ストーク)』を是非お試しください。