MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

引用やシェアする際は該当記事または画像のURLを貼っていただければ、ご自由にお使いいただいて構いません。

コンテンツ作成時の参考サイト

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

HTMLとCSSで作る|15種類のSNSアイコンボタン18選

当ページのリンクには広告が含まれています。
HTML SNSアイコンをCSSでカスタマイズ

当記事では、15種類のSNSボタンを作成しました。
すべてコピペで使えます。

SNSボタンデザインCSSサンプル

どのデザインも一部を除き、4つのパターンを作成しました。
そのほか順番、並べる個数、カラー変更も簡単に調整できるよう解説しています。

SNSボタンデザインCSSサンプル29

タイトル下や本文下に使えるシェアボタンサンプルもあります。

カゲオ

全部で32パターンあるから目次を活用してね

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

目次

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

SNSアイコンボタンのHTML解説

まずHTMLについて軽く触れておきます。
ここを押さえておけば、自分でカスタムする際もはかどると思います。
CSSについては、各デザインの解説を参考にしてください。

<ul class="snsbtniti">

  <li>
  <a href="エックスのプロフィールURL" class="flowbtn my_x1">
  <i class="fa-brands fa-x-twitter"></i>
  <div>エックス</div>
  </a>
  </li>
  
  <li>
  <a href="インスタのプロフィールURL" class="flowbtn my_instagram1">
  <i class="fa-brands fa-instagram"></i>
  <div>Instagram</div>
  </a>
  </li>

</ul>
  1. snsbtnitiは、ボタンの外枠全体の指定。
  2. 各URLはご自身のものを入れてください。
  3. flowbtnは、ボタン内のデザインや大きさの指定。
  4. my_〇〇1は、各SNSの背景色などを個別に指定するもの。
  5. iタグは各アイコンのコード
  6. divタグで囲んであるのがボタン周辺に表示されるテキスト。
  7. 不要なボタンは<li>〜</li>タグを削除してください。
    並び替える際も同様です。
  8. 上から順番に画面の左上から並びます

ボタンデザインにより、各classに番号が割り振られていたり、削除してあるものもあります。
例えば、snsbtniti2flowbtn3など。
それでも基本は上記と同じですので、調整する場合は参考にしてください。

SNSボタンに使うアイコンコード

fontawesome公式サイト

当記事のサンプルでは、Font Awesomeを使用しています。
※.無料、商用利用可
ただしバージョンは6.4.2以降のものを読み込んでください。
それ以前のバージョンだとエックス(旧Twitter)のロゴが使用できません

ここではCDNで読み込む2つの方法とfunctions.phpから読み込む方法を解説します。

以下が2024年3月時点の最新コードです。
6.5.1“がバージョンの指定。
アップデートされたらここを変更すれば、最新のアイコンを使用できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

①headタグに読み込ませる

SWELLカスタマイザー

当サイトで使用しているのように、テーマ側のカスタマイザーにhead項目があればそちらに貼り付けてください。
テーマ側にない方はFTPソフトなどで、親テーマから「header.php」ファイルを子テーマへコピーする必要があります

headに読み込ませると、すべてのページに適用してくれます。

②HTMLに直接書く

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<ul class="snsbtniti">
    <li>
    <a class="flowbtn my_x1">
    <i class="fa-brands fa-x-twitter"></i>
    </a>
    <div>エックス</div>
    </li>
      ・
      ・
      ・

今回紹介しているHTMLコードの一番上に貼り付けてください
ただし、この方法はそのページだけしか適用されません。
他のページでアイコンを使う予定がなければ、一番軽いのでおすすめです。

functions.phpから読み込む方法

functions.php編集
function enqueue_scripts(){
	wp_enqueue_style('fontawesome','https://use.fontawesome.com/releases/v6.5.1/css/all.css');
}
add_action('wp_enqueue_scripts','enqueue_scripts');

functions.phpも、すべてのページに適用してくれます。

Font AwesomeおすすめSNSアイコン抜粋

