SNSシェアボタンを加工した

Web

記事下に設置してあったSNSシェアボタン

前回の記事(ブログデザインカスタムとこれからしていく事)で今後したいく事の中に書いてあった

「シェアボタンの加工」

もとからこのブログテーマにはボタンは存在していたのですが少し味気なかったのと

デフォルトのボタンは表示に少し時間がかかるみたいなので記事の上下に設置すると更にかかってしまうので

上部のみにし下部はCSSで手を加えボタンぽくしてみました

 

CSSをいじっていく

201406101

こんな感じです

CSSはいたって普通にBoxをブロック指定してボーダーで囲み丸みを持たせる

ポイントはボーダー下のみpxをつけて浮き出た感じにした事

これは結構たくさんのブログで見かけるやつですねw

そして中身はWebフォント使ってSNSのロゴ表示 はてブだけないので今後画像でなんとかします^^;

201406102

ボタンにオンマウス時に押したように凹むようにしました

視覚的にもいい感じになったのではないでしょうか?

あとはシェア数を表示してもいいのかなと思いましたが記事上部に数は出てるのと

シェア自体まだほとんどされていないので数字をのせるのが恥ずかしいのでw

今後シェア数が増えれば考えます

 

シェアボタンを変えてみて

まだ変更して2日なので効果は分かりません

完全に自己満足な部分はあると思いますが今後シェアしてくれる人が増えるといいなと思っています

そのためにはシェアしてもらえる記事を書くことですね

さーせん^^;

 

 

 

ちなみに変更したボタンは

↓↓↓↓↓↓↓↓↓↓↓↓これでーす^^

 

コメント

  1. ひげモジャ より:

    いいなあヽ(^。^)ノ
    ツイッターでポチットさせていただきました。

タイトルとURLをコピーしました