読者です 読者をやめる 読者になる 読者になる

どんべーと呼ばれて早幾年

社会に踊らされ続けるゆとり世代から見える日常を自由気ままに書き連ねます。

<初心者でもできる>はてなブログ用のおしゃれなシェアボタン設置で、ブログをカスタマイズしてみました。【PC・スマホ両対応】

f:id:DoNbeh_G:20150815142759p:plain

はてなブログのカスタマイズ【ソーシャルボタン編②】

週末に時間があったので、はてなブログのシェアボタンを少しカスタマイズしてみました。

はてなブログのカスタマイズって初心者の方にとっては、意外とハードルが高かったり・・・。自分もほぼ素人なので、日々苦戦してます。。

 

そんな中ではてなブログのシェアボタン設置に関する良記事を発見したのでご紹介いたします。

今回ご紹介させていただく記事はこちら▼

daipanman.hatenablog.com

 

 

「だいぱんまん」さん、有難うございます!!

 

さて、本題のシェアボタン設置ですが

私が最終的にカスタマイズしたシェアボタンはこちらです▼

 

f:id:DoNbeh_G:20150815143906p:plain

 

「・・・めっちゃオシャレやん!」

 

しかもこのシェアボタンの読み込みが超早い・・・!

デフォルトで設置できるシェアボタンの読み込みが遅くて、ちょっとイライ・・だったので物凄く有難いです。

でも、「だいぱんまん」さんのコードをそのままコピペしただけでは、少しデザイン崩れを起してしまったので、微調整を加えました。

 

そのままシェアボタンを設置した時はこんな感じでした▼

f:id:DoNbeh_G:20150815144257p:plain

ちょっと上に寄ってしまっていますよね・・・。

 

そこで、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;
}

スマホの場合はこんな感じでした▼

f:id:DoNbeh_G:20150815152807p:plain

こちらは問題なさそうでしたので、このまま利用させていただいてます!

 

初心者の方でも簡単にシェアボタンを設置できますので、ぜひ参考にしてみてくださいね。

 

またシェア数が表示されるシェアボタンを設置したいと思っている方にはこちら▼ 

blog.donbe.me

はてなブログ/カスタマイズ/ソーシャルボタン/SNSボタン/シェアボタン/おしゃれ/初心者/カスタム/設置/フラットデザイン