＜初心者でもできる＞はてなブログ用のおしゃれなシェアボタン設置で、ブログをカスタマイズしてみました。【PC・スマホ両対応】
はてなブログのカスタマイズ【ソーシャルボタン編②】
週末に時間があったので、はてなブログのシェアボタンを少しカスタマイズしてみました。
はてなブログのカスタマイズって初心者の方にとっては、意外とハードルが高かったり・・・。自分もほぼ素人なので、日々苦戦してます。。
そんな中ではてなブログのシェアボタン設置に関する良記事を発見したのでご紹介いたします。
今回ご紹介させていただく記事はこちら▼
「だいぱんまん」さん、有難うございます！！
さて、本題のシェアボタン設置ですが
私が最終的にカスタマイズしたシェアボタンはこちらです▼
「・・・めっちゃオシャレやん！」
しかもこのシェアボタンの読み込みが超早い・・・！
デフォルトで設置できるシェアボタンの読み込みが遅くて、ちょっとイライ・・だったので物凄く有難いです。
でも、「だいぱんまん」さんのコードをそのままコピペしただけでは、少しデザイン崩れを起してしまったので、微調整を加えました。
そのままシェアボタンを設置した時はこんな感じでした▼
ちょっと上に寄ってしまっていますよね・・・。
そこで、paddingの値を微調整して真ん中あたりになるようにしました。
こちらはPC用CSS（ダッシュボード⇒デザイン⇒スパナアイコン⇒ヘッダ⇒タイトル下）を以下のコードに差し替えていただくことで修正できます。
/* Webフォントに関する指定(はてぶ) */
.sns_circle.hatebu.sns_circle span{
position:absolute;
padding:8px 0 0 8px;
color:#FFF;
font-size: 30px;
}
/* Webフォントに関する指定(Twitter) */
.sns_circle.twitter.sns_circle span{
position:absolute;
padding:7px 0 0 9px;
color:#FFF;
}
/* Webフォントに関する指定(Facebook) */
.sns_circle.facebook.sns_circle span{
position:absolute;
padding:8px 0 0 18px;
color:#FFF;
}
/* Webフォントに関する指定(Google+) */
.sns_circle.googleplus.sns_circle span{
position:absolute;
padding:10px 0 0 14px;
color:#FFF;
font-size: 30px;
}
スマホの場合はこんな感じでした▼
こちらは問題なさそうでしたので、このまま利用させていただいてます！
初心者の方でも簡単にシェアボタンを設置できますので、ぜひ参考にしてみてくださいね。
またシェア数が表示されるシェアボタンを設置したいと思っている方にはこちら▼
はてなブログ/カスタマイズ/ソーシャルボタン/SNSボタン/シェアボタン/おしゃれ/初心者/カスタム/設置/フラットデザイン
