各SNSデフォルトのシェアボタンって見た目がダサい
はい。
各SNSのデフォルトのボタンリンクって、野暮ったくて全然可愛くないですよね。特にフラットなデザインで作ったサイトだと浮きます。シェア数とかの表示も邪魔っけです。
というわけではてなブログ用のものを作りました。
使い方
デザイン画面に行き、以下のHTMLを記事上に挿入してください。
とりあえず、はてブ, Facebook, Twitter, Feedly, Pocketに対応してます。
ここで注意！
twitterのコードだけはvia=hatchineeの部分を、貴方のtwitter idに変更してください。
以前の記事ではここの注意を書き忘れてしまってました。申し訳ない。
はてなブログ的な制限によって、一覧画面では表示出来ません。JSで頑張れば出来そうですがやりたくありません。
またこんなものを使わなくても、この間にはてなブログは公式機能として上下のソーシャルパーツ設置に対応しました。
なので、このコードスニペットは多少見栄えが良いだけの下位互換だと思ってくれて構わないです。
じゃあなんでこんなものを作ったかというと、僕は標準のソーシャルパーツはどれもこれも見た目がダサいなーと思っていたのと、狙って作ったとはいえ我ながら地味なテーマなので何かしらファンシーな要素が欲しいよなぁみたいな、そういうアレで思いついてささっと作りました。
まだスマホでの調整なんかが微妙なので、今後気が向いたときに調整はいる感じです。
Cinnamonテーマ以外でこのSNSボタンを使いたい場合
なおCinnamonなんて使わねーよという方も沢山いると思います。その場合は、以下のCSSを投げ込むと同じような丸っこくて可愛らしいソーシャルメディア拡散ボタンが使えるようになります。
.sns-share--area{margin:auto;padding:0} .sns-share--area li{display:inline-block;list-style-type:none} .sns-share--link{display:block;color:#fff;border-radius:50%;width:45px;height:45px;line-height:47px;text-align:center;margin-right:15px} .sns-share--bookmark{background-color:#1487bd} .sns-share--twitter{background-color:#55acee} .sns-share--facebook{background-color:#3274bd} .sns-share--rss{background-color:#75ca1c} .sns-share--pocket{background-color:#e54889}
ツイッターやFacebookのボタンのカスタマイズ方法の一例としてもなんとなく参考っぽいものになったらいいですね？
またはてなブログのテンプレートで使える変数といったものの存在も、今回はじめてしりました。{Title}とかで記事のタイトルを呼び出せたりするんですね。
ひとまず、ちょっとカワイイになったので満足です。
気が向いたらホバーのアニメーションとかもそのうち入るとおもいます。
なんか見た目寂しいなっていう人は入れてみてくだしい。
以上。
