はてなブログのSNSボタンのカスタマイズが楽しい

シェアする

スポンサーリンク


うぃーす。

 

今回ははてなブログのサイドバーにあるツイッターの「フォロー」ボタンと

「読者になる」ボタンをカスタマイズしてみました。

f:id:dead_corns:20170509191731p:plain

 

このままでもいいかな〜とも思ったのですが、他の方もブログで書いてますが

例えばSNSのシェアボタンの大きさが不揃いだったり全てのボタンが表示されるのが

若干遅かったりするんですね。

それに、他の方のブログを見ると、バリバリブログをやっている方のブログって

カスタマイズしてあってかっこいいんですよね

なので、自分もやって見ました。

他の方のブログなどを参考に少し自分流にアレンジしています。

 

サイドバーのSNSボタンのカスタマイズ

やり方は大まかにはこんな感じです。

参考にしたサイトも載せましたので、これからカスタマイズ

しようと思ってる方は参考にしてみてください。

1. 現在表示されているフォローボタン、読者になるボタンの非表示

2.「読者になるボタン」、「フォローボタン」のリンクを設置

shiromatakumi.hatenablog.com

viral-community.com

 

3. 設置したリンクのスタイルを調整

コピペOK! 個性的なSNSボタン/シェアボタンのデザインまとめ | それからデザイン スタッフブログ

CSSの擬似要素hoverで、マウスオーバーした文字列を変える | WWW

 

 

そしてカスタマイズ後のボタンがこちら!

f:id:dead_corns:20170509192131p:plain

 

2つのボタンのサイズを合わせたのと、マウスを乗せたときに

ボタンの文字が変わるように変えてみました。

これ、かなり楽しいですね。

既存のボタンだとボタンを押した際の画面が小さいウィンドウで表示されるのですが

私のやつだと別ウィンドウで表示されてしまうのでそれを既存と同じ動きにするのと、

スマホ版もカスタマイズしたいと思います。

ブログの楽しみがまた増えました。

SNSのシェアボタンも今後カスタマイズしたいですね。

あと、よかったら読者登録とフォローお願いします笑

 

それでは〜