【Blogger】サイドバーにGush2と同様のSNSボタンを配置する方法

2015/06/23

Bloggerで日記ブログを書いています。（誰も読んでませんが(^_^;)）
さらさらぶろぐのサイドバーのSNSボタン（アイコン）と同じのをBloggerにも置いたので、その方法を記事にします。
Gush2のパクリですけど…(^^ゞCSSは大幅に変更してます。

しあがりはこんな感じです。
BloggerサイドバーSNSボタン完成例

1 サイドバーにガジェットを追加してHTMLを記述
2 テンプレートのカスタマイズでCSSを追加
3 今後の課題

サイドバーにガジェットを追加してHTMLを記述

レイアウト画面で、サイドバーにガジェット「HTML/JavaScript」を追加して、下記のコードを記述します。

<div class='side-sns'>
<ul>
<li><a href='https://twitter.com/【自分のツイッターID】' target='_blank'><i class='fa fa-twitter'></i>
</a></li>
<li><a href='https://www.facebook.com/【自分のフェイスブックID】' target='_blank'><i class='fa fa-facebook'></i>
</a></li>
<li><a href='https://plus.google.com/u/0/【自分のグーグルプラスID】' target='_blank'><i class='fa fa-google-plus'></i>
</a></li>
<li><a href='【自分のブロガーアドレス】/feeds/posts/default?alt=rss' target='_blank'><i class='fa fa-rss'></i>
</a></li>
<li><a href='http://cloud.feedly.com/#subscription/feed/【自分のブロガーアドレス】/feeds/posts/default'  target='blank'><img id="feedlyFollow" src="http://s3.feedly.com/img/follows/feedly-follow-logo-white_2x.png" alt="follow us in feedly" width="28" height="28" />
</a></li>
</ul>
</div>

<ul>

</a></li>

</a></li>

</a></li>

</a></li>

</a></li>

</ul>

</div>

【】で囲んでいるところ5箇所を自分用に書き換えてください。

参考までに、私のブログ（さらさらにっき）の場合を載せておきます。
【自分のツイッターID】＝sarasaralli
【自分のフェイスブックID】＝sarasarablog
【自分のグーグルプラスID】＝110794312530102325687
【自分のブロガーアドレス】2箇所＝http://sarasaralli.blogspot.com

テンプレートのカスタマイズでCSSを追加

「テンプレート＞カスタマイズ＞上級者向け＞CSSを追加（一番下にあります）」で、下記のコードを追加します。

/*-----------------------------------
  サイドバーSNSアイコン
------------------------------------*/
.side-sns {
	margin-bottom: 12px;
}

.side-sns ul {
	display: table;
	table-layout: fixed;
	width: 200px;
	background-color:#8282f5;
	margin:0 auto;
	padding:2px 8px 0;
}

.side-sns ul li {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size:22px !important;
	border-top:none;
}

.side-sns ul li a {
	color: #ffffff;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

.side-sns ul li a:hover {
	color: #dddddd;
	text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}
img#feedlyFollow {
	margin:0 auto;
}
a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}

/*  サイドバーSNSアイコン　終わり  */

/*-----------------------------------

サイドバーSNSアイコン

------------------------------------*/

.side-sns {

margin-bottom: 12px;

}

.side-sns ul {

display: table;

table-layout: fixed;

width: 200px;

background-color:#8282f5;

margin:0 auto;

padding:2px 8px 0;

}

.side-sns ul li {

display: table-cell;

vertical-align: middle;

text-align: center;

font-size:22px !important;

border-top:none;

}

.side-sns ul li a {

color: #ffffff;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

.side-sns ul li a:hover {

color: #dddddd;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);

}

img#feedlyFollow {

margin:0 auto;

}

a:hover img {

opacity: 0.8;

filter: alpha(opacity=80);

-ms-filter: "alpha( opacity=80 )";

}

/* サイドバーSNSアイコン　終わり */

私の日記ブログは、サイドバーの幅＝260pxです。幅が違うと表示ずれするかもしれません。

今後の課題

うまくできたぞって思っていたんですけど、Firefoxで見るとfeedlyがちょびっと上にずれちゃってるって、今気付いちゃいました(T_T)ChromeやIEではいい感じなんだけど…
アイコンフォントとimgを混在させてるから調整が難しいです。

on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。初めまして。同感です。こんなに良いのに、なんでみんな使わないの？？って思いますよね。確かにフォントは、初期状態ではちょっと… そのあたりがもうちょっと何とかなれば最高なんですけどね。ＣＳＳの解説ありがとうございます、参考にさせていただきますね♪
on 【Blogger】アフィリエイトを無料ブログでするのなら、Bloggerがおすすめです。スマホでも広告表示されないので。bloggerは僕もオススメです( ´ ▽ ` )ﾉ本当シーサーブログは広告多いですね( ´ ▽ ` )ﾉ
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）TN0816さまご訪問ありがとうございます。キーワード検索の下に表示されるのは、サイド広告300pxです。外観＞ウィジェット＞サイド広告300px に、広告コードを書いているのではないでしょうか？
on スマホでも３つAdSenseを表示するGush2カスタマイズ【メイン上部広告復活＆記事下広告右をサイドバー最後に表示】（改訂版）このブログとても参考になりました！１つわからないところがあるのですが、ここに書かれているとおりにやったのですが、サイドバーのキーワード検索の下にもも広告が表示されてしまい、どうしたらいいのかわからなくて困っています。アドセンスはメイン上部にレスポンシブ広告を入れて、記事下左と記事下右に300×250を入れています。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。a cattle northern さまくわしい情報をありがとうございます。なるほど。怪物レベルでなければ、ポイントで受け取る分が必ずあるのですね。「ポイントで楽天市場で買い物してね」ってことなのでしょうね。楽天市場を使ってない人は『もしも』がいいですね。
on 審査に落ちたAmazonとポイント制の楽天は、「もしもアフィリエイト」経由でやってみます。楽天アフィですが、１ヶ月で３０００円以上は、３０００ポイントを楽天ポイントで＋超過分を楽天銀行振込１ヶ月で３０００円未満は楽天ポイントで支給となります。毎月１０万以上確実で全額銀行振込となりますが、そんな怪物は・・・・・。楽天市場を使うのでなければ、もしもの方がいいと思いますよ。

さらさらぶろぐ

アフィリエイトのことを書くつもりで始めたけど、WordPressやGush2のことを書いちゃってます。

【Blogger】サイドバーにGush2と同様のSNSボタンを配置する方法

サイドバーにガジェットを追加してHTMLを記述

テンプレートのカスタマイズでCSSを追加

今後の課題

関連記事-こちらもどうぞ

この記事へのコメントはこちらコメントをキャンセル

サイドバーにガジェットを追加してHTMLを記述

テンプレートのカスタマイズでCSSを追加

今後の課題

関連記事-こちらもどうぞ

この記事へのコメントはこちら コメントをキャンセル

この記事へのコメントはこちらコメントをキャンセル