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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「Ctrl+C」：コピー
「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: &quot;&quot;; 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: &quot;&quot;; 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: &quot;&quot;; 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: &quot;&quot;; 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: &quot;&quot;; 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について知りたい方の為に、Bloggerの始め方＆使い方マニュアルみたいなものを作成しました。

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

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

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

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

ピックアップ

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

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

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

Blogger用カラフルなSNSボタン

Blogger用モノトーンSNSボタン

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

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

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

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

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

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

投稿者ひもくみ

コメントを投稿

0 コメント

週間人気投稿

「ジョナサン・アンド・シャーロット」が解散した理由とは？

【鶴橋コリアンタウン】激安パックと韓国コスメのおすすめ

エジプト美人女性（顔・性格・恋愛・結婚など）の5つの特徴

BLの総受けとは？腐女子が好む受けキャラの性格3つの特徴

モロッコ人男性（顔・性格・恋愛や結婚など）の3つの特徴！

トルコ人男性達のイケメンパラダイス？！3つの特徴をご紹介

うさぎの『オズワルド』がかわいそう！と思えるの5つの歴史

東アジア

南アジア

ヨーロッパ

アフリカ

南アメリカ

Footer Menu Widget

Ad Code

ピックアップ

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

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

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

Blogger用カラフルなSNSボタン

Blogger用モノトーンSNSボタン

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

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

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

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

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

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

投稿者 ひもくみ

おすすめの投稿

コメントを投稿

0 コメント

週間人気投稿

「ジョナサン・アンド・シャーロット」が解散した理由とは？

【鶴橋コリアンタウン】激安パックと韓国コスメのおすすめ

エジプト美人女性（顔・性格・恋愛・結婚など）の5つの特徴

BLの総受けとは？腐女子が好む受けキャラの性格3つの特徴

モロッコ人男性（顔・性格・恋愛や結婚など）の3つの特徴！

トルコ人男性達のイケメンパラダイス？！3つの特徴をご紹介

うさぎの『オズワルド』がかわいそう！と思えるの5つの歴史

Ad Code

東アジア

南アジア

ヨーロッパ

アフリカ

南アメリカ

Footer Menu Widget

投稿者ひもくみ