はてなブログのSNSボタンを丸型にカスタマイズしました!デザインが可愛い!!

このブログの運営に関する記事をこちらにまとめました。

毎月のPV数やカスタマイズなどについて紹介しています。

www.aaa-yolo.com

 

昨日、1時間かけてSNSボタンをカスタマイズしました!!(疲れたし、ものすごく腰が痛かった)

たぶん普通の人は20分くらいで出来ると思うんですけどね、、、

自分、なかなかの機械音痴なんですよ、、、

 けどかなりの機械音痴である僕でも導入出来たので、そのカスタマイズについて紹介したいと思います!

 

 

ちなみに、はてなブログオリジナルのデザインはこんな感じ↓↓↓

f:id:kou446:20181208152603p:image

はてなブログのオリジナルのSNSボタンってなんか味気ないですよね、、

そして、今回のカスタマイズの結果はこちら↓↓↓f:id:kou446:20181208150720j:image

(スマホからの見え方です)

 あ、上の画像の記事はこちらです。幸せとは何か悩んでいたら見てみてください!!

kou446.hatenablog.com

 

話を戻しますが、このデザインは、丸みがあり、デザインもシンプルでおしゃれで可愛い!ものすごくおしゃカワです!!

カード型のデザインと迷いましたが、こちらの方がデザイン性が高く感じ、また、あまりこれを使っている方があまりいないと思ったのでこの丸型デザインを採用しました。

ものすごくおすすめのデザインです!

今回参考にさせて頂いたブログ記事

SNSボタンをカスタマイズする際、参考させて頂いたのは、だいぱんまん (id:donchan922)さんのこちらの記事です!!

 

とても分かりやすく説明されています。

機械音痴の僕でも理解し、導入出来る程の丁寧さです。

CSSをコピーし、貼り付ける場所も書いているので、そこに貼り付けるだけで完成です!

また、上記の画像の丸型だけでなく、角丸や四角型のCSSも記述されています。

自分の気に入るようにカスタムしましょう!

 

SNSボタンをカスタマイズする時の注意点

注意する事が2点あります。それは、

① デザインを開いた時のプレビューページにSNSボタンの変更は反映されない

② デザイン→スパナマーク→記事からソーシャルパーツを消さないとオリジナルと二重で表示されてしまう

ということです。

①については、デザイン→スパナマーク→記事にある「記事ページをプレビュー」でカスタマイズが反映されてるか確認してください。

②については、デザイン→スパナマーク→記事にあるソーシャルパーツで各SNSのチェックマークを外してください。

 

SNSボタンのカスタマイズについてまとめているページの紹介

それがこちらです↓↓↓

 

色々な方が制作したSNSボタンや読者登録ボタンのカスタマイズについてまとめられています。

自分のお気に入りのカスタマイズを探してみてください!!