各SNS(Instagram・Facebook・Twitter・LINE)のアイコンは使う機会が多いと思うので、テンプレ化。
- アイコンの色が変わる
- アイコンの色が変わる(背景を白抜き)
- 正方形で白抜き
- 円で白抜き
- アイコンの背景色が変わる
- 背景が正方形
- 背景が円
他のSNSアイコンなどにも使い回せるはず。
ただし、アイコンの形(四角い or 円形 or 他)と背景の形(正方形 or 円)の組み合わせによっては微妙にダサくなる場合もあるので注意。
Instagramアイコンの背景色(グラデーションのCSS)は以下のサイトより。
文具女子博|すべての文具好きに贈る日本最大級の文具の祭典
ソースコード
アイコンの色が変わる
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<ul class="pattern-01"> <li> <a href="#" class="icon-wrap icon-wrap-facebook"> <i class="fab fa-facebook fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-twitter"> <i class="fab fa-twitter fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-line"> <i class="fab fa-line fa-3x"></i> </a> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* アイコンの色が変わる */ .pattern-01 .icon-wrap { display: block; color: black; } .pattern-01 .icon-wrap:hover.icon-wrap-facebook { color: #1877f2; } .pattern-01 .icon-wrap:hover.icon-wrap-twitter { color: #1da1f2; } .pattern-01 .icon-wrap:hover.icon-wrap-line { color: #00B900; } |
アイコンの色が変わる(背景を白抜き)
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!-- 背景を正方形で白抜き --> <ul class="pattern-02 square"> <li> <a href="#" class="icon-wrap icon-wrap-facebook"> <i class="fab fa-facebook fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-twitter"> <i class="fab fa-twitter fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-line"> <i class="fab fa-line fa-3x"></i> </a> </li> </ul> <!-- 背景を円で白抜き --> <ul class="pattern-02 circle"> <li> <a href="#" class="icon-wrap icon-wrap-facebook"> <i class="fab fa-facebook fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-twitter"> <i class="fab fa-twitter fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-line"> <i class="fab fa-line fa-3x"></i> </a> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* アイコンの色が変わる(背景を白抜き) */ .pattern-02 .icon-wrap { display: block; color: black; } .pattern-02 .icon-wrap.icon-wrap-facebook, .pattern-02 .icon-wrap.icon-wrap-twitter { /* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */ padding: 7px; } .pattern-02 .icon-wrap.icon-wrap-line { /* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */ padding: 7px 10px; } .pattern-02 .icon-wrap:hover { background-color: white; } .pattern-02.square .icon-wrap:hover { border-radius: 25%; /* 正方形 */ } .pattern-02.circle .icon-wrap:hover { border-radius: 50%; /* 円 */ } .pattern-02 .icon-wrap:hover.icon-wrap-facebook { color: #1877f2; } .pattern-02 .icon-wrap:hover.icon-wrap-twitter { color: #1da1f2; } .pattern-02 .icon-wrap:hover.icon-wrap-line { color: #00B900; } |
アイコンの背景色が変わる
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<!-- 背景が正方形 --> <ul class="pattern-03 square"> <li> <a href="#" class="icon-wrap icon-wrap-instagram"> <i class="fab fa-instagram fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-facebook"> <i class="fab fa-facebook fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-twitter"> <i class="fab fa-twitter fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-line"> <i class="fab fa-line fa-3x"></i> </a> </li> </ul> <!-- 背景が円 --> <ul class="pattern-03 circle"> <li> <a href="#" class="icon-wrap icon-wrap-instagram"> <i class="fab fa-instagram fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-facebook"> <i class="fab fa-facebook fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-twitter"> <i class="fab fa-twitter fa-3x"></i> </a> </li> <li> <a href="#" class="icon-wrap icon-wrap-line"> <i class="fab fa-line fa-3x"></i> </a> </li> </ul> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
/* アイコンの背景色が変わる */ .pattern-03 .icon-wrap { display: block; color: black; } .pattern-03 .icon-wrap.icon-wrap-instagram { /* Instagramのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */ padding: 7px 9.125px; } .pattern-03 .icon-wrap.icon-wrap-facebook, .pattern-03 .icon-wrap.icon-wrap-twitter { /* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */ padding: 7px; } .pattern-03 .icon-wrap.icon-wrap-line { /* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */ padding: 7px 10px; } .pattern-03 .icon-wrap:hover { color: white; } .pattern-03.square .icon-wrap:hover { border-radius: 25%; /* 正方形 */ } .pattern-03.circle .icon-wrap:hover { border-radius: 50%; /* 円 */ } .pattern-03 .icon-wrap:hover.icon-wrap-instagram { /* 【参考】 https://bungujoshi.com/ */ background: -webkit-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -webkit-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%); background: -moz-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -moz-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%); background: -ms-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -ms-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%); background: -o-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -o-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%); background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%); } .pattern-03 .icon-wrap:hover.icon-wrap-facebook { background-color: #1877f2; } .pattern-03 .icon-wrap:hover.icon-wrap-twitter { background-color: #1da1f2; } .pattern-03 .icon-wrap:hover.icon-wrap-line { background-color: #00B900; } |
コメントを残す