ブログカスタマイズ【シェアボタン見直し2019年10月】

f:id:buttobimusic:20161101183437j:plain

f:id:buttobimusic:20170922212413p:plain

今更だけどGoogle+終わったんだよね。シェアボタンなんとかせにゃ…

個人的にはシェア数表示も読み込みに時間食うし「いらねぇや!」と思ってたので、これを機にシェアボタンを一新してみました。

以下その忘備録です。
ついでにプロフィールも変えたからそれも書くね!

 

 

NEWフラットデザインのシェアボタン

新しいシェアボタンは、これだ!!

f:id:buttobimusic:20191023215642j:image

スマホだとこんな。

f:id:buttobimusic:20191023215934j:image

従来のボタン(スクショ撮っととくの忘れた)はまるっと削除してイチから見直しました。

できるだけシンプルかつわかりやすく、邪魔にならないもの。
ということでアレコレ検索かけて、もう結構古い記事とかバンバンでてきて途中で嫌になりつつ、なんとか満足のいくものを設置できました💪( ¨̮ 💪)

 

ベースは「よなかのはなし」さんのコードを使わせていただきました。

全部のアイコンからシェア数を削除したかったので該当のコードを消して、
シェア数のために少し左にずらしてあったツイッターはてブのアイコンをセンタリング。(これも該当コード削除でOK)

何故か全体が右に寄ってたので「.sns-area」に以下のコードを追加。

 margin: 0 auto;

参考サイト>

あと元々自分のブログにあったLINEのシェアボタンも欲しかったからそれを追加。
他のコードを見よう見まねでなんとかいい感じにできた!

色は自分のブログに合うようにちょっと変えたり。 
最近はグーグル検索でカラーコード入れるとその場でカラーパレットいじれてその場でコード表示してくれるのね!なんて便利なの!

f:id:buttobimusic:20191023220558p:plain

最後に、スマホで見るとシェアボタンの真下にくっつくように広告が表示されるのが嫌だったので、ウィンドウサイズが小さくなったら余白ができるようにコードを追加。

 

NEWプロフィール

ついでにこないだプロフィールもちょっと変えてました。今はこんな感じ。

f:id:buttobimusic:20191023215454p:plain

(ツイッターに上げたときからまたちょっと修正しました)

ざっと何やったか書くと

  • 画像をちょっと小さく
  • 職業?称号?的なものを書いたり。
  • 全体をセンタリングしてmarginやpaddingで空間をいろいろ調整

 

全体的に整った感あっていいですね〜!

いずれブログ引越し〜とか言って引越したらまたデザインめっちゃ変わるのに、今回も頑張っちゃいました💪( ¨̮ 💪)
いいんだー自分でアレコレやってみることが大事!そうしてできることも増えてくのよ!
実際昔より格段にHTML・CSSのことわかってきたもんね。本とか1回も読んだことないのにね。やったね💪( ¨̮ 💪)

これまでやったカスタマイズまとめ記事も作りたいなぁと思いつつ、それをするには時間と手間と気力がちょーっと足りないのであった。

おつかれ自分!