Blogger専用シェアボタン!デザイン5パターンを無料配布

Blogger対応したSNSボタンのコピペって、なかなかありませんよね。そんな中で唯一コピペOKのSNSボタンを公開しているのがトーマスイッチさんでした。

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

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

まず、記事の共有なのですが、記事をダイレクトにシェアが出来ないこと。わざわざURLを貼り付けてシェアしなければならないという手間がありました。また、Feedlyは機能しません。

二つ目に、デザインが大きすぎること。モバイル版だと3列になってしまい、SNSボタンだけで結構な画面を占領してしまうことになります。

こういった問題を解決し、ダイレクトな記事のシェアにしたのと、思い切ってFeedlyボタンを削除しました。さらに、デザインパターンも5パターンとし、コピペで選べるように改善しました。みなさんは、コピペして使用するだけでOKです。

今から紹介するデザインコードに関しては、

Ctrl+FでBlogger「HTML編集」内をコード検索

「Ctrl+F」を押し、

]]></b:skin>

というコードを探して下さい。そして、その真上に以下で紹介するデザインのコードを貼り付けてください。

Blogger用カラフルなSNSボタン

Blogger用カラフルなSNSボタン(PC / Mobile版)

.sns{ margin:10px auto; text-align:center; width:90%;}
.sns ul { list-style:none !important; padding: initial !important;}
.sns li { float:left; width:17%; 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:17%;}

Blogger用モノトーンSNSボタン

Blogger用モノトーンSNSボタン(PC / Mobile版)

.sns{ margin:10px auto; text-align:center; width:90%;}
.sns ul { list-style:none !important; padding: initial !important;}
.sns li { float:left; width:17%; 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;}

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

Blogger用カラー隙間なしSNSボタン(PC / Mobile版)

.sns{ margin:10px auto; text-align:center; width:90%;}
.sns ul { list-style:none !important; padding: initial !important;}
.sns li { float:left; width:17%; 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ボタン

Blogger用白枠カラフルSNSボタン(PC / Mobile版)

.sns{ margin:10px auto; text-align:center; width:90%;}
.sns ul { list-style:none !important; padding: initial !important;}
.sns li { float:left; width:17%; 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;}

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

Blogger用黒枠モノトーンSNSボタン(PC / Mobile版)

.sns{ margin:10px auto; text-align:center; width:90%;}
.sns ul { list-style:none !important; padding: initial !important;}
.sns li { float:left; width:17%; 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;}

そして、最後に以下のコードを自分がSNSボタンを載せたい場所に貼り付ければ完了です!

<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アカウントを挿入して下さい。

コードをどこに貼ればよいか分からない人は、右クリックで「検証」を選びます。次に、一番右端にある矢印のアイコンをクリックし、SNSボタンを入れたい範囲にある近くのコードを探します。

サイトでコードを見つける方法(右クリックの「検証」)

枠とかが出て来るので、視覚的で分かり易いかと思います。

そこで、決めた範囲をクリック。これは、指定したい範囲を右クリックでも、コード枠が出て来ますよ!

そして、対応しているコードをHTML編集の中で、「Ctrl+F」を押して探します。そのコードの全てが閉じている閉じタグ(</if>←こんな感じです)の真下、あるいは不必要な機能であればコード自体置き換えて貼り付けましょう!

人気記事Blogger無料おしゃれテンプレートの劇的カスタマイズ方法

コメントを投稿

0 コメント