BloggerのSNS共有ボタン！おしゃれなシェアボタン5選

Bloggerのテンプレートを使っていると、

SNSの共有ボタンがダサすぎる…

と感じたことはありませんか？

この現象、Bloggerの専用テンプレートを購入しても起きるんですよね！

海外サイトでテンプレートを購入すれば、デザインは良かったりします。

ですが、日本では馴染みがないシェアボタンが多すぎるのです。

そんな中で、Blogger用のSNSボタンを公開しているのがトーマスイッチさんでした。

[コピペだけ]６種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する

私も、このSNSボタンに最初お世話になっていたのですが、いくつかの問題点とデザインに関しての不満がありました。

そこで、私なりにBlogger専用のSNS共有ボタンを作ってみることにしました。

分かり易くSNSシェアボタンの貼り付け方を説明して行くので、誰でもおしゃれな共有ボタンをBloggerに設置することが出来るはずです！

共有ボタンの編集画面はどこ？

Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。

すると、こんな画面になるかと思います。

この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。

すると、いくつかメニューが表示されます。

その中の「HTMLを編集」を選びましょう。

すると、画面にずらーっとプログラミングコードが表示されるかと思います。

そこで、「Ctrl+F」（検索）を押して以下のコードを

1. 「Ctrl+C」：コピー
2. 「Ctrl+V」：ペースト

して探してみて下さい。

]]></b:skin>

このコードよりも上に、今からSNS共有ボタンのデザイン（CSS）を追加して行きます。

もし、このコードよりも上にコードを貼って機能しない場合は、

</style>

こちらのコードよりも上にコードを貼ってみて下さい。

SNS共有ボタンのデザインコード

それでは、ここからデザインの画像例も併せて、SNSの共有ボタンのデザインコードをご紹介して行きますね！

Blogger用カラフルなSNSボタン

