記事上に最適なパネル型ソーシャルボタンを制作【Blogger】


 Bloggerテンプレート「Vaster2」で利用できるソーシャルボタンを作りました。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

ソーシャルボタンをカスタマイズ


 日本人向けBloggerテンプレート「Vaster2」では、すでにソーシャルボタンがついています。

 デザインには申し分ないのですが、記事上に設置するには少々大きすぎます。

 そこで今回は、記事上に最適なソーシャルボタンを作ってみました。

記事上向けのシンプルなパネル型


ソーシャルボタン(PC)


 Wordpressサイトでよく見かけるパネル型アイコンを再現しています。シンプルかつスタイリッシュなデザインなので、どういったブログデザインにも溶け込みます。

 かなり大きめですが、必要最低限の装飾しか施していないので、記事上に置いても鬱陶しさを感じません。


 大きいボタンが嫌な場合は、幅を狭めることでコンパクトになります。

スマホでも安心のレスポンシブデザイン


ソーシャルボタン(スマホ版)

 PCだとボタンが3つずつ並んでいますが、スマホからだと2つずつ並ぶようにしています。小さめに設定しているので、存在を主張しつつも邪魔になりません。

日本で需要の高いLINEボタンを実装


 SNSによる拡散を期待できないPocketの代わりに、LINEボタンを入れています。

 その他は、Vaster2と同じラインナップ(Twitter、Facebook、Google+、はてなブックマーク、Feedly)です。

ソースコードと導入手引き



/* 記事上シェアボタン */
#share {
    padding: 10px;
}

.share {
    overflow: hidden;
}

.share li {
    font-size: 14px;
    float: left;
    text-align: center;
    width: 33%;
    margin-top: -4px;
    list-style: none;
    cursor: pointer;
}

.share a {
    font-weight: 700;
    display: block;
    height: 50px;
    padding-top: 14px;
    text-decoration: none !important;
    color: #fff !important;
}

.share i {
    margin-right: 7px;
    font-size: 1.5em;
}

.share img {
    margin-bottom: -6px;
    padding: 3px;
    margin-top: -8px;
}

.share .btn-text {
    position: relative;
    top: -3px;
}

.share .share-twitter {
    background-color: #55acee;
}
.share .share-twitter:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-facebook {
    background-color: #3b5998;
}
.share .share-facebook:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-google {
    background-color: #dd4b39;
}
.share .share-google:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-hatena {
    background-color: #2c6ebd;
}
.share .share-hatena:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.share .share-line {
    background-color: #00c300;
}
.share .share-line:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}


.share .share-feedly {
    background-color: #87c040;
}
.share .share-feedly:hover {
    opacity:0.7;
    filter:alpha(opacity=70);
    -ms-filter: “alpha( opacity=70 )”;
}

.fa-hatena:before {
    content: "B!";
    font-family: "Verdana";
    font-weight: bold;
}

@media only screen and (max-width: 780px) {
.share li{
width:49%;
}}

 上のCSSを、既存のソーシャルボタンより下に挿入してください。

 ボタンの幅を変更したい場合は、.share liのwidth属性をいじってください。1列にしたいのなら16%に変更すればOKです。


<section id='share'>
  <ul class='share'>
    <li class='share-twitter'><a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;|&quot; + data:blog.title + &quot; &amp;url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-twitter'/><br/>Twitter</a></li>
    <li class='share-facebook'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.canonicalUrl + &quot;&amp;t=&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-facebook'/><br/>Facebook</a></li>
    <li class='share-line'><a expr:href='&quot;line://msg/text/&quot; + data:blog.pageName + &quot; &quot; + data:blog.canonicalUrl' target='_blank'><img alt='LINEで送る' height='26' src='LINE画像のURL' width='26'/><br/>LINE</a></li>
    <li class='share-google'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.canonicalUrl' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-google-plus'/><br/>Google+</a></li>
    <li class='share-hatena'><a expr:href='&quot;http://b.hatena.ne.jp/add?mode=confirm&amp;url=&quot; + data:post.canonicalUrl + &quot;&amp;&quot; + data:post.title + &quot;|&quot; + data:blog.title' onclick='javascript:window.open(this.href, &apos;&apos;, &apos;menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600&apos;);return false;' target='_blank'><i class='fa fa-hatena'/><br/>はてブ</a></li>
    <li class='share-feedly'><a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fサイト名' target='blank'><i class='fa fa-rss'/><br/>Feedly</a></li>
  </ul>
</section>

 HTMLの編集で、以下の文字列を探してください。

 <data:post.body/>

 見つけたら、その上にコードを挿入してください。

 各自で記入するのは、以下の2点です。

【LINE画像のURL】
 LINEアイコンをアップロードして、そのURLを貼り付けてください。

【サイト名】
 自分のブログのURLを入れてください。

参考サイト



【Blogger】自作ソーシャルボタンを設置して読み込みを高速化する | Black Everyday Company

 この記事で公開したソーシャルボタンは、Black Everyday Companyのダーシノさんが作ったデザインを元に制作しました。

 リンク先のボタンも記事上に適したデザインなのですが、導入してみたところ文字色が白くならなかったり、スマホからだと表示が崩れすぎたりするので、Vaster2で導入する場合は手を加える必要があります。




設置方法|LINEで送るボタン

 LINEアイコンを表示したいなら、自分で画像を用意する必要があります。公式サイトで配布されているのでダウンロードしましょう。自分は30x30の画像を使っています。



この記事を書いた人

運営者:クロスグリ


 小説家志望の元ライター。
 プロの小説家になるべく、日々勉強しながらサイト運営しています。
 作品の下読み依頼や、個別相談(創作カウンセリング)等も受け付けています。
 気になったらTwitterフォローお願い致します。

このサイトについて 欲しいものリスト


スポンサーリンク

Bloggerテンプレート「Vaster2」で利用できるソーシャルボタンを作りました。CSSとHTMLコードを公開しているので、コピペでカスタマイズできます。

コメントを投稿

[disqus]

Author Name

{picture#https://4.bp.blogspot.com/-1zLucze5Byg/WA1R7mlH4hI/AAAAAAAAAYU/2gibmrPA7AITohNOUcfZi0ZYmNEt9UM1gCPcBGAYYCw/s320/S_4860987874792.jpg} YOUR_PROFILE_DESCRIPTION {twitter#https://twitter.com/crosgre}

連絡フォーム

名前

メール *

メッセージ *

© 2016 Project "Crosgre" Self employed. Powered by Blogger.