こんにちは、みじゅ(@mijuknit)です。
こっそりと、ブログのサイドバーのフォローボタンと記事内のシェアボタンのカスタマイズをしてみました。
今までもTwitterのデフォルトのフォローボタンはつけていたんですけどね、これからいい感じにリンクを増やせるようにデザインのカスタマイズをしてみたので書いておきます。
私が欲しかったボタン
相変わらずwebデザイン初心者で検索能力も低いので、コピペOKで配布してくださっているサイトからお借りしてわかる範囲で自分好みにいじるという方法をとりました。
フォローボタン
- サイドバーに横長のボタンを並べる
- シンプルなデザイン
- 今後ボタンが増えてもいいような配置にする
とりあえずTwitter、Instagram、Creemaのボタンを置くことにしました。
シェアボアン
- 記事の最後にライン的に表示する
- 文字がなくてもわかりやすい
- シンプルなデザイン
あんまり目立たなくてもいいけどわかりやすくてすぐ押せるボタンにしようと思ってました。
フォローボタンの参考記事
▼こちらの記事を参考にしました。
サイドバーに入れるというところのコードをコピペさせていただいてます。
変更箇所
HTML
はてな・Twitter・Feedlyの順になっていますが、Twitter・Instagram・Creemaに変えてボタンのクラス名やURLも書き換えました。
InstagramのマークをFontAwesomeからもってきて、Creemaのマークはないのでイメージに合いそうなこのウェブフォント→ を使ってみました。
HTMLを確認したらCSSを貼り付けてプレビューで確認しながら変更を加えます。
リンク先に合わせたボタン色に変更
Twitterはそのままで、Creemaのボタンははてなと同じ色、Instagramはイメージに近い色(#c6529a)に変えました。
ボタン背景色 #fff→transparent
使っているテーマがサイドバーに色がついているものなので、これだけ大きいボタンで背景が白だと違和感があって背景色なしにしました。
ボタン内文字サイズ 10px→12px
10pxだとお洒落なんですけど若干小さくて読みづらいかと思って変更しました。パソコンで見たから余計かもしれません。
「フォローする」の装飾
サイズ110%の太字にして、border-bottomを 2px dashed #cccに設定しました。点線が結構かわいくて気に入ってます。
シェアボタンの参考記事
▼こちらの記事を参考にさせていただきました。
アイコンタイプのコードをコピペさせていただきました。
変更箇所
HTML
google+のボタンをFeedlyに変更しました。クラス名とマークを変えてCSSでボタン色も変更。
ボタンの形
アイコン風のシンプルさを活かしてボタンの形は変えてしまいました。
border-radiusをなしにして、widthを等分(ボタン5個なので20%)に変更。このままだとズレてしまうのでmargin-rightを0にして一本のライン状にします。
「シェアする」の装飾
文字サイズ12pxにして、フォローボタンと同様に太字とグレーの点線の装飾にしました。
ボタンと文字の距離が近かったのでボタン部分にmargin-topを10px追加しました。
感想
数日前に設定したのにもう記憶が薄れかけています。書きもらしてる部分もあるかもしれませんが・・。
文字にしてみるとたったこれだけですが自分で考えながらいじっているとなかなかうまくいかない所があったりして、その都度調べながらやっているとかなり時間がかかりました。毎度の事ながら。
100%求めている通りの見た目にできたわけではないのですが、後付け後付けでもある程度近づけられるということであったり、妥協するポイントであったり、勉強になりました。
いろいろなデザインのカスタマイズはこうしたいなという思いはあっても時間がかかるのでつい遠ざけてしまうんですけど、時間を作って勉強しながらやってみるようにします。
このフォローボタン・シェアボタンも本当はこの時に一緒にやりたかったんです。
今回学んだ事は、クラス名をよく見るという事でしたｗ
ひとつ変えると知らない所で同じクラスがついていて意図しない所まで変更されてしまうという。 いじる前にどこがどうなっているか把握しておくと良いのでしょうかね。アルファベットは目が滑るとか言ってられませんね。頑張ります。
では、ご覧いただきありがとうございました！
