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

えむしてっく

主にはてなブログのカスタマイズやapple製品関連の記事など。

スポンサーリンク

【CSS】急がば急いで回れ、さんのSNSボタンの着替えを作りました

f:id:mshimfujin:20161104003938j:plain

今回紹介するのはgeorge-gogo(急がば 急いでまわれ!)さんが紹介されているSNSボタンの着せ替えCSSです。

はじめに

メインブログのえむしとえむふじんがあらわれたは、妻のえむふじんがカラーで絵を描いて、それがメインコンテンツになっています。

ですので、それを邪魔しないように、ブログはなるべくモノトーンかつシンプルで主張の少ないデザインで行こうと言う方針でやっています。

もともとSNSのフォローはgeorge-gogoさんのこちらを使わせていただいていましたが、カラーの部分を抑えたいと思い、CSSをリデザインしました。

georges.hatenablog.jp

単にカラーな部分を抑えるだけでは面白くないので、ボタンのアニメーションもフォーカスする感じに変えてみました。

htmlは急がば 急いでまわれ!のところで使われているのをそのままに、見た目だけ変えてしまおうと言う、ズボラなカスタマイズです。

実物

実物です。こちらのボタンの素晴らしいところは、Flexboxと言うのを使って設計してある点です。(設計されたのはgeroge-gogoさんです。)項目を増やしたり減らしたりしても、横幅が変わらないんですよ。

例えば二つに減らしても

この通り。

ちなみに、Flexboxの存在を知るきっかけになったのも急がば 急いでまわれ!SNSボタンからです。
それで下記のヨメレバカエレバを作るキッカケになりました。

mshitech.hatenablog.com

色々と勉強になって楽しく制作出来ました。

脱線しましたが見た目の説明を。初期状態ではグレーにアイコンと文字だけの非常にシンプルなデザインです。そこからカーソルを重ねるとフォーカスするイメージでアニメーションさせてみました。

設置方法

georges.hatenablog.jp

をよく読んで、htmlを設置してください。リンクの貼り方など、分かりやすく書いてあるのですぐわかると思いますよ。

そして、CSSの部分だけ当サイトの物を貼り付けてください。

以下、CSSのコードです。

CSS

/ george-gogoさんのフォローボタン着せ替え /
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 transition: all 0.6s ease;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.follow-btn li:hover {
  transform: scale(0.9); / 変化するボタンの大きさ /
}
/ hatena /
.btn1 a, .btn2 a, .btn3 a, .btn4 a{
 color: #5d5d5d;
 background-color:#f8f8f8;
 transition: all 0.6s ease;
}
/ hatena /
.btn1 a:hover {
 color: #fff;
 border: solid 1px #5d5d5d; / ボーダー色 /
 background-color: #5d5d5d; / カーソルを重ねた時の背景色 /
}
/ twitter /
.btn2 a:hover {
 color: #fff;
 border: solid 1px #6FB6C3; / ボーダー色 /
 background-color: #6FB6C3; / 背景色 /
}
/ feedly /
.btn3 a:hover {
 color: #fff;
 border: solid 1px #82C36F; / ボーダー色 /
 background-color: #82C36F; / 背景色 /
}
/ facebook /
.btn4 a:hover {
 color: #fff;
 border: solid 1px #6998b9; / ボーダー色 /
 background-color: #6998b9;/Facebookの背景色/
}
.btn1-icon:before{
 content: "\f000";/はてなアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/Twitterアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/Feedlyアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";/Facebookアイコン/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
}

以上です。

あれこれと試行錯誤している間はは楽しいですね。

ではでは、また次の記事で・・・

george-gogoさんもオススメのCSS解説本。