コードアイコン
エックススクエア
<i class="fa-brands fa-square-x-twitter"></i>
エックスロゴ
<i class="fa-brands fa-x-twitter"></i>
Instagramスクエア
<i class="fa-brands fa-square-instagram"></i>
Instagramロゴ
<i class="fa-brands fa-instagram"></i>
Facebookマル
<i class="fa-brands fa-facebook"></i>
Facebookスクエア
<i class="fa-brands fa-square-facebook"></i>
Facebookロゴ
<i class="fa-brands fa-facebook-f"></i>
YouTubeスクエア
<i class="fa-brands fa-square-youtube"></i>
YouTubeロゴ
<i class="fa-brands fa-youtube"></i>
TikTok
<i class="fa-brands fa-tiktok"></i>
Amazon欲しいものリスト
<i class="fa-brands fa-amazon"></i>
LINE
<i class="fa-brands fa-line"></i>
Pinterestマル
<i class="fa-brands fa-pinterest"></i>
Pinterestスクエア
<i class="fa-brands fa-square-pinterest"></i>
Pinterestロゴ
<i class="fa-brands fa-pinterest-p"></i>
はてなブックマーク
<i class="fa-solid fa-b"></i>
Pocket
<i class="fa-brands fa-get-pocket"></i>
Feedlyスクエア
<i class="fa-solid fa-square-rss"></i>
Feedlyロゴ
<i class="fa-solid fa-rss"></i>
楽天ROOM枠線
<i class="fa-regular fa-registered"></i>
楽天ROOM塗りつぶし
<i class="fa-solid fa-registered"></i>
LinkedInスクエア
<i class="fa-brands fa-linkedin"></i>
LinkedInロゴ
<i class="fa-brands fa-linkedin-in"></i>
Discord
<i class="fa-brands fa-discord"></i>
Podcast
<i class="fa-solid fa-podcast"></i>
問い合わせ枠線
<i class="fa-regular fa-envelope"></i>
問い合わせ塗りつぶし
<i class="fa-solid fa-envelope"></i>
プロフィール枠線
<i class="fa-regular fa-user"></i>
プロフィール塗りつぶし
<i class="fa-solid fa-user"></i>

はてなブックマークは「B」アイコンに「!」をあとから追加しています。
楽天ROOMも「R」アイコンであり、正式なロゴではありません
これ以外にも約2,000以上のアイコンを無料使用できますので、当記事のサンプルにご希望のものがない場合はコードを変更して応用してください。

15種類のSNSアイコンボタンCSS|32パターン

①フォント付き四角いカラーボタン

<ul class="snsbtniti">

  <li>
  <a href="エックスのプロフィールURL" class="flowbtn my_x1">
  <i class="fa-brands fa-x-twitter"></i>
  <div>エックス</div>
  </a>
  </li>

  <li>
  <a href="インスタのプロフィールURL" class="flowbtn my_instagram1">
  <i class="fa-brands fa-instagram"></i>
  <div>Instagram</div>
  </a>
  </li>

  <li>
  <a href="FacebookページのURL" class="flowbtn my_facebook1">
  <i class="fa-brands fa-facebook-f"></i>
  <div>Facebook</div>
  </a>
  </li>

  <li>
  <a href="YouTubeのチャンネルURL" class="flowbtn my_youtube1">
  <i class="fab fa-youtube"></i>
  <div>YouTube</div>
  </a>
  </li>

  <li><a href="TikTokプロフィールURL" class="flowbtn my_tiktok1">
  <i class="fa-brands fa-tiktok"></i>
  <div>TikTok</div>
  </a>
  </li>

  <li>
  <a href="Amazon欲しいものリストURL" class="flowbtn my_amazon1">
  <i class="fa-brands fa-amazon"></i>
  <div>ほしいモノ</div>
  </a>
  </li>

  <li>
  <a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn my_line1">
  <i class="fa-brands fa-line"></i>
  <div>LINE@</div>
  </a></li>

  <li>
  <a href="ピンタレストプロフィールURL" class="flowbtn my_pinterest1">
  <i class="fa-brands fa-pinterest"></i>
  <div>Pinterest</div>
  </a>
  </li>

  <li>
  <a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn  my_hatena1">
  <i class="fa-solid fa-b"></i>
  <div>Hatena</div>
  </a>
  </li>

  <li>
  <a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn my_pocket1">
  <i class="fab fa-get-pocket"></i>
  <div>Pocket</div>
  </a>
  </li>

  <li>
  <a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn  my_feedly1">
  <i class="fa-solid fa-rss"></i>
  <div>Feedly</div>
  </a>
  </li>

  <li>
  <a href="楽天ルームURL" class="flowbtn my_rakutenroom1">
  <i class="fa-regular fa-registered"></i>
  <div>楽天ROOM</div>
  </a>
  </li>

  <li>
  <a href="リンクドインURL" class="flowbtn my_linkedin1">
  <i class="fa-brands fa-linkedin-in"></i>
  <div>LinkedIn</div>
  </a>
  </li>

  <li>
  <a href="DiscordのURL" class="flowbtn my_discord1">
  <i class="fa-brands fa-discord"></i>
  <div>Discord</div>
  </a>
  </li>

  <li>
  <a href="PodcastのURL" class="flowbtn my_podcast1">
  <i class="fa-solid fa-podcast"></i>
  <div>Podcast</div>
  </a>
  </li>

