読者です 読者をやめる 読者になる 読者になる

とまじぃさんち

役に立つかは読み手次第。判断は丸投げでなんでも書きまくります♪

テーマ「Brooklyn」に合わせてフォローボタンのデザインをいじってみた。

インターネット

昨晩デザインを

shiromatakumi.hatenablog.com

こちらのBrooklynに変更いたしました。

モノトーンのオッシャレなテーマで超クール♪

 

どうせならフォローボタンも

デザインを変更したものの、サイドバーのフォローボタンだけちょっと浮き気味。

f:id:tomag:20160306092446p:plain

ちょいとこのテーマに合うようにいじってみるかぁ!
(ちなみにCSSの知識とかは10年前にかじった程度であるw)

クールな感じで丸いのにしよう

元々こちらのサイトを参考にフォローボタンを設置していたので

www.yukihy.com

その中からかわいい感じの丸パターンを使用することに。

f:id:tomag:20160306093008p:plain

おお!なかなかいい感じ♪

画像とか使わなくてもこんな丸いのとかできちゃうんだねぇ。
知らない間にCSSってのも進化したもんだ♪

気分的にアイコンもうちょいでかくしたい

あくまでも好みの問題なんだけど、もうちょいはてなとかツイッターのアイコン大きくしたいし、文字もでかくしたいなぁ。

どこをいじれと?wwww

まぁいいや適当にいじればどうにかなるだろ(投げやり

勘でいじり始めたのだが

適当に色んな所の数字を変えながらいじりはじめてみた

f:id:tomag:20160306093601p:plain

あぁ??? なんかFeedlyのアイコン飛び出しちゃってるよwww

大丈夫!こういうのってまーじんとかパッディングとかいじれば解決するんだよ。俺知ってる!!

まーじんとかぱっでぃんぐいじってみた

てっきとう!てっきとう!どうにかなるさぁ~♪

f:id:tomag:20160306093945p:plain

Why??????

全然わっかりませ~んwww

試行錯誤の末

調べてみた結果、なんか詳しいことはわかりませんけど、heightとpaddingが親密な関係とかで余白がえ~とプラスされると、え~と・・・。

つまり適当にうまく調整しろってことらしいです♪

で、まぁ様子見ながら微調整したり、brooklynに合わせてモノトーンに変更したりアイコンサイズ調整したり、小一時間かかって調整した結果がこちら。

f:id:tomag:20160306094611p:plain

いいねぇ!渋い(自画自賛w

そしてマウス乗っけた時だけカラーになります♪

f:id:tomag:20160306095222j:plain

(これは元の設定残してるだけなんで俺は何もしてませんがw)

とりあえずCSS置いときます

需要あるかどうかわかりませんがCSS置いておきますね。

と思ったら今日に限って「見たまま編集」で書き始めちゃったんでソース貼れないやん(汗)

しょうがないGIST使うかw

gist2f7e05bca226a2eb3fbd

まとめ

自分的に試行錯誤系作業は非常に好きだって事を再確認してしまいました。

これにハマったら記事とか書かずに一日中カスタマイズしてしまいそうでヤバいやつです(笑)

もう金輪際いじりませんよ!!!!絶対に・・・たぶん・・・。うん、今日はもういじらないw