そこで、本ブログにこれらのソーシャルアイコン（SNSボタン）を設置したく奔走していたところ、カッコイイSNSボタンに出会えました。
ここでは、テンプレートを編集せず、ガジェットの追加だけで、タイトル脇にSNSボタンを表示させる方法を紹介します。
【ソーシャルボタンには２種類ある】
ソーシャルボタンには、その用途が異なるものが２種類あります。
- ブログ記事等を共有するためのもの
- 自分が公開しているソーシャルページにアクセスするもの
これは、（ブログ投稿者ではなく読者が）その記事を「良かった」と感じ、記事を自分（読者）の推薦として他の人に伝える手助けをするボタンになります。
具体的には、Twitterであれば「その読者が該当記事へのリンク付きでツイートする」と言う形になります。
この「ボタン」は、大抵のブログサービスで最初から用意されているかと思います。
当ブログで言うと、記事下の小さい灰色のアイコンです。マウスを乗せると色がつきます。
２番目は、実はただのリンクです。わざわざボタンにする必要もないぐらいです。
しかし、SNSがこれだけ普及している現在においては、視覚的に瞬時に理解できる「アイコン型のボタン」は非常に有用です。
（参考：本ブログのタイトル横のボタン）
この「ソーシャルページへのアクセスボタン」を設置します。
【ソーシャルページへのアクセスボタン】
ソーシャルページへアクセスするボタンは“Blogger”で用意されていないので、自分で設置します。
「クリボウの Blogger Tips」さんで格好良いボタンが紹介されていましたので、そのSNSボタンを使わせてもらうことにします。
紹介されていたSNSボタンは、ブログの右側に表示されるもので、スクロールしてもずっと固定位置で表示され続けます。
このような感じです。（クリボウ氏のデモページ）
これはこれで非常に格好良くていいのですが、SNSボタンはここまで自己主張しなくて良いと思います。
そこで色々と考えた結果、ブログタイトル右側のぽっかり空いた空間に、このボタンを設置したくなりました。
しかし、タイトル部分を編集するにはテンプレートの変更を伴います。
私のように知識のないものは、あまりテンプレートをいじりたくありません。
そこで元々設置してあるガジェット（右側メニュー）の編集だけで何とかすることにします。
【設置方法】
ここで紹介するコードを「HTML/JavaScript」ガジェットに記述し、レイアウト右側の一番上に配置します。
クリボウ氏のサンプルを基に次のように書き換えます。
まず、スタイルシート部分の固定表示を取り除き、元々あったガジェットの一部とつなぎます。
元々あったガジェットとは私の場合「当ブログについて」の部分です。
更に、「SNSボタン」は上に浮かせ、「当ブログについて」部分は元の場所に沈ませます。
なお、メールアイコンは削除しました。
実際、当ブログで使っているガジェットを紹介します。
<style>
.btsnts-flt-wdt{
margin-top:-170px;
}
.btsnts-flt-wdt img{
float:right;
margin:5px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
.intro1{
position: relative;
margin-top:170px;
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="https://www.facebook.com/Wert.SNS" title="Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxVpmNQ6_dUp4f0az3g8WVxv4kIGr206IubtmzFMMCWNerYd6GKp4J8RtrVcLPKf3mKSdT_hb8YxN5ysQZJ6xlG0i0B9tdG962u4_dKS7pM6W3kYRRUpnoFhSA7kxTlDhR98BHHOrZ-c/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="https://twitter.com/Wert_SNS" title="Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKsJZuJmyJcIPxG6vBx2mKPlvuDcUaAUcX_FdKr5qkjhO2np-hloTtqoOxMLA9NR7bqNS8bagK9KAqor48fwcwIUVCfZy4fLvTD5Ikwd93eFFAiBsuPnZR_jc7Ea7At9CwP9Gzw-Yl0c/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/blogspot/dOIyW" title="RSSリーダーで購読する" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PQ5RPt07jDKNMMdmuaVQqbik1TpZjV1O8cCReD3yBCihdE3dUMSChmxE0rQ7lRRR8xZrR2Gmz_9TFBNxDljhwinhdG1d-eH8TzMv6lxiUW57Kves332uKNoBOVpBOcoY7QT21f9gkOU/s1600/Rss.png" /></a>
</div>
<!-- End -->
<div class="intro1">
<p>使い勝手を犠牲にしない、スマートフォンの節約術を追求します。ありきたりな情報は割愛しています。</p><p>DIY等の趣味も載せています。</p>
</div>
実際の設置状況は当ブログのタイトル右横になります。
元々が非常に格好良いボタンなので、この方がさりげなくてカッコイイです。
［6/9追記］
ソーシャルボタンがタブレット内に表示されているように見せたく、ドコモのdtab画像を追加しました。
<style>
.dtab {
position: absolute;
top: -170px;
left:50px;
}
.btsnts-flt-wdt{
position: relative;
float:right;
top:-140px;
right:20px;
margin-bottom:30px;
}
.btsnts-flt-wdt img{
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
.intro1{
position: absolute;
}
</style>
<img border="0" class="dtab" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoK8UnV-KBzqKueU90-3zR_W3-G3lRlwxo6ltIVDh3z0g_T8W-EBSS56N6Z7nHYWNjf9cCAlh13_OF4CI7L6KK9JC5GcstU9ckCIy3IIO4bWVtPPYQIGccfJy9ovL4ExxQfRqZyqXN-rFf/s250/dtab3.png" />
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- RSS -->
<a href="http://feeds.feedburner.com/blogspot/dOIyW" title="RSSリーダーで購読する" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2PQ5RPt07jDKNMMdmuaVQqbik1TpZjV1O8cCReD3yBCihdE3dUMSChmxE0rQ7lRRR8xZrR2Gmz_9TFBNxDljhwinhdG1d-eH8TzMv6lxiUW57Kves332uKNoBOVpBOcoY7QT21f9gkOU/s1600/Rss.png" /></a>
<!-- Twitter -->
<a href="https://twitter.com/Wert_SNS" title="Twitter" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggKsJZuJmyJcIPxG6vBx2mKPlvuDcUaAUcX_FdKr5qkjhO2np-hloTtqoOxMLA9NR7bqNS8bagK9KAqor48fwcwIUVCfZy4fLvTD5Ikwd93eFFAiBsuPnZR_jc7Ea7At9CwP9Gzw-Yl0c/s1600/twitter2.png" /></a>
<!-- Facebook -->
<a href="https://www.facebook.com/Wert.SNS" title="Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXxVpmNQ6_dUp4f0az3g8WVxv4kIGr206IubtmzFMMCWNerYd6GKp4J8RtrVcLPKf3mKSdT_hb8YxN5ysQZJ6xlG0i0B9tdG962u4_dKS7pM6W3kYRRUpnoFhSA7kxTlDhR98BHHOrZ-c/s1600/facebook.png" /></a>
</div>
<!-- End -->
<div class="intro1">
<p>使い勝手を犠牲にしない、スマートフォンの節約術を追求します。ありきたりな情報は割愛しています。</p><p>DIY等の趣味も載せています。</p>
</div>
なんかしつこくなったような気もしますが・・・、結構頑張って作ったのでこのまま使いたいと思います。
ブログ自体の見た目がほぼデフォルトなので、これを機にもう少し弄りたくなって来ました。
0 件のコメント :
コメントを投稿