</ul>

以下のCSSでアイコンを個別に調整する場合は、flowbtniタグのclassを利用しましょう。
例えば、Podcastなら以下のように指定してください。
.flowbtn i.fa-solid.fa-podcast{
ここにサイズやカラーなどを指定
}

/* ボタン全体の外枠指定 */
.snsbtniti {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  max-width: 350px;/* ボタンを設置する場所の最大横幅 */
  margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
  padding: 0!important;
  list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
  flex: 0 0 33%;/* ボタンを3つ並びへ */
  text-align: center!important;
}

/* ボタン全体 */
.flowbtn {
  font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
  position: relative;
  display: inline-block;
  width: 75px; /* 背景横幅 */
  height: 65px;/* 背景高さ */
  font-size: 30px;/* アイコンサイズ */
  border-radius: 4px;
  color: #fff!important;/* ボタン内カラー */
  transition: .5s;
  text-decoration: none;
  box-shadow: 0 1px 2px #999;
  margin-bottom:10px;/* ボタン下余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn i {
  position: relative;
  top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn div {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0;
}

/* ボタンマウスホバー時少し浮き上がる */
.flowbtn:hover {
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  transform: translateY(-5px);
  text-decoration: none;
  cursor: pointer;
}

/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn i.fa-brands.fa-instagram,.flowbtn i.fa-brands.fa-amazon {
  font-size: 35px;
}

/* エックス背景 */
.my_x1 {
  background: #000;
}

/* Instagram紫グラデ背景 */
.my_instagram1 {
 background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook背景 */
.my_facebook1 {
  background: #1877f2;
}

/* YouTube背景 */
.my_youtube1 {
  background: #da1725;
}

/* TikTok背景 */
.my_tiktok1 {
  background: #000;
}

/* Amazon背景 */
.my_amazon1 {
  background: #ff9900;
}

/* LINE背景 */
.my_line1 {
  background: #00b900;
}

/* ピンタレスト背景 */
.my_pinterest1 {
  background: #bd081c;
}

/* はてブ背景 */
.my_hatena1 {
  background: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena1 .fa-b::after {
  content: "!";
  padding-left: 5px;
}

/* Pocket背景 */
.my_pocket1 {
  background: #ef3f56;
}

/* Feedly背景 */
.my_feedly1 {
  background: #6cc655;
}

/* 楽天ROOM背景 */
.my_rakutenroom1 {
  background: #c61d79;
}

/* リンクドイン背景 */
.my_linkedin1 {
  background: #0a66c2;
}

/* ディスコード背景 */
.my_discord1 {
  background: #7289da;
}

/* Podcast背景 */
.my_podcast1 {
  background: #813BF2;
}

調整する場合は各コメントを参考にしてください。
flex: 0 0 33%;/* 並べるボタンの数 */とは、横幅を100%と考え、自動計算されるものです。
4つ並びにしたければ24%、5つ並びなら19%といった具合に指定しましょう。

はてなブックマークのアイコンは「B」アイコンにafter要素でビックリマーク「!」を後ろに付けているだけなので「B!」というアイコンはありませんので注意。

②枠線バージョン

コードを表示する
<ul class="snsbtniti">

<li>
<a href="エックスのプロフィールURL" class="flowbtn2 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<div>エックス</div>
</a>
</li>

<li>
<a href="インスタのプロフィールURL" class="flowbtn2 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<div>Instagram</div>
</a>
</li>

<li>
<a href="FacebookページのURL" class="flowbtn2 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
<div>Facebook</div>
</a>
</li>

<li>
<a href="YouTubeのチャンネルURL" class="flowbtn2 my_youtube2">
<i class="fab fa-youtube"></i>
<div>YouTube</div>
</a>
</li>

<li><a href="TikTokプロフィールURL" class="flowbtn2 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<div>TikTok</div>
</a>
</li>

<li>
<a href="Amazon欲しいものリストURL" class="flowbtn2 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<div>ほしいモノ</div>
</a>
</li>

<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn2 my_line2">
<i class="fa-brands fa-line"></i>
<div>LINE@</div>
</a></li>

<li>
<a href="ピンタレストプロフィールURL" class="flowbtn2 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<div>Pinterest</div>
</a>
</li>

<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn2 my_hatena2">
<i class="fa-solid fa-b"></i>
<div>Hatena</div>
</a>
</li>

<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn2 my_pocket2">
<i class="fab fa-get-pocket"></i>
<div>Pocket</div>
</a>
</li>

<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn2 my_feedly2">
<i class="fa-solid fa-rss"></i>
<div>Feedly</div>
</a>
</li>

<li>
<a href="楽天ルームURL" class="flowbtn2 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<div>楽天ROOM</div>
</a>
</li>

<li>
<a href="リンクドインURL" class="flowbtn2 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
<div>LinkedIn</div>
</a>
</li>

<li>
<a href="DiscordのURL" class="flowbtn2 my_discord2">
<i class="fa-brands fa-discord"></i>
<div>Discord</div>
</a>
</li>

<li>
<a href="PodcastのURL" class="flowbtn2 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<div>Podcast</div>
</a>
</li>

</ul>

flowbtnmy_〇〇2に変更してあります。

/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}

/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti {
padding: 0!important;
list-style-type: none!important;
}

/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%; /* ボタン3つ並びへ */
text-align: center!important;
}

/* ボタン全体 */
.flowbtn2 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 75px;/* 背景横幅 */
height: 65px; /* 背景高さ */
font-size: 30px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}

