ライフハック読み物

[Blogger]日本語テンプレートVaster2にLINEで共有するボタンを実装する(CSS編)

大変な作業だったので今からやる人は苦しまないですむといいなあ…

前の記事から引き続き…

[Blogger]日本語テンプレートVaster2にLINEで共有するボタンを実装する(HTML編)

当ブログは今のところVaster2を使用してます。

非常に便利かつ遊びやすいので導入してみてくださいね。

Vaster2|レスポンシブ対応済みのblogger日本語テンプレート
http://toumaswitch.com/vaster2/

CSSを編集しましょう

編集するのは一箇所。先程潰したボタンを忘れてたら思い出して下さい。

僕の場合はpocketのボタンを変更したので、

HTMLをpocketで検索します。

以下の画像みたいなのが出てくるので、適用した大文字の部分をしっかり大文字で一番上を書き換え。

その他は小文字でlineに変更します。

以下の状態にまずはしてください。

ここの文字が先程変更したものと対応してないとCSSが適用されず、なんか青い字でダサいのが出て来るのでそうなってた場合はちゃんと同じか確認して下さい。

僕はlkneになってました。

ボタンのcolorを変更しましょう。

ボタンのカラーコードをどっかから拾ってきます。LINEの場合は#00c300でした。

Vaster2のボタンは枠、アイコンフォント、文字色すべて一色で統一されています。

なので、pocketの場合は赤一色、#f03e51になってるのを全部#00c300に変えて上げて下さい。

どれか残ってるとなんともクリスマスな感じになります。なりました。

以上で完了です！

もしかすると他のサービスのボタンも作れるかもしれませんね。

潰すボタンはFacebookはおすすめしません、結構大仕事になりそうなので。

HTMLもCSSの知識も全然ありませんがなんとかなりました。アホアホ知識で書いた記事なので知識人の方はこうした方がいいよなどアドバイスくれるとありがたいです。

当記事が参考になったらはてブかTwitterでツイートお願いします。

前の記事はこっちです。

めっちゃ追記してます。追記した内容を行わないと挙動不審になるのでチェックをお願いします

[Blogger]日本語テンプレートVaster2にLINEで共有するボタンを実装する(HTML編)