STORK19のSNSアイコン色の変更

モバイルファースト設計でスマホからでもデザインが見やすい、STORK19！

このサイトでも使用しているテーマです！

超超初心者の私もあまり迷うことなくブログ運営ができています。

ただデフォルトだとSNSのアイコンの主張が強いんですよね…

どうにかこうにか、CSSでアイコンカラーを薄くすることができたのでメモ。

ブログ開設の様子はこちら！

Contents

追加CSS

こんな感じに変更↓

/twitter/
.sns_btn__li.twitter .sns_btn__link {
background: #1DA1F2;
opacity: 0.6;
box-shadow: none;
border-radius: 0px;
}

twitterの部分を各SNSの名前に変えるとそれぞれのアイコンで使えます。（twitter・facebook・hatebu・line・pocket・pinterest）

background:の後は背景の色

opacity:の後の数字は透過率。1.0が透過0

box-shadoe:none;でボタンの影はなくしました。

border-radius: はボタンの角を丸めるかどうか。数字を増やすと丸くなります。

コードなんて何もわかっていない初心者がやっています。使う際は注意！

アイコンの文字とマークと枠を色付きにして、背景を白くしたいんだけどな…

わからない…

アイコンが白いままなのはなぜだ…