/* アイコンの位置を少し下げる */
.flowbtn2 i {
position: relative;
top: 5px;
}

/* ボタン内テキスト調整 */
.flowbtn2 div {
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn2:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}
/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn2 i.fa-brands.fa-instagram,.flowbtn2 i.fa-brands.fa-amazon {
font-size: 35px;
}

/* エックス枠線 */
.my_x2 {
border: solid 1px #000;
color: #000;
}
/* エックスマウスホバー時 */
.my_x2:hover{
border: solid 1px #000;
background-color: #000;
}

/* Instagram枠線 */
.my_instagram2{
border:solid 1px #c6529a;
color: #c6529a;
}
/* Instagramマウスホバー時 */
.my_instagram2:hover {
border: solid 1px #c6529a;
background: linear-gradient(45deg, rgba(254,212,117,1) 0%,rgba(229,61,93,1) 50%,rgba(194,49,134,1) 70%,rgba(156,56,187,1) 100%);
}

/* Facebook枠線 */
.my_facebook2 {
border: solid 1px #1877f2;
color: #1877f2;
}
/* Facebookマウスホバー時 */
.my_facebook2:hover {
border: solid 1px #1877f2;
background-color: #1877f2;
}

/* YouTube枠線 */
.my_youtube2 {
border: solid 1px #da1725;
color: #da1725;
}
/* YouTubeマウスホバー時 */
.my_youtube2:hover {
border: solid 1px #da1725;
background-color: #da1725;
}

