にじの架け橋

晴れときどき発達障害 兼田絢未のブログ

 

SNSシェアボタンのカスタマイズ

はてなブログのSNSシェアボタンは、デフォルトだとデザインがバラバラで統一感がないのでカスタマイズしました。今回も先人の知恵をお借りしてシェアボタンを記事上と記事下に表示できるようにさせてもらいました。

参考にさせて頂いたのはこちら↓↓↓の記事です。

www.notitle-weblog.com

SHIROMAさん、ありがとうございます!

最初はSHIROMAさんの記事からそのままコピペをさせてもらったのですが、私のブログでは、はてブとfacebookとtwitterの3つにしたかったので、少し変更をしました。仕上がりは下のような感じです!

f:id:ayami65:20210407201328j:image

SHIROMAさんコードなのでここではコピーできる形で掲載しておりません。SHIROMAさんのサイトへ訪問してくださいね。SHIROMAさんのサイトには10種類のデザインがあります。

ここからは、私が設定した手順です。

SNSシェアボタンのカスタマイズ

1 気に入ったデザインのHTMLをコピー。

f:id:ayami65:20210408091505j:plain

※これは画像です。コードはSHIROMAさんのサイトへ!

2 自分のブログの管理画面からデザイン→記事→記事上(記事下)へ進み貼り付ける。

f:id:ayami65:20210408091246j:plain

f:id:ayami65:20210408091250j:plain

 使わないボタンのコードを削除する。

f:id:ayami65:20210408094149j:plain

 CSSのコードをコピーする。コードはSHIROMAさんのサイトで!

f:id:ayami65:20210407200738j:plain

 デザインCSSに貼り付け数値を変更する。私の場合はボタンを3つにしたので33%に変更しました。

f:id:ayami65:20210408094145j:plain

6 不要なコードを削除する。

f:id:ayami65:20210408094141j:plain

以上の設定でSNSボタンが表示されました!

f:id:ayami65:20210407201328j:plain

だがしかし!新たな問題が発生!その対処方法もSHIROMAさんのサイトで教えて頂きました。

次回へ続きます!