.sns{margin:10px auto; text-align:center; width:90%;}
.sns ul {list-style:none !important; padding: initial !important;}
.sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;}
.sns li span,.sns .fa{font-size:15px !important;}
.sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;}
.twitter a {background:#00acee; color:#fff;}
.twitter a:hover {color:#00acee; background:#fff;}
.facebook a {background:#3b5998; color:#fff;}
.facebook a:hover {background:#fff; color:#3b5998;}
.google1 a {background:#db4a39; color:#fff;}
.google1 a:hover {background:#fff; color:#db4a39;}
.hatebu a {background:#5d8ac1; color:#fff;}
.hatebu a:hover {background:#fff; color:#5d8ac1;}
.pocket a {background:#f03e51; color:#fff;}
.pocket a:hover {background:#fff; color:#f03e51;}
.clearfix:after {content: ""; display: block; clear: both;}
@media only screen and (max-width: 780px) {.sns li{width:20%;}

Blogger用モノトーンSNSボタン

.sns{margin:10px auto; text-align:center; width:90%;}
.sns ul {list-style:none !important; padding: initial !important;}
.sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;}
.sns li span,.sns .fa{font-size:15px !important;}
.sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;}
.twitter a {background:#000; color:#fff;}
.twitter a:hover {background:#fff; color:#000;}
.facebook a {background:#000; color:#fff;}
.facebook a:hover {background:#fff; color:#000;}
.google1 a {background:#000; color:#fff;}
.google1 a:hover {background:#fff; color:#000;}
.hatebu a {background:#000; color:#fff;}
.hatebu a:hover {background:#fff; color:#000;}
.pocket a {background:#000; color:#fff;}
.pocket a:hover {background:#fff; color:#000;}
.clearfix:after {content: ""; display: block; clear: both;}
@media only screen and (max-width: 780px) {.sns li{width:20%;}

Blogger用カラー隙間なしSNSボタン

.sns{margin:10px auto; text-align:center; width:90%;}
.sns ul {list-style:none !important; padding: initial !important;}
.sns li {float:left; width:20%; height:54px; margin:20px 0; list-style:none !important;}
.sns li span,.sns .fa{font-size:15px !important;}
.sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; text-align:center; text-decoration: none;}
.twitter a {background:#00acee; color:#fff;}
.twitter a:hover {color:#00acee; background:#fff;}
.facebook a {background:#3b5998; color:#fff;}
.facebook a:hover {background:#fff; color:#3b5998;}
.google1 a {background:#db4a39; color:#fff;}
.google1 a:hover {background:#fff; color:#db4a39;}
.hatebu a {background:#5d8ac1; color:#fff;}
.hatebu a:hover {background:#fff; color:#5d8ac1;}
.pocket a background:#f03e51; color:#fff;}
.pocket a:hover {background:#fff; color:#f03e51;}
.clearfix:after {content: ""; display: block; clear: both;}
@media only screen and (max-width: 780px) {.sns li{width:20%;}

Blogger用白枠カラフルSNSボタン

.sns{margin:10px auto; text-align:center; width:90%;}
.sns ul {list-style:none !important; padding: initial !important;}
.sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;}
.sns li span,.sns .fa{font-size:15px !important;}
.sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;}
.twitter a {background:#fff; color:#00acee; border:2px solid #00acee;}
.twitter a:hover {background:#00acee; color:#fff;}
.facebook a {background:#fff; color:#3b5998; border:2px solid #3b5998;}
.facebook a:hover {background:#3b5998; color:#fff;}
.google1 a {background:#fff; color:#db4a39; border:2px solid #db4a39}
.google1 a:hover {background:#db4a39; color:#fff;}
.hatebu a {background:#fff; color:#5d8ac1; border:2px solid #5d8ac1;}
.hatebu a:hover {background:#5d8ac1; color:#fff;}
.pocket a {background:#fff; color:#f03e51; border:2px solid #f03e51;}
.pocket a:hover {background:#f03e51; color:#fff;}
.clearfix:after {content: ""; display: block; clear: both;}
@media only screen and (max-width: 780px) {.sns li{width:20%;}

Blogger用黒枠モノトーンSNSボタン

.sns{margin:10px auto; text-align:center; width:90%;}
.sns ul {list-style:none !important; padding: initial !important;}
.sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;}
.sns li span,.sns .fa{font-size:15px !important;}
.sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;}
.twitter a {background:#fff; color:#000; border:2px solid #000;}
.twitter a:hover {background:#888; color:#fff;}
.facebook a {background:#fff; color:#000; border:2px solid #000;}
.facebook a:hover {background:#888; color:#fff;}
.google1 a {background:#fff; color:#000; border:2px solid #000;}
.google1 a:hover {background:#888; color:#fff;}
.hatebu a {background:#fff; color:#000; border:2px solid #000;}
.hatebu a:hover {background:#888; color:#fff;}
.pocket a {background:#fff; color:#000; border:2px solid #000;}
.pocket a:hover {background:#888; color:#fff;}
.clearfix:after {content: ""; display: block; clear: both;}
@media only screen and (max-width: 780px) {.sns li{width:20%;}

デザインの大きさを変更したい場合

もし共有ボタンのデザインの大きさを変更したい場合は、

.sns li {

このコードを探し、「width:20%」という部分を変更して調整してみて下さい。

表示させたい場所に貼り付けるコード

最後に、以下のコードを共有ボタンを貼り付けたい場所に設置して下さい。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
                  <div class='sns'>                  
 <ul class='clearfix'>
    <li class='twitter'><a expr:href='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title + &quot; – @（自分のTwitterアカウント）より&quot;' onclick='window.open(this.href, &apos;windowName&apos;, &apos;height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-twitter'/></a></li>
    <li class='facebook'><a expr:href='&quot;https://www.facebook.com/sharer.php?u=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=550, height=650, left=24, top=24, scrollbars, resizable&apos;);return false;' target='_blank'><i class='fa fa-facebook'/></a></li>
    <li class='google1'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=400, height=500, left=24, top=24, scrollbars, resizable&apos;);return false;' target='_blank'><i class='fa fa-google-plus'/></a></li>
    <li class='hatebu'><a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;height=300,width=600&apos;);return false;' target='_blank'><i class='fa'>B!</i></a></li>
    <li class='pocket'><a expr:href='&quot;http://getpocket.com/edit?url=&quot; + data:post.url + &quot;&amp;text=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-get-pocket'/></a></li>
  </ul>
</div>
 </b:if>

Twitterには、投稿をシェアして貰った時に、自分のところにも通知が来るように設定しておきました。

コードの中で「@（自分のTwitterアカウント）」を探し、そこに自分のTwitterアカウントを挿入して下さい。

共有ボタンの表示場所はどこが良い？

記事の内容の終わった後に、シェアボタンを貼り付けるのが一番良いでしょうね。

<!-- Post ShareButtons -->

「Ctrl+F」を押して、この文字をコピペして探してみて下さい。

そして、その中にある

<b:if cond='data:blog.pageType == &quot;item&quot;'>

というコードから、

</b:if>

という閉じタグまでを、新しい共有ボタンのコードに置き換えましょう。

これで、あなたに合ったソーシャルボタンを使う事が出来ますよ！

このように、Bloggerのデザインを根本的に変更したい方は、

Bloggerおしゃれテンプレートに変更させる5つのステップ

Bloggerのダサいテンプレートをおしゃれなテンプレートに変更する方法を分かり易く解説しています。もちろん、無料でまるでWordPressのようなクールなテンプレートに変更することが出来ますよ！

こちらの記事も併せてお読み下さい。

さらにBloggerについて知りたい方の為に、Bloggerの始め方＆使い方マニュアルみたいなものを作成しました。

この記事に従ってブログ運営をして行けば、集客はもちろん収益の大幅アップも間違いなしです！

Bloggerブログについてさらに詳しく知りたい方は、

Bloggerブログの始め方と使い方

ブログ初心者が、Blogger始める前に知っておくべき基本知識や使い方って何だろう？Bloggerブログの為のこの完全マニュアル記事を読めば、ブログのSEO検索や収益性が増すことはまず間違いないでしょう。初期投資も格安で始められるBloggerは、初心者向けのブログ運営として超お勧めですよ！

こちらの記事をお読み下さいませ。

人気記事Bloggerおしゃれテンプレートに変更させる5つのステップ