【Blogger】サイドバーにGush2と同様のSNSボタンを配置する方法
Bloggerで日記ブログを書いています。(誰も読んでませんが(^_^;))
さらさらぶろぐのサイドバーのSNSボタン(アイコン)と同じのをBloggerにも置いたので、その方法を記事にします。
Gush2のパクリですけど…(^^ゞCSSは大幅に変更してます。
しあがりはこんな感じです。
サイドバーにガジェットを追加してHTMLを記述
レイアウト画面で、サイドバーにガジェット「HTML/JavaScript」を追加して、下記のコードを記述します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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> |
【】で囲んでいるところ5箇所を自分用に書き換えてください。
参考までに、私のブログ(さらさらにっき)の場合を載せておきます。
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687
【自分のブロガーアドレス】2箇所=http://sarasaralli.blogspot.com
【自分のツイッターID】=sarasaralli
【自分のフェイスブックID】=sarasarablog
【自分のグーグルプラスID】=110794312530102325687
【自分のブロガーアドレス】2箇所=http://sarasaralli.blogspot.com
テンプレートのカスタマイズでCSSを追加
「テンプレート>カスタマイズ>上級者向け>CSSを追加(一番下にあります)」で、下記のコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/*----------------------------------- サイドバー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を混在させてるから調整が難しいです。
この記事へのコメントはこちら