以前、ソーシャル系のブックマーク追加ボタンを自前で設置という記事を書きました。
この記事は2011年に書いたものでその後状況も変わったと思うので、改めて調べてメモしておこうと思います。
対象ソーシャルメディア
今回は、以下のソーシャルメディアを対象にしようと思います。
- はてなブックマーク
- Google+
1.Font Awesomeのコードを追加する
画像にしてもいいのでしょうけど、代表的なアイコンはFont Awesomeで揃っているので、今回はこちらを使おうと思います。
以下のコードをheadタグ内に記載します。
2.はてブ用にコードを追加
はてなブックマークを表示させるために、以下のコードを追加します。body閉じタグのあたりに追加するといいでしょう。
3.ソーシャルのコードを追加する
以下のコードを設置したい場所に追加します。single.phpに追加してください。フラットな感じにしたいのと、微妙にずれたりするのが面倒だったのでｗ、今回はtableにいれてしまいます。
★の箇所には、twitterのアカウント（@を覗いた文字列）を記載します。
B!
4.見た目を整える
以下のコードをコピペしてください
table.social {
width: 100%;
margin-bottom: 2em;
table-layout:fixed;
}
table.social td {
text-align: center;
vertical-align: middle;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
}
table.social a {
display: block;
font-size: 1.5em;
color: #fff;
line-height: 50px;
height: 50px;
background-color: #666;
font-weight: bold;
}
table.social a:hover {
text-decoration: none;
}
.socialbtn_fb:hover {
background-color: #405997;
}
.socialbtn_tw:hover {
background-color: #55acee;
}
.socialbtn_b:hover {
background-color: #248fde;
font-weight: bold;
}
.socialbtn_p:hover {
background-color: #ee4056;
}
.socialbtn_g:hover {
background-color: #dd4b39;
}
最後に
いかがでしょうか？必要最低限ですが、十分目的は果たしていると思います。レスポンシブにも対応しているし、何より軽量です。ぜひ試してみてください。