もうずいぶん前になりますが、記事の下に配置してあるSNSボタンをデザインしてフラットな四角いボタンを並べました。
だいたいどこのブログを覗いても右や上に吹き出しが出ていて「いいね」や「ツィート」された数が表示されていますね。
僕は「いいね」や「ツィート」の数が少ないブロガーさんなのでそういう数字をドヤ顔で表示するのは好みません。
別に表示させている人はドヤ顔で表示させているわけではないと思いますが、各SNSのデフォルトの表示の形式がああいった吹き出しに数字というものだったりするのです。
好みでない僕はあえて数字の乗らないただの四角を並べただけにしました。なぜでしょうか。
photo credit: microsiervos via photopin cc
SNSボタンをフラットデザインで配置
一応こういう表示の方法を知りたくてこの記事に行き着いたという人もいるかもしれませんのでソースコードを書いておきます。
facebook用
[php]
facebook
[/php]
twitter用
[php]
ツイート
[/php]
google+用
[php]
Google+
[/php]
pocket用
[php]
Pocket
[/php]
はてブ用
[php]
B!はてブ
[/php]
LINE用
[php]
LINE
[/php]
メール用
[php]
メールする
[/php]
スタイルシートはこんな感じです。
[php]
a.facebook_btn {
background: #3B5998;
}
.facebook_btn:hover {
background: #5979be;
}
a.twitter_btn {
background: #33CCFF;
}
.twitter_btn:hover {
background: #88e1ff;
}
a.googleplus_btn {
background: #dd4b39;
}
.googleplus_btn:hover {
background: #f05721;
}
a.pocket-btn {
background:#EF3E56;
}
.pocket-btn:hover {
background:#ED6D80;
}
a.hatebu_btn {
background: #008FDE;
}
.hatebu_btn:hover {
background: #00A5DE;
}
.mail_btn {
background: #009923;
}
.mail_btn:hover {
background: #04E27E;
}
a.hatebu_btn span {
position: relative;
top: -1px;
}
[/php]
これを真似て使う人なんていないと思うので、抜けがあっても知りません。
数字の吹き出し表示させたくない理由
恥ずかしいのでそれらのSNS拡散数が見えないようにしてありましたが、管理者である自分には見えるようにしてあります。
見えないようにしてあるというのも効果としては興味深く、また自分としてはそうしたいのです。
つまり、いいね数がいくつかあると人はそこに興味を惹かれます。逆に反応の少ない記事には寄り付きにくい傾向があると思います。
客のいない店より客の多い店に皆行く傾向があるのと同じです。
しかし、あえて逆行しているようですが、いいね数が表示されていなければ自分の判断で記事を読み、自分の判断で「いいね」ボタンを押すしかありません。
誰かがいいねしているから読み、誰かがいいねしているから自分もするという態度でいいのでしょうか。
日本人にありがちなこの横並びという習性は僕は嫌いです。しばしばそれで嫁と意見が合わずぶつかります。
大衆の反応を見てからではなく、自分の判断で良いものは良いと言えるようになるべきです。
・・・・
ということで小さな変化ですがSNSボタンをまっさらな四角い枠にしましたが、この記事公開時点ではうまく表示できなくなってしまって吹き出しタイプになっていると思います。
いいねください。
