なんかなろう系の小説みたいなタイトルになっちゃった。
ブログを作ったから、やっぱりおしゃれにしたいとか思うわけで。
私はコードとかちんぷんかんぷんなので、出来る人たちが残してくれているコピペだけでオッケー!!!というのに本当に助けられている。
で、今回はSNSのシェアボタンをおしゃれにしたいなと思って、それに取り組んだんだけど、知識なし人間には大変だった!!!
しかも結局理想通りにはなっていない…。
ゆくゆくは直せたらいいなと思うけど、ひとまず現状をせっかくなので、覚えている範囲だけど残していこうと思う。
デフォルト
まずは何もしていない状態。あれ？なんかツイッター変だな。まぁいいや。大体こんな感じ。
前にやってたブログの時から変わらないこの凸凹デザイン。
はてなブログさん、ここら辺綺麗にならないもんかな。
見た目もだけど、色々探してると結構このシェアボタンが重いらしい。
ということで、おしゃれにカスタムしてる人のブログを探しまくる。
試してみた物
1，ブログテーマのシェアボタン
私ははてなブログのテーマで「Haruni」という物を使っている。
そこで開発者さんが提示してくれてるカスタムがあったのでまずはそれを見る。
これに従って色々進めると。
こんな感じ。
でも、グーグルなんちゃらはなんか機能してないとかなんとか。
要するに私はいらない。右端のポケット？も馴染みがないしわかんない。
あとLine入れたいなぁ。
ということで、色々探し始めるたんだけど、まぁこっからが大変。
コードとかの知識とかがあれば自分でどうにか出来るんだろうけどさぁ。
2，フジブロっ！さん
この方ほんと凄いなって思う。
PCとは無縁状態から、ここまで出来るってすごい。
で、書いてある手順通りにコピペをせっせと。
私は塗りつぶしっていうのを選んで作業したんだけど、結果はこう。
んんん？
まず小さいし、色もブログデザインの色。
しかもこの点々は何でしょうか？？？？
色々見てみたけど、私にはどうにもならん。
もしかしたら、テーマの影響でどうしようもないのかも？
と思い他を試す。
3，SHIROMAGさん
こちらの方も、たくさんのタイプのシェアボタンを作っていて、凄い～～～!!!
で、丸い埋め込みっぽいのをやってみる。結果はこう。
わぁお。
FacebookとPoketのアイコンが可笑しなことに。
これはなんか、アイコンのバージョンがどうとかってやつかしら。
Font Awesomeってのが関係してるらしい、みたいなのはいろんなサイト見てたらわかってきた。
ピンタレストも載せたいとか迷走
ここでは二つしか載せてないけど、多分他にも色々ためした。
こういう時、せっかくだったら記録残してたほうがいいね。
あれ？このサイトのは試したっけ？ってのが自分でもわからなくなる。
ちなみに欲かいてピンタレストのシェアボタンとかもいいなぁとか思い始める。
もう多分、頭働いてない(笑)
だって、こんな素敵なサイトがあったんですもの。
あ、このサイトはサイト上の色を調べる方法を探して行きついた。
便利だわぁ。
検証ってのでサイトのこと見て（よくわかりもしないのに）この部分がこうなってるのはこれのせい？とか思ったけど結局よくわからなかった。
自分でやってみる
で、色々やった末に、1をベースに２，３のサイトのコードをメモに張り付け、比べたり張り付けたり色々した。
Lineのアイコンがなかったから、色を調べたり、Font Awesomeに行ってそれぞれのアイコンのコードをコピーしたりして、なんかそれっぽい物ができた!!!
それがこれ。
PoketとLineのアイコンが記事上で確認できた時は、嬉しかった!!!
Font Awesomeのバージョンはよくわからなかったけど、facebookのアイコン調べた時のバージョンにした。
一度はコードを貼ろうかとも思ったけど、製作者さんからするとアレンジした物でもコード載せられるのってどうなんだろう？と思ったので辞めといた。
まぁ貼ったとしても自己責任でお願いします!!!になるだろうし。
やったこと
- 元のコードからグーグル関係を消した
- それぞれのアイコンのコードをFont Awesomeからコピーして貼り付け
- 他のアイコンの見様見真似でline部分を作った
- アイコンの上にコメントを入れた
まとめ
結局最後まで色を変えることが出来なかった!!!
くそ～～～～～!!!
多分色とかの指示とかを出さないといけないんでしょ？
でもまぁ、コードさっぱりわからない人間の最初にしては良いのかも、これからじっくりやってこー。
いろんな人のサイトやブログを見たのも勉強になったと思う。
あ、記事の下に色付きのシェアボタンあるじゃん!!!とか思われた方。
そうなんです。なんか翌日出来ちゃったんです。
それも追々書こうと思います。
