数多くあるSNSボタン。
今回は私の厳選SNSボタンを紹介します。
カラーボタンはマウスを重ねると色が反転します。
モノクロボタンは平面的でシンプルなデザインです。
二つともとても気に入ってます。
私はフォローボタンとして使用してます。
httpsのコードなので外部読み込みです。
<script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>
記事本文ですよ。
<ul class="snsbtniti">
<li><a href="https://twitter.com/sinjotigers" class="flowbtn4 fl_tw2">
<i class="fab fa-twitter"></i><div>Twitter</div></a></li>
<li><a href="https://www.instagram.com/sinjotigers/" class="flowbtn4 insta_btn2">
<i class="fab fa-instagram"></i><div>Instagram</div></a></li>
<li><a href="https://www.youtube.com/user/sinjonrp/featured" class="flowbtn4 fl_yu2">
<i class="fab fa-youtube"></i><div>YouTube</div></a></li>
</ul>
外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。
/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時テキストカラー */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn4.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}
/* YouTube */
.flowbtn4.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;
font-weight:bold;
position:relative;
bottom:0px;
}
.fab{
margin-top:10px;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:flex-end;
padding-right:50px;
}
/* ボタン同士の余白 */
.snsbtniti li{
text-align:center;
letter-spacing:0em;
padding-right:10px;
list-style-type:none;
}
@media screen and (max-width:568px){
.snsbtniti{
padding-right:10px;
}
.flowbtn4{
width:60px;
height:60px;
}
.flowbtn4 div{
display:none;
}
.fab{
margin-top:15px;
}
}
sinjotigersは私のアカウントです。
See the Pen
Untitled by マージン (@sinjotigers)
on CodePen.
これもフォロー用として使用してます。
httpsのコードなので外部読み込みです。
<script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>
記事本文ですよ。
<footer id="footer">
<div class="navi-row">
<ul class="sns-navi">
<li><a href="https://twitter.com/sinjotigers">
<i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.youtube.com/user/sinjonrp/featured">
<i class="fab fa-youtube"></i></a></li>
<li><a href="https://www.instagram.com/sinjotigers/">
<i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</footer>
外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。
#footer {
position: relative;
margin-top: 40px;
color: #fff;
padding: 40px 20px;
background: #333;
}
#footer a {
text-decoration: none;
color: #fff;
}
#footer a:hover {
text-decoration: underline;
}
@media screen and (max-width: 767px) {
#footer {
padding: 20px 20px;
background: #333;
}
}
.navi-row {
display: flex;
margin-top: 40px;
}
@media screen and (max-width: 767px) {
.navi-row {
display: block;
margin-top: 15px;
}
}
/* sns-navi */
#footer .sns-navi {
margin: 0 0 0 auto;
padding: 0;
}
#footer .sns-navi li {
display: inline-block;
margin: 0 20px 0 0;
padding: 0;
font-size: 20px;
}
#footer .sns-navi li:last-child {
margin-right: 0;
}
@media screen and (max-width: 767px) {
#footer .sns-navi {
margin: 20px 0 0;
padding: 0;
}
#footer .sns-navi li {
margin: 0 20px 0 0;
padding: 0;
font-size: 18px;
}
}
/* sitenavi */
#footer .sitenavi {
width: 50%;
margin: 0;
padding: 0;
list-style: none;
}
#footer .sitenavi li {
display: inline-block;
margin: 0 0 0 20px;
padding: 0;
}
#footer .sitenavi li:first-child {
margin-left: 0;
}
@media screen and (max-width: 767px) {
#footer .sitenavi {
width: 100%;
text-align: center;
font-size: 12px;
}
}
sinjotigersは私のアカウントです。
See the Pen
Untitled by マージン (@sinjotigers)
on CodePen.
今後はシェアボタンの解説もやっていきます。