SNSアイコンソースコードコピペOK

2023年10月7日 17:42

個人事務所のWebサイト制作していると、SNSアイコンをサイトの一番下などに付けるじゃん？
その方が、訪問ユーザーはその人のSNSにすぐに飛んで、普段からの情報発信を知れて信頼できる人かどうか？判断できるわけだし。
双方にとって良いよね、実装した方が。
無いよりは、あった方が良いよね。
余程、逆ブランディングになって、SNSで信頼を失わない情報発信していない限り。
ってことで、そのコピペで使えるソースコードを教えます！
よかったら、使っていってね。

ぶっちゃけ他のサイトからのパクリです。
しかし、実際にコピペしたらレイアウト崩れるし、情報が古かったんだよね。
だから、最新版2023年10月版にしたよ。

完成形

これ、地味に実装めんどうなんだよね。
横並びや横間隔や縦間隔など。
しかも、fontawesomeフォントオウサムって英語だからわからん人にはわからんよね。
けど、これは世界一有名で使われているアイコン実装サイトだから、Webサイト制作者やWebデザイナーやコーダーはぜひ覚えておくといいよ。
ちな、俺は英語ちょいペラペラだから、何の抵抗もなく読んで使えてるよ。
これは俺のWeb制作での強みだね、うん。

HTML

<ul class="snsbtniti">
<li><a href="#" target="_blank" class="flowbtn9"><i class="fa-brands fa-youtube"></i></a></li>
<li><a href="https://twitter.com/###" target="_blank" class="flowbtn9"><i class="fa-brands fa-x-twitter"></i></a></li>
<li><a href=" https://www.instagram.com/###" target="_blank" class="flowbtn9"><i class="fab fa-instagram "></i></a></li>
<li><a href="https://www.facebook.com/###" target="_blank" class="flowbtn9"><i class="fa-brands fa-square-facebook"></i></a></li>
<li><a href="https://note.com/###" target="_blank" class="flowbtn9"><i class="fa-regular fa-note-sticky"></i></a></li>
<li><a href="https://lin.ee/###" target="_blank" class="flowbtn9"><i class="fab fa-line"></i></a></li>
<li><a href="https://###.com/contact/" target="_blank" class="flowbtn9"><i class="fa-solid fa-envelope"></i></a></li>
</ul>
	
<script src="https://kit.fontawesome.com/c2afdbaf0b.js" crossorigin="anonymous"></script>

scriptタグは<body>から</body>までのどこでもOK
まぁ、基本的には一番下に置くかな。

CSS

/* ボタン全体 */
.flowbtn9{
display:inline-block;	
font-size:40px;
text-decoration:none;
transition:.5s;
}
.flowbtn9 .fa-youtube{
color:#fc0d1c;
font-size:40px;
}
.flowbtn9 .fa-x-twitter{
color:#000000;
}
.flowbtn9 .fa-instagram{
color:#D93177;
}
.flowbtn9 .fa-square-facebook{
color:#3b5998;
}
.flowbtn9 .fa-note-sticky{
color:#333333;
}
.flowbtn9 .fa-line{
color:#00c300!important;
font-size:38px;
}

.flowbtn9 .fa-envelope{
color:#32B061;
font-size:38px;
	margin-top: 6px;
}
ul.snsbtniti{
padding:0;
}
/* アイコン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-between;
	width: 360px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 0;
}
/* アイコン同士の余白 */
.snsbtniti li{
text-align:center;
	list-style-type:none;
}
/* アイコンにマウスを乗せた時 */
.flowbtn9:hover{
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
}

以上。

https://kagesai.net/sns-follow-button-design/

から引用してカスタマイズしました。
あざまっす！

てかさ、いつも思うんだけど、コピペして100％そのまま動いた試しって8割くらいしかないんだよね。
2割動かんのよ、思ったとおりに。

たぶん、情報が古いんだと思う。
または、バカかちゃんとテストして見ていないか。

これは俺がちゃんと目視して開発したから、間違いない。
ぜひ、使ってね。

海外のソースコードはLINEないし、noteもないし、だから日本人向けの探すの結構たいへんだったわ。

じゃあの。

この記事が気に入ったらサポートをしてみませんか？

SNSアイコンソースコード コピペOK

完成形

HTML

CSS

SNSアイコンソースコードコピペOK