/* TikTok枠線 */
.my_tiktok2 {
border: solid 1px #000;
color: #000;
}
/* TikTokマウスホバー時 */
.my_tiktok2:hover {
border: solid 1px #000;
background-color: #000;
}

/* Amazon枠線 */
.my_amazon2 {
border: solid 1px #ff9900;
color: #ff9900;
}
/* Amazonマウスホバー時 */
.my_amazon2:hover {
border: solid 1px #ff9900;
background-color: #ff9900;
}

/* LINE枠線 */
.my_line2 {
border: solid 1px #00b900;
color: #00b900;
}
/* LINEマウスホバー時 */
.my_line2:hover {
border: solid 1px #00b900;
background-color: #00b900;
}

/* ピンタレスト枠線 */
.my_pinterest2 {
border: solid 1px #bd081c;
color: #bd081c;
}
/* ピンタレストマウスホバー時 */
.my_pinterest2:hover {
border: solid 1px #bd081c;
background-color: #bd081c;
}

/* はてブ枠線 */
.my_hatena2 {
border: solid 1px #1ba5dc;
color: #1ba5dc;
}
/* はてブマウスホバー時 */
.my_hatena2:hover {
border: solid 1px #1ba5dc;
background-color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena2 .fa-b::after {
content: "!";
padding-left: 5px;
}

/* Pocket枠線 */
.my_pocket2 {
border: solid 1px #ef3f56;
color: #ef3f56;
}
/* Pocketマウスホバー時 */
.my_pocket2:hover {
border: solid 1px #ef3f56;
background-color: #ef3f56;
}

/* Feedly枠線 */
.my_feedly2 {
border: solid 1px #6cc655;
color: #6cc655;
}
/* Feedlyマウスホバー時 */
.my_feedly2:hover {
border: solid 1px #6cc655;
background-color: #6cc655;
}

/* 楽天ROOM枠線 */
.my_rakutenroom2 {
border: solid 1px #c61d79;
color: #c61d79;
}
/* 楽天ROOMマウスホバー時 */
.my_rakutenroom2:hover {
border: solid 1px #c61d79;
background-color: #c61d79;
}

/* リンクドイン枠線 */
.my_linkedin2 {
border: solid 1px #0a66c2;
color: #0a66c2;
}
/* リンクドインマウスホバー時 */
.my_linkedin2:hover {
border: solid 1px #0a66c2;
background-color: #0a66c2;
}

/* ディスコード枠線 */
.my_discord2 {
border: solid 1px #7289da;
color: #7289da;
}
/* ディスコードマウスホバー時 */
.my_discord2:hover {
border: solid 1px #7289da;
background-color: #7289da;
}

/* Podcast枠線 */
.my_podcast2 {
border: solid 1px #813BF2;
color: #813BF2;
}
/* Podcastマウスホバー時 */
.my_podcast2:hover {
border: solid 1px #813BF2;
background-color: #813BF2;
}

枠線カラー“と”マウスホバー時の背景色“を揃えるとキレイに見えます。

③統一色バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは②枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目24〜26行目の6箇所を追記または変更してください。

/* ボタン全体 */
.flowbtn2 {
  font-family: 'Noto Sans Japaneses', sans-serif; 
  position: relative;
  display: inline-block;
  width: 75px;
  height: 65px;
  font-size: 30px;
  border-radius: 4px;
  transition: .5s;
  text-decoration: none;
  margin-bottom:10px;

  color: #fff;/* ボタン内カラー基本は白固定 */
  background-color: #000;/* 背景カラー */
  border: solid 1px;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn2:hover {
  text-decoration: none;
  cursor: pointer;

  color: #000;/* アイコンカラー */
  border: solid 1px #000;/* 枠線カラー */
  background-color: #fff;/* 背景カラー */
}

.flowbtn2background-color:#000;
.flowbtn2:hover
color:#000;
border: solid 1px #000;
それぞれ同じカラーに指定すると、バランスが良くなります。

④統一色の枠線バージョン

カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは②枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */より下のコードは削除しましょう。
そして以下の14〜16行目25〜26行目の5箇所を追記してください。

/* ボタン全体 */
.flowbtn2 {
font-family: 'Noto Sans Japaneses', sans-serif; 
position: relative;
display: inline-block;
width: 75px;
height: 65px;
font-size: 30px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;

color: #000;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;;/* 枠線の指定 */
}

/* マウスホバー時、ボタン内を白に指定 */
.flowbtn2:hover {
text-decoration: none;
cursor: pointer;
color: #fff;

border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}

.flowbtn2color: #000;
.flowbtn2:hover
border: solid 1px #000;
background-color:#000;
それぞれ同じカラーに指定すると、バランスが良くなります。

その他デザイン28パターン一覧

ここから有料記事にしました。

どのパターンでも「統一色」や「枠線」の色を変更できるように補足しています。
コピペで使えますが、無料部分を読んでまったくわからない方は購入をお控えください。

有料記事に書いてあること
  • 28パターンのSNSボタン用「HTML&CSS」
  • ボタン並び数の変更方法
  • スマホとパソコンで並ぶ数を変える方法
  • ボタン同士の余白調整
  • CSSコードのコンパクト化

FAQは読者様からきた質問に返答しました。
コメント欄より質問内容を確認できます。

有料記事について
販売先codoc(コードク)を利用しています。
購入者向けFAQ
支払い方法クレジットカード、デビットカード、プリペイド型クレジットカード
Apple Pay、Google Pay、コンビニ決済
カード会社VISA、Mastercard、American Express、JCB、Diners、DISCOVER
コンビニファミリーマート、ローソン、ミニストップ、セイコーマート
返金・キャンセルcodoc利用規約10条 に基づき、対応していません。
記事への質問記事内のことでしたら受け付けています。
派生させたカスタマイズの相談はご遠慮ください。
問い合わせ先
この続きを見るには
HTML SNSアイコンをCSSでカスタマイズ

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

この記事へのコメント数 (30件)

    • ff様
      ご指摘ありがとうございます。
      確認したところ「グラデーションボタン」のclassのズレを発見したので、修正致しました。
      現状そこくらいかと思いますが、また何かあればコメントいただけますと幸いです。
      また、もしお手間でなければ「間違っている箇所」をご指摘頂けますと非常に助かります。
      ご不便をおかけして申し訳ありません。
      今後とも「カゲサイ」をよろしくお願いします。

  • これだけネットに情報があふれていると無料が当たり前なんて考えてる頭の弱い奴も湧いてきますね!
    あ、上のffのことですwww
    SNSフォローボタン大変参考になりました!
    本当にありがとうございます^^

    • りゅう様
      暖かいコメントありがとうございます。

      参考になった様で何よりです。

      今後とも精進していこうと思っていますので、「カゲサイ」をよろしくお願いします。

  • 各自SNSアイコンのみが表示されないのですが何が原因かわかりますか? 
    枠、文字は表示されます。

    • R様

      該当ページのURLを送っていただけますか?

      よろしくお願いします。

  • SNSのアイコンが表示されず、代わりに小さい四角のようなものが表示されてしまいます。
    原因はわかりますでしょうか?

    • IS様

      該当ページのURLを送っていただけますか?

      よろしくお願いします。

    • IS様

      サイト確認致しました。

      1.Font Awesomeを読み込みこんでください。

      2.CSSもコピペしてください。

      よろしくお願いします。

    • 解決できました!
      とても助かりました…(´;ω;`)
      ありがとうございました。

    • こんにちは。大変参考になりました。ありがとうございます。2点質問させて頂いてもよろしいでしょうか。
      何種類か試させていただいたのですが、フェイスブックのマークのみエラーになってしまいますのでそちらの修正方法を教えて頂けますと幸いです。
      また、名前とSNSアイコンの列間を詰めたいのですが、そちらの方法も教えて頂けますか?お手数おかけして申し訳ありませんが、よろしくお願いいたします。URLは以下になります。

    • ラッコ様

      サイト拝見しました。

      1つめ、Facebookアイコンについては以下の「b」を取り除けばOKです。

      fab fa-facebook-square」→「fa fa-facebook-square」

      2つめ、名前とSNSの列間を詰めるとは、名前側にSNSアイコンを近づけたい認識で合ってますかね?

      であれば以下のコードを追記して「20px」部分で調整してください。

      
      ul.snsbtniti {
          position: relative;
          bottom: 20px;
      }
      

      よろしくお願いします。

    • ありがとうございます。Facebookのボタンの問題は解決いたしました。
      名前側にSNSアイコンを近づけるのができませんでした。そちらのコードを入力したらそのまま本文に入力されてしまいました…。入力する場所が間違っているのでしょうか…。

    • ラッコ様

      いえ本文ではなく、style.cssに追加してください。

      よろしくお願いします。

    • はじめまして。今回このページを参考に自分のブログにTwitterのフォローボタンを設置しようとしたのですが、
      何回やってもcssがうまく反映されません。原因を教えていただけますか?

      サイドバーのSNSフォローはこちらというところです。よろしくお願いします。

    • なた様

      サイトを確認したところ、以下のように反映されていますが「Twitter」テキスト部分の位置調整をしたいということでしょうか?

      であれば以下の「22px」部分を調整してください。

      
      .flowbtn2 div {
          font-size: 11px;
          letter-spacing: 0;
          font-weight: bold;
          position: relative;
          bottom: 22px;
      }
      

      おそらく10pxくらいにすれば、いい感じになると思います。

      よろしくお願いします。

    • ありがとうございます!!
      ずっと鳩マークと文字だけで、四角の枠が反映されなかったんです。
      反映されるまで時間がかかったみたいで、1日経ったら変わってました。
      わざわざ、確認してもらって申し訳ありませんでした。

      なんと!さらにアドバイスまで!ありがとうございます~。ペコペコ。
      早速、変えてみました!!
      これからも、参考にさせてもらいます!

  • すみません。以下のようにstyle.cssの最後に入れてみましたが変わりませんでした。
    素人すぎて申し訳ありません。よろしくお願いいたします。
    /* アイコンにマウスを乗せた時 */
    .flowbtn9:hover{
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
    }

    ul.snsbtniti {
    position: relative;
    bottom: 20px;
    }

    • ラッコ様

      サイトを見るとコードが適用されていないので、もう一度確認してみてください。

      もしわからないのであれば、気になるほど余白は空いていないので、そのままでも問題ないと思いますよ。

      よろしくお願いします。

    • お手数おかけしました。ありがとうございました。

  • 初めまして。
    質問させて頂きます。
    “12.横長の枠線SNSボタン”の、コードのところです。
    なぜか、YouTubeの枠線だけが表示されません・・・(ーー;)
    いろいろ試してはいるのですが、解決しそうにないので質問させて頂きました。
    よろしくお願いします!

  • サイドバーに追加したのですが、黒点が消えません。CSSのコードを2種類とも打っ他のですが消えませんでした。どうすれば良いですか?

  • カゲオさんの様に記事下のSNSの上にSHAREの文字を入れる方法を知りたいです。

  • インスタグラムのアイコンを入れたのですが、指定したURLには飛ぶのですが、サイトのアイコンの中にインスタグラムの白いカメラの画像がなくて、困っています。

  • かんたんに設置できて素晴らしいです。
    初心者スミマセンうまく再現できないため教えて下さい。

    枠やバックカラー&マウスオーバーなど表示されますがアイコンが
    表示されません。事前にダウンロードなど必要な手順があるのでしょうか

  • 質問失礼致します。こちらのサイトを拝見して”9″のコードを使用させていただいているのですが、もし可能であれば同じ種類でPodcastのアイコンのコードもお作りいただけないでしょうか。何とよろしくお願いいたします。

  • お世話になっております。
    素人すぎて申し訳ありません。

    こちらはWP以外にも使用できますか?
    例えば、ネットショップ作成サイト(baseやカラーミーなど)でも使用できるのでしょうか。

    • SP様

      どちらも使ったことはありませんが、CSSが使えるのでしたら、おそらく大丈夫なはずです。

      よろしくお願いいたします。

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次