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

   

social-media

あなたはBloggerを運営している時に、「SNSボタンが、もうちょっとカッコよかったらな、、」と思う時はありませんか?

Bloggerは、Google先生が運営しているサービスだけあって、無料ブログの中でも最高のカスタマイズ性を誇っていますが、なぜか初期設定のSNSボタンのデザインが、悲惨なまでにダサいことでも有名です。

そこで今回はコピペだけで、BloggerのSNSボタンを超かっこよくするカスタマイズ法を紹介していきます。

ぜひ、参考にしてください。

スポンサーリンク

今回のカスタマイズで作れるSNSボタンのデザイン

今回のカスタマイズで作ったオリジナルSNSボタンは、1枚の画像がPC版での表示で、2枚目がスマホ版での表示です。

PCの時には横いっぱいに3列にボタンが広がり、スマホ時には2列に並ぶように設定しています。また、ボタンにカーソルを合わせた時に、ゆっくりと文字色と背景色が変化するようにしました。(本ブログを参考に)

blogger-sns

sns-blogger-sumaho

 

カスタマイズの手順

1、head内にFont Awesome Iconsのコードを挿入

まずは、テンプレートを開いて

<head>

を見つけます。そして、このコードのすぐ後ろに、

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

と言うコードをコピペします。

このコードは、「Font Awesome Icons」と言う無料でアイコンを提供してくれているサービスを利用するために必要なコードで、これにより、TwitterやFacebookのかっこいい公式アイコンをデザインに使うことができます。

(ただし「Font Awesome Icons」では、はてなブックマークのアイコンは用意されていないので、はてブボタンだけはアイコンを使用せずに、コード内に「B!」と直接入力することで誤魔化しています。)

2、skin内にCSSコードを挿入

次に、

]]></b:skin>

と言うコードを探して、その真上に以下のコードを貼り付けてください。

/*SNSボタンのカスタマイズ*/

.sns{
  margin:10px auto;
  text-align:center;
  width:100%;
}
.sns ul {
  list-style:none !important;
  padding: initial !important;
}
.sns li {
  float:left;
  width:30%;
  height:54px;
  margin:20px 3px;
  list-style:none !important;
}
.sns li span,.sns .fa{
  font-size:30px !important;
}
.sns li a {
  font-size:18px;
  position:relative;
  display:block;
  padding:8px;
  transition:0.3s;
  border-radius:6px;
  text-align:center;
  text-decoration: none;
}
/* ツイッター */
 .twitter a {
   color:#00acee;
	background:#fff;
    border:2px solid #00acee
}
  .twitter a:hover {
	background:#00acee;
   color:#fff;
}
/* Facebook */
  .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;
}
/* feedly  */
 .feedly a{
   background:#fff;
	color:#87c040;
   border:2px solid #87c040;
	  }
 .feedly a:hover{
  background:#87c040;
  color:#fff;
 }

/* Pocket */
 .pocket a {
  background:#fff;
  color:#f03e51;
  border:2px solid #f03e51;
}
 .pocket a:hover {
  background:#f03e51;
   color:#fff;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}
.share-title{
font-size:20px;
padding-bottom: 3px;
border-bottom: 1px solid #ccc;
margin-top:30px;
}
@media only screen and (max-width: 780px) {
.sns li{
width:47%;
}
}

3、SNSボタンを設置したい所にコードを挿入

最後にSNSボタンを設置したい場所に、以下のコードを貼り付けます。

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h4 class="share-title">この記事をシェアする</h4> 
                  <div class='sns'>
                  
 <ul class="clearfix">
    <li class="twitter"><a expr:href='"http://twitter.com/share?text=" + data:post.title + "|" + data:blog.title + " &amp;url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-twitter"></i><br/>Twitter</a></li>
    <li class="facebook"><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.canonicalUrl + "&amp;t=" + data:post.title + "|" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-facebook"></i><br/>Facebook</a></li>
    <li class="google1"><a expr:href='"https://plus.google.com/share?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-google-plus"></i><br/>Google+</a></li>
    <li class="hatebu"><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&amp;url=" + data:post.canonicalUrl + "&amp;" + data:post.title + "|" + data:blog.title' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa">B!</i><br/>はてブ</a></li>
    <li class="pocket"><a expr:href='"http://getpocket.com/edit?url=" + data:post.canonicalUrl' target="_blank" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;"><i class="fa fa-get-pocket"></i><br/>Pocket</a></li>
<li class="feedly">
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FサイトのURL'  target='blank'><i class="fa fa-rss"></i><br/>Feedly</a>
    </li>
  </ul>
</div>
 </b:if>

ここで注意しなければならないのが、上のコードの下から5行目にある

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2FサイトのURL'  target='blank'><i class="fa fa-rss"></i><br/>Feedly</a>

と言うコードです。

このコードの中に「サイトのURL」と書かれている部分がありますが、ここの部分は自分のブログのURLに書き直してください。

例えば、ボクの場合だと、「サイトのURL」を「toumaswitch.com」に書き換えればOKです。(URLの先頭にhttpは要りません。)

<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Ftoumaswitch.com'  target='blank'><i class="fa fa-rss"></i><br/>Feedly</a>

補足:コードをどこに挿入したら分からない場合

もし、3番の手順で紹介したコードをどこに貼れば良いのか分からない場合は、

<data:post.body/>

と言うコードを見つけて、その真下に貼れば見栄えがよくなります。

テンプレートによっては、<data:post.body>と言うコードは何ヵ所も書かれている場合があるので、その時は1つずつコードを貼って、上手く表示されるか確かめる必要があります。

 

最新の将棋ニュースを知りたい人におススメ

 あなたは、既存の将棋ニュースサイトに不満を感じたり、「もっと便利にならないかな」と思っていませんか?  

そんな人におススメしたいのが、「Shogi Pocket」と言う将棋ニュースサイトです。

Shogi Pocketは、「知りたい将棋の最新情報だけを、すぐにゲットできる」ように設計された新しいニュースサイトです。

 無駄を削ぎ落した将棋ニュースサイト「Shogi Pocket」

スポンサーリンク

この記事をシェアする

こちらの記事もおすすめ!