前回で終わっておけば良かったのに
同じ記事の中でSimplicity Hacksさんが
次に紹介なさっていたSNSボタンのカスタマイズがどうしてもやってみたくて
無謀にもそのコードに変更を加えるとこまでやってみました！！！！
さて・・・
今日は何時間かかったのかな？笑
超初心者がSimplicity2のカスタマイズに挑戦！
同じ記事の中で、次に紹介なさっていたカスタマイズ方法、
「ボタンの背景がグレーでアイコンが白抜きのボタン」もやってみたくなりました。
いそいそと前回貼りつけた
「SNSシェアボタンのCSSコード」と
「ホバー時にアイコンの色を変えるCSSコード」を切り取ってメモ帳に貼りつけて保存。
（均等割りのコードはそのまま貼りつけたままです）
そのまま追加CSSに
「ボタンの背景がグレーでアイコンが白抜きのボタン」のコードを貼りつけてプレビュー。
いやーんステキ！！
シンプルすぎるわたしの記事には
ボタンの幅が並んでいた方がアクセントになっていいかも！！とゴキゲンに。
今度のボタンはマウスをのせると
（この行為はマウスオーバーとか、ホバーとかいうそうです）
色がちょっとうすくなるんだ。シャレオツ！！
マウスをのせたら、
グレーのボタン部分の色が
それぞれのアイコンのカラーになったら
もっとわたし好み・・・。
これが 
こうなったらいいのにな・・・と。
CSSにもちょこっとだけ慣れたし
要するに一個目の編集の反対をすればいいってことだよね？
やってみる？？と思って、
結果。
できました。
自作コードでSNSシェアボタンの色は変えられました！
サラッと、
できました。って言いましたが半日かかったよ！！笑
自分が初心者ってことを棚にあげすぎたよ！
ほんんっとうに色んなことをしまくって
レッツ検索しまくって
同じコードを気づかず２回貼り付けちゃったりしましたが
そこいらへんはサクッと流して。
まず
１、Simplicity Hacksさんのサンプル②の
「各SNSボタンの色 （最後が＃bbb で終わるコード）」を
「追加CSS」に貼ってから
↑
２、このコードの上から下までをコピーして
「追加CSS」に貼ってもらえると
マウスをボタンにのせるとアイコン自体のテーマカラーになるボタンができます！！
（このコードには LINE のコードが付け足してあります～。）
がんばったかいがありました。
いろいろいじって、切り取ったり貼りつけたりして
最終的に
わたしがCSS編集に貼りつけたコードはこの６つです。
１、Simplicity Hacksさんのコード その❶
シェアボタンサンプル②「各SNSボタンの色」のコードを
そのままコピー＆貼り付けさせていただきました。
２、Simplicity Hacksさんのコード その❷
シェアボタンサンプル②「ホバー時」コードに自作カスタマイズを加えたコード
（CodePenで加工して、ブログに貼り付けられるようにしたものを上に載せてます）
２、アイコンの文字を消すコード
↓
前回つかわせてもらった、
「通常はグレーのアイコンで、マウスオーバーすると色がかわるアイコン」の時は
なにもしなくても各SNSの名前が消えてたのですが
基本の
「グレーのボタンに白抜きアイコンになるコード」をいじってしまったためか
LINE、 twitter、などボタンの中に文字が表示されちゃったので
この文字を消すためのコードを貼りました。
３、アイコン内の「押した人」の数字表示を消すコード
いっぱい押してくれてたらいいけど
基本ゼロばっかりなんでちょっと恥ずかしくて消してみました～笑
４、アイコンの文字を少し大きくするコード
こちらのコードもSimplicity Hacksさんの サイトからお借りしました。
シェアボタンサンプル①のコードの中に入っていますよ～。
LINE や facebook の字や数字が消えたら、
ボタンに対してアイコンがちょっと小さいような気がするので
大きくしてみました。
貼りつけたいコードをコピーしてきて
「追加CSS」に貼るだけなので２以外はとても簡単でしたよ！！
記事の中で、
最初はボタンの色は全部グレーで、マウスの↖をボタンの上にのせると
facebookのボタンだったらブルー、
LINEのボタンだったらグリーン、に変わるようにしたわけですが
サイトを表示すると、
ボタンの中の数字の表示が「待機中」みたいにクルクルまわってて
なかなか数字が出てきませんでした。
アイコンだけ色を変えた時より、
ボタン全体の色が変わるので範囲が広くなったせい？
数字を消したらすぐボタンが表示されるようになったので
やっぱり重かった、ってことでしょうか？
知りたい情報があって検索しても
見たいページが出るのに２秒以上かかると
検索者は「戻る」ボタンを押してしまうそうなので
なるべくサイトは軽量化が必要だそう。
カスタマイズは楽しいけどほどほどが必要なんですかね～。
もっと勉強してちゃんとワードプレスのことが分かるようになりたいです！
まとめ
たぶんこんなにいくつもコードを貼らなくても
できる人はきっともっとコードをいじって
２つくらい貼り付けたらできると思うんですよ。
もっと頑張れば、なんかできそうな雰囲気があるんですけど
たぶん気のせいだし、
ちゃんとできなくてブログがまた崩れそうな気がするし
また復旧に3日くらいかかる気がします・・・。
あんまり貼り付け過ぎても重くなるのかな？そのへんはさっぱり分からない・・・。
とりあえず、思っていた通りにできたので良し！！
参考になるかわかりませんが良かったら試してみてください。