運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。
当記事では、15種類のSNSボタンを作成しました。
すべてコピペで使えます。
どのデザインも一部を除き、4つのパターンを作成しました。
そのほか順番、並べる個数、カラー変更も簡単に調整できるよう解説しています。
タイトル下や本文下に表示するシェアボタンをお探しの方は㉙アイコンのみ横長ボタンがおすすめです。
全部で32パターンあるから目次を活用してね
まず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>
snsbtniti
は、ボタンの外枠全体の指定。flowbtn
は、ボタン内のデザインや大きさの指定。my_〇〇1
は、各SNSの背景色などを個別に指定するもの。i
タグは各アイコンのコード。div
タグで囲んであるのがボタン周辺に表示されるテキスト。<li>〜</li>
タグを削除してください。ボタンデザインにより、各classに番号が割り振られていたり、削除してあるものもあります。
例えば、snsbtniti2
や flowbtn3
など。
それでも基本は上記と同じですので、調整する場合は参考にしてください。
当記事のサンプルでは、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
テーマ側にない方は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から読み込む方法
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も、すべてのページに適用してくれます。
コード | アイコン |
---|---|
エックススクエア<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以上のアイコンを無料使用できますので、当記事のサンプルにご希望のものがない場合はコードを変更して応用してください。
<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でアイコンを個別に調整する場合は、flowbtn
とi
タグの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>
flowbtn
とmy_〇〇
を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;/* 背景カラー */
}
.flowbtn2
のbackground-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;/* 背景カラー */
}
.flowbtn2
のcolor: #000;
.flowbtn2:hover
のborder: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
<ul class="snsbtniti">
<li>
<a href="エックスのプロフィールURL" class="flowbtn3 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn3 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn3 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn3 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn3 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn3 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn3 my_line1">
<i class="fa-brands fa-line"></i>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn3 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn3 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn3 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn3 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn3 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn3 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn3 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn3 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
</li>
</ul>
flowbtn
を3
に変更しています。
フォントを指定していた<div>〇〇</div>
タグを削除しました。
/* ボタン全体の外枠指定 */
.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;
}
/* ボタン全体 */
.flowbtn3 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
color: #fff;/* アイコンカラー */
margin-bottom:10px;/* ボタン下の余白 */
}
/* アイコンの位置を真ん中へ */
.flowbtn3 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Amazon・楽天アイコンを少し大きく */
.flowbtn3 i.fa-brands.fa-amazon,.flowbtn3 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn3 i.fa-brands.fa-instagram{
font-size: 45px;
}
/* ボタンのマウスホバー時少し浮き上がる */
.flowbtn3:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}
/* エックス背景 */
.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;
}
.flowbtn3
の横幅:width
と高さ:height
を揃え、角の丸み:border-radius
を少し強めに指定しました。.flowbtn3 i
でアイコンの位置が真ん中にくるようにしています。
そのほかInstagramのアイコンをより大きく、Facebook・Amazon・楽天アイコンも少し大きくしています。
<ul class="snsbtniti">
<li>
<a href="エックスのプロフィールURL" class="flowbtn4 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn4 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn4 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn4 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn4 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn4 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn4 my_line2">
<i class="fa-brands fa-line"></i>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn4 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn4 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn4 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn4 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn4 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn4 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn4 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn4 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
</li>
</ul>
flowbtn
を4
,my_〇〇
を2
に変更してあります。
フォントを指定していた<div>〇〇</div>
タグを削除しました。
/* ボタン全体の外枠指定 */
.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%; /* 並べるボタンの数 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn4 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角の丸みを強く */
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}
/* アイコンをど真ん中へ */
.flowbtn4 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}
/*インスタアイコンを少し大きく */
.flowbtn4 i.fa-brands.fa-instagram{
font-size: 45px;
}
/* Amazon・楽天アイコンを少し大きく */
.flowbtn4 i.fa-brands.fa-amazon,.flowbtn4 .fa-regular.fa-registered {
font-size: 40px;
}
/* エックス枠線 */
.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;
}
.flowbtn4
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑥枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn4 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;
color: #fff;/* アイコンカラー */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
text-decoration: none;
cursor: pointer;
color: #000;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn4
のbackground-color:#000;
.flowbtn4:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑥枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn4 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;
margin-bottom:10px;
color: #000;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn4:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn4
のcolor: #000;
.flowbtn4:hover
のborder: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
/* ボタン全体 */
.flowbtn〇〇 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 50%;/* ここを変更する */
transition: .5s;
text-decoration: none;
color: #fff;
margin-bottom:10px;
}
/* 45px→40pxに変更 */
.flowbtn〇〇 i.fa-brands.fa-instagram{
font-size: 40px;
}
目次番号⑤〜⑧.flowbtn
のborder-radius
を50%
に変更、インスタアイコンは40px
くらいにするとバランスが良いかと思います。
2行目と19行目の〇〇番号は、一番上の塗りつぶしカラーなら「3」、それ以外のデザインは「4」を入れてください。
<ul class="snsbtniti">
<li>
<a href="エックスのプロフィールURL" class="flowbtn5 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<div>エックス</div>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn5 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<div>Instagram</div>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn5 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
<div>Facebook</div>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn5 my_youtube1">
<i class="fab fa-youtube"></i>
<div>YouTube</div>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn5 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<div>TikTok</div>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn5 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<div>ほしいモノ</div>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn5 my_line1">
<i class="fa-brands fa-line"></i>
<div>LINE@</div>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn5 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="flowbtn5 my_hatena1">
<i class="fa-solid fa-b"></i>
<div>Hatena</div>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn5 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="flowbtn5 my_feedly1">
<i class="fa-solid fa-rss"></i>
<div>Feedly</div>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn5 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<div>楽天ROOM</div>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn5 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
<div>LinkedIn</div>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn5 my_discord1">
<i class="fa-brands fa-discord"></i>
<div>Discord</div>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn5 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<div>Podcast</div>
</a>
</li>
</ul>
flowbtn
を5
に変更しています。
/* ボタン全体の外枠指定 */
.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;
}
/* ボタン全体 */
.flowbtn5 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 70px;/* 背景横幅 */
height: 70px; /* 背景高さ */
font-size: 30px;
border-radius: 50%;/* ボタンを丸く指定 */
transition: .5s;
text-decoration: none;
color: #fff;
margin-bottom:10px;/* ボタン下の余白 */
}
/* ボタン内テキスト調整 */
.flowbtn5 div {
font-size: 11px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 6px;
}
/* マウスホバー時少し浮き上がる */
.flowbtn5:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}
/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-instagram,.flowbtn5 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;
}
.flowbtn5
と.flowbtn5 div
をところどころ微調整しました。
その他は①四角いカラーボタンと同じです。
<ul class="snsbtniti">
<li>
<a href="エックスのプロフィールURL" class="flowbtn6 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<div>エックス</div>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn6 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<div>Instagram</div>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn6 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
<div>Facebook</div>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn6 my_youtube2">
<i class="fab fa-youtube"></i>
<div>YouTube</div>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn6 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<div>TikTok</div>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn6 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<div>ほしいモノ</div>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn6 my_line2">
<i class="fa-brands fa-line"></i>
<div>LINE@</div>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn6 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="flowbtn6 my_hatena2">
<i class="fa-solid fa-b"></i>
<div>Hatena</div>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn6 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="flowbtn6 my_feedly2">
<i class="fa-solid fa-rss"></i>
<div>Feedly</div>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn6 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<div>楽天ROOM</div>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn6 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
<div>LinkedIn</div>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn6 my_discord2">
<i class="fa-brands fa-discord"></i>
<div>Discord</div>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn6 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<div>Podcast</div>
</a>
</li>
</ul>
flowbtn
を6
、my_〇〇
を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;
}
/* ボタン全体 */
.flowbtn6 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 70px;/* 背景横幅 */
height: 70px; /* 背景高さ */
font-size: 30px;
border-radius: 50%;/* ボタンを丸く指定 */
transition: .5s;
text-decoration: none;
margin-bottom:10px;/* ボタン下の余白 */
}
/* ボタン内テキスト調整 */
.flowbtn6 div {
font-size: 11px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 7px;
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}
/* インスタ・Amazonのアイコンを少し大きく */
.flowbtn6 i.fa-brands.fa-instagram,.flowbtn6 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;
}
.flowbtn6
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑪枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn6 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 70px;
height: 70px;
font-size: 30px;
border-radius: 50%;
transition: .5s;
text-decoration: none;
margin-bottom:10px;
color: #fff;/* ボタン内カラー */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
text-decoration: none;
cursor: pointer;
color: #000;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn6
のbackground-color:#000;
.flowbtn6:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑪枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn6 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 70px;
height: 70px;
font-size: 30px;
border-radius: 50%;
transition: .5s;
text-decoration: none;
margin-bottom:10px;
color: #000!important;/* ボタン内カラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn6:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn6
のcolor: #000!important;
.flowbtn6:hover
のborder: solid 1px #000;
background-color: #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
<ul class="snsbtniti2">
<li>
<a href="エックスのプロフィールURL" class="flowbtn7 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
<div>エックス</div>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn7 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
<div>Instagram</div>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn7 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
<div>Facebook</div>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn7 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
<div>YouTube</div>
</li>
<li>
<a href="TikTokプロフィールURL" class="flowbtn7 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
<div>TikTok</div>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn7 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
<div>ほしいモノ</div>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn7 my_line1">
<i class="fa-brands fa-line"></i>
</a>
<div>LINE@</div>
</li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn7 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
<div>Pinterest</div>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn7 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
<div>Hatena</div>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn7 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
<div>Pocket</div>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn7 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
<div>Feedly</div>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn7 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
</a>
<div>楽天ROOM</div>
</li>
<li>
<a href="リンクドインURL" class="flowbtn7 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<div>LinkedIn</div>
</li>
<li>
<a href="DiscordのURL" class="flowbtn7 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
<div>Discord</div>
</li>
<li>
<a href="PodcastのURL" class="flowbtn7 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
<div>Podcast</div>
</li>
</ul>
snsbtniti
を2
、flowbtn
を7
に変更しています。
またdivタグ
をaタグ
の下に設置することで、ボタンと別で調整できるようにしました。
/* ボタン全体の外枠指定 */
.snsbtniti2 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti2 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti2 li {
flex: 0 0 33%;/* ボタンを3つ並びへ */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn7 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
color: #fff;/* アイコンカラー */
}
/* アイコンの位置を真ん中へ */
.flowbtn7 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Amazon・楽天アイコンを少し大きく */
.flowbtn7 i.fa-brands.fa-amazon,.flowbtn7 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn7 i.fa-brands.fa-instagram{
font-size: 45px;
}
/* ボタン下テキスト調整 */
.snsbtniti2 div {
color: #222;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 5px;
white-space: nowrap;/* 改行させない */
}
/* マウスホバー時、少し浮き上がる */
.flowbtn7:hover {
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration: none;
cursor: pointer;
}
/* エックス背景 */
.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;
}
インスタ・Amazon・楽天のアイコンサイズを少し大きくしています。
そのほかアイコンが真ん中にくるように指定しました。
<ul class="snsbtniti2">
<li>
<a class="flowbtn8 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
<div>エックス</div>
</li>
<li>
<a class="flowbtn8 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
<div>Instagram</div>
</li>
<li>
<a class="flowbtn8 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
<div>Facebook</div>
</li>
<li>
<a class="flowbtn8 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
<div>YouTube</div>
</li>
<li><a class="flowbtn8 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
<div>TikTok</div>
</li>
<li>
<a class="flowbtn8 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
<div>ほしいモノ</div>
</li>
<li>
<a class="flowbtn8 my_line2">
<i class="fa-brands fa-line"></i>
</a>
<div>LINE@</div>
</li>
<li>
<a class="flowbtn8 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
<div>Pinterest</div>
</li>
<li>
<a class="flowbtn8 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
<div>Hatena</div>
</li>
<li>
<a class="flowbtn8 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
<div>Pocket</div>
</li>
<li>
<a class="flowbtn8 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
<div>Feedly</div>
</li>
<li>
<a class="flowbtn8 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
</a>
<div>楽天ROOM</div>
</li>
<li>
<a class="flowbtn8 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
<div>LinkedIn</div>
</li>
<li>
<a class="flowbtn8 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
<div>Discord</div>
</li>
<li>
<a class="flowbtn8 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
<div>Podcast</div>
</li>
</ul>
snsbtniti
を2
,flowbtn
を8
,my_〇〇
を2
に変更しています。
/* ボタン全体の外枠指定 */
.snsbtniti2 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti2 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti2 li {
flex: 0 0 33%;/* ボタンを3つ並びへ */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn8 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 60px;/* 背景横幅 */
height: 60px; /* 背景高さ */
font-size: 35px;
border-radius: 13px;/* ボタンの角を丸く */
transition: .5s;
text-decoration: none;
}
/* アイコンの位置を真ん中へ */
.flowbtn8 i {
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Amazon・楽天アイコンを少し大きく */
.flowbtn8 i.fa-brands.fa-amazon,.flowbtn8 .fa-regular.fa-registered {
font-size: 40px;
}
/*インスタアイコンを少し大きく */
.flowbtn8 i.fa-brands.fa-instagram{
font-size: 45px;
}
/* ボタン下テキスト調整 */
.snsbtniti2 div {
color: #222;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
position: relative;
bottom: 5px;
white-space: nowrap;/* 改行させない */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
}
/*インスタアイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-instagram{
font-size: 45px;
}
/* エックス枠線 */
.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・Amazon・楽天アイコンを少し大きく */
.flowbtn5 i.fa-brands.fa-amazon,.flowbtn5 i.fa-brands.fa-facebook,.flowbtn5 .fa-regular.fa-registered {
font-size: 40px;
}
/* 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;
}
.flowbtn8
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑮枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の13〜15行目、23〜25行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn8 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;
color: #fff!important;/* ボタン内カラー */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
text-decoration: none;
cursor: pointer;
color: #000!important;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn8
のbackground-color:#000;
.flowbtn8:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは⑮枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の13〜15行目、24〜25行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn8 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 13px;
transition: .5s;
text-decoration: none;
color: #000!important;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn8:hover {
text-decoration: none;
cursor: pointer;
color: #fff;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn8
のcolor: #000!important;
.flowbtn8:hover
のborder: solid 1px #000;
background-color: #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
/* ボタン全体 */
.flowbtn〇〇 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 60px;
height: 60px;
font-size: 35px;
border-radius: 50%;/* ここを50%に変更 */
transition: .5s;
text-decoration: none;
color: #fff;
}
/* 45px→40pxに変更 */
.flowbtn〇〇 i.fa-brands.fa-instagram{
font-size: 40px;
}
目次番号⑭〜⑰.flowbtn8
のborder-radius
を50%
に変更、インスタアイコンは40px
くらいにするとバランスが良いかと思います。
2行目と18行目の〇〇番号は、一番上の塗りつぶしカラーなら「3」、それ以外のデザインは「4」を入れてください。
こちらは、アイコンコードに直接色を指定しました。
小さくまとまるため、5列並べてもキレイに収まります。
<ul class="snsbtniti3">
<li>
<a href="エックスのプロフィールURL" class="flowbtn9 my_x3">
<i class="fa-brands fa-square-x-twitter"></i>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn9 my_instagram3">
<i class="fa-brands fa-square-instagram"></i>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn9 my_facebook3">
<i class="fa-brands fa-square-facebook"></i>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn9 my_youtube3">
<i class="fa-brands fa-square-youtube"></i>
</a>
</li>
<li>
<a href="TikTokプロフィールURL" class="flowbtn9 my_tiktok3">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn9 my_amazon3">
<i class="fa-brands fa-amazon"></i>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn9 my_line3">
<i class="fa-brands fa-line"></i>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn9 my_pinterest3">
<i class="fa-brands fa-square-pinterest"></i>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn9 my_hatena3">
<i class="fa-solid fa-b"></i>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn9 my_pocket3">
<i class="fab fa-get-pocket"></i>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn9 my_feedly3">
<i class="fa-solid fa-square-rss"></i>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn9 my_rakutenroom3">
<i class="fa-solid fa-registered"></i>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn9 my_linkedin3">
<i class="fa-brands fa-linkedin"></i>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn9 my_discord3">
<i class="fa-brands fa-discord"></i>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn9 my_podcast3">
<i class="fa-solid fa-podcast"></i>
</a>
</li>
</ul>
snsbtniti
を3
,flowbtn
を9
,my_〇〇
を3
に変更しています。
そのほかいくつかのアイコンコードをスクエア型に変更しました。
/* ボタン全体の外枠指定 */
.snsbtniti3 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width: 350px;/* ボタンを設置する場所の最大横幅 */
margin: 0 auto;/* ボタンを中央へ */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti3 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti3 li {
flex: 0 0 20%;/* ボタンを5つ並びへ */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn9 {
display: inline-block;
transition: .5s;
font-size:53px;
text-decoration: none;
}
/* マウスホバー時、少し浮き上がる */
.flowbtn9:hover {
-webkit-transform: translateY(-5px);
-ms-transform: translateY(-5px);
transform: translateY(-5px);
text-decoration: none;
cursor: pointer;
}
/* LINEのアイコンを少し小さく */
.flowbtn9 .fa-line{
font-size:49px;
}
/* TikTok・はてブのアイコンを少し小さく */
.flowbtn9 .fa-tiktok,.flowbtn9 .fa-b{
font-size: 46px;
}
/* エックスカラー */
.my_x3 {
color: #000;
}
/* Instagram紫グラデカラー */
.my_instagram3 {
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%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Facebookカラー */
.my_facebook3 {
color: #1877f2;
}
/* YouTubeカラー */
.my_youtube3 {
color: #da1725;
}
/* TikTokカラー */
.my_tiktok3 {
color: #000;
}
/* Amazonカラー */
.my_amazon3 {
color: #ff9900;
}
/* LINEカラー */
.my_line3 {
color: #00b900;
}
/* ピンタレストカラー */
.my_pinterest3 {
color: #bd081c;
}
/* はてブカラー */
.my_hatena3 {
color: #1ba5dc;
}
/* はてブビックリマーク */
.my_hatena3 .fa-b::after {
content: "!";
padding-left: 5px;
}
/* Pocketカラー */
.my_pocket3 {
color: #ef3f56;
}
/* Feedlyカラー */
.my_feedly3 {
color: #6cc655;
}
/* 楽天ROOMカラー */
.my_rakutenroom3 {
color: #c61d79;
}
/* リンクドインカラー */
.my_linkedin3 {
color: #0a66c2;
}
/* ディスコードカラー */
.my_discord3 {
color: #7289da;
}
/* Podcastカラー */
.my_podcast3 {
color: #813BF2;
}
flex: 0 0 20%;
で5つ並びにしています。
インスタ以外は、色の指定をbackground
→color
に変更しました。
※.インスタはグラデーションのため、特殊な指定をしています。
TikTok・LINE・はてブのアイコンは少し小さくしています。
カラーコードを1ヶ所追加すれば、お好きな色を指定できます。
基本コードは⑲アイコンのみボタンと同じものを使ってください。
CSSの/* エックスカラー */
より下のコードをは削除しましょう。
そして以下の8行目を追記してください。
/* ボタン全体 */
.flowbtn9 {
display: inline-block;
transition: .5s;
font-size:53px;
text-decoration: none;
color:#000;/* ここでお好きなカラーを指定 */
}
.flowbtn9
のcolor:#000;
を好きなカラーに変更してみましょう。
サイドバーに設置することを想定しています。
スマホ閲覧も考慮すると2列以上は厳しいでしょう。
<ul class="snsbtniti4">
<li>
<a href="エックスのプロフィールURL" class="flowbtn10 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn10 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn10 my_facebook1">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn10 my_youtube1">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn10 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn10 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn10 my_line1">
<i class="fa-brands fa-line"></i>
<span>LINE@</span>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn10 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn10 my_hatena1">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn10 my_pocket1">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn10 my_feedly1">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn10 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn10 my_linkedin1">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn10 my_discord1">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn10 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>
<li>
<a href="プロフィールURL" class="flowbtn10 my_profile1">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>
</ul>
snsbtniti
を4
,flowbtn
を10
,div
をspan
タグに変更しています。
バランスが悪かったため、一番下にプロフィールアイコンを足しました。
/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn10 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
color: #fff!important;/* ボタン内カラー */
transition: .5s;
text-decoration: none;
box-shadow: 0 1px 2px #999;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn10 i,.flowbtn10 span {
position:absolute;
top:50%;
left:18%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* フォント調整 */
.flowbtn10 span {
font-size: 16px;
font-weight: bold;
left:56%;/* フォントを少し右へ */
white-space: nowrap;/* 改行させない */
}
/* インスタグラムのフォントを少し右へ */
.flowbtn10.my_instagram1 span {
left: 58%;
}
/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn10 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn10 {
width:100%!important; /* ボタンの横幅を最大へ */
}}
/* ボタンマウスホバー時、少し白くなる */
.flowbtn10:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}
/*インスタアイコンを少し大きく */
.flowbtn10 i.fa-brands.fa-instagram{
font-size: 30px;
}
/* エックス背景 */
.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;
}
/* プロフィール背景 */
.my_profile1 {
background: #000;
}
これまでのボタンとは、調整方法が異なりますので、変更する場合は/* コメント */
を参考にしてください。
<ul class="snsbtniti4">
<li>
<a href="エックスのプロフィールURL" class="flowbtn11 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn11 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn11 my_facebook2">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn11 my_youtube2">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn11 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn11 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn11 my_line2">
<i class="fa-brands fa-line"></i>
<span>LINE@</span>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn11 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn11 my_hatena2">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn11 my_pocket2">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn11 my_feedly2">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn11 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn11 my_linkedin2">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn11 my_discord2">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn11 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>
<li>
<a href="プロフィールURL" class="flowbtn11 my_profile2">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>
</ul>
snsbtniti
を4
,flowbtn
を11
,my_〇〇
を2
に変更しています。
/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn11 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn11 i,.flowbtn11 span {
position:absolute;
top:50%;
left:18%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* フォント調整 */
.flowbtn11 span {
font-size: 16px;
font-weight: bold;
left:56%;/* フォントを少し右へ */
white-space: nowrap;/* 改行させない */
}
/* インスタグラムのフォントを少し右へ */
.flowbtn11.my_instagram2 span {
left: 58%;
}
/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn11 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn11 {
width:100%!important; /* ボタンの横幅を最大へ */
}}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}
/*インスタアイコンを少し大きく */
.flowbtn11 i.fa-brands.fa-instagram{
font-size: 30px;
}
/* エックス枠線 */
.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;
}
/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}
.flowbtn11
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉒枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn11 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #fff!important;/* ボタン内カラー基本は白固定 */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover {
text-decoration: none;
cursor: pointer;
color: #000!important;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn11
のbackground-color:#000;
.flowbtn11:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉒枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn11 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #000!important;/* ボタン内カラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn11:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn11
のcolor: #000;
.flowbtn11:hover
のborder: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
<ul class="snsbtniti4">
<li>
<a href="エックスのプロフィールURL" class="flowbtn12 my_x1">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn12 my_instagram1">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn12 my_facebook1">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn12 my_youtube1">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn12 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn12 my_amazon1">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn12 my_line1">
<i class="fa-brands fa-line"></i>
<span>LINE@</span>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn12 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn12 my_hatena1">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn12 my_pocket1">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn12 my_feedly1">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn12 my_rakutenroom1">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn12 my_linkedin1">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn12 my_discord1">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn12 my_podcast1">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>
<li>
<a href="プロフィールURL" class="flowbtn12 my_profile1">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>
</ul>
snsbtniti
を4
,flowbtn
を12
に変更しています。
/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn12 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
color:#fff!important;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn12 i,.flowbtn12 span{
position:absolute;
top:33%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* フォント調整 */
.flowbtn12 span {
font-size: 14px;
font-weight: bold;
top:80%;/* フォント位置を下にする */
white-space: nowrap;
}
/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn12 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn12 {
width:100%!important; /* ボタンの横幅を最大へ */
}}
/* ボタンマウスホバー時、少し白くなる */
.flowbtn12:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}
/*インスタアイコンを少し大きく、位置を少し下げる */
.flowbtn12 i.fa-brands.fa-instagram{
font-size: 30px;
bottom:5px;
}
/* エックス背景 */
.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;
}
/* プロフィール背景 */
.my_profile1 {
background: #000;
}
インスタボタンのみ少し微調整しています。
<ul class="snsbtniti4">
<li>
<a href="エックスのプロフィールURL" class="flowbtn13 my_x2">
<i class="fa-brands fa-x-twitter"></i>
<span>エックス</span>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn13 my_instagram2">
<i class="fa-brands fa-instagram"></i>
<span>Instagram</span>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn13 my_facebook2">
<i class="fa-brands fa-facebook"></i>
<span>Facebook</span>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn13 my_youtube2">
<i class="fab fa-youtube"></i>
<span>YouTube</span>
</a>
</li>
<li><a href="TikTokプロフィールURL" class="flowbtn13 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
<span>TikTok</span>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn13 my_amazon2">
<i class="fa-brands fa-amazon"></i>
<span>ほしいモノ</span>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn13 my_line2">
<i class="fa-brands fa-line"></i>
<span>LINE@</span>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn13 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
<span>Pinterest</span>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn13 my_hatena2">
<i class="fa-solid fa-b"></i>
<span>Hatena</span>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn13 my_pocket2">
<i class="fab fa-get-pocket"></i>
<span>Pocket</span>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn13 my_feedly2">
<i class="fa-solid fa-rss"></i>
<span>Feedly</span>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn13 my_rakutenroom2">
<i class="fa-regular fa-registered"></i>
<span>楽天ROOM</span>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn13 my_linkedin2">
<i class="fa-brands fa-linkedin"></i>
<span>LinkedIn</span>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn13 my_discord2">
<i class="fa-brands fa-discord"></i>
<span>Discord</span>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn13 my_podcast2">
<i class="fa-solid fa-podcast"></i>
<span>Podcast</span>
</a>
</li>
<li>
<a href="プロフィールURL" class="flowbtn13 my_profile2">
<i class="fa-solid fa-user"></i>
<span>プロフィール</span>
</a>
</li>
</ul>
snsbtniti
を4
,flowbtn
を13
,my_〇〇
を2
に変更しています。
/* ボタン全体の外枠指定 */
.snsbtniti4 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ボタンを配置する場所の最大幅を指定 */
margin:0 auto;/* ボタン全体を中央に寄せる */
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti4 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti4 li {
flex: 0 0 48%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn13 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 98%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:25px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn13 i,.flowbtn13 span{
position:absolute;
top:33%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* フォント調整 */
.flowbtn13 span {
font-size: 14px;
font-weight: bold;
top:80%;/* フォント位置を下にする */
white-space: nowrap;
}
/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn13 span {
font-size: 13px;/* フォントサイズ */
}
.flowbtn13 {
width:100%!important; /* ボタンの横幅を最大へ */
}}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}
/*インスタアイコンを少し大きく */
.flowbtn13 i.fa-brands.fa-instagram{
font-size: 30px;
}
/* エックス枠線 */
.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;
}
/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}
.flowbtn13
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉖枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn13 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #fff!important;/* ボタン内カラー基本は白固定 */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover {
text-decoration: none;
cursor: pointer;
color: #000!important;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn13
のbackground-color:#000;
.flowbtn13:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉖枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn13 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 98%;
height: 50px;
font-size: 25px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #000!important;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn13:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn13
のcolor: #000;
.flowbtn13:hover
のborder: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
最後はタイトル下や本文下のシェアボタンを想定して作りました。
スマホ閲覧も考慮すると5列くらいがちょうど良い気がします。
<ul class="snsbtniti5">
<li>
<a href="エックスのプロフィールURL" class="flowbtn14 my_x1">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn14 my_instagram1">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn14 my_facebook1">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn14 my_youtube1">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="TikTokプロフィールURL" class="flowbtn14 my_tiktok1">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn14 my_amazon1">
<i class="fa-brands fa-amazon"></i>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn14 my_line1">
<i class="fa-brands fa-line"></i>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn14 my_pinterest1">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn14 my_hatena1">
<i class="fa-solid fa-b"></i>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn14 my_pocket1">
<i class="fab fa-get-pocket"></i>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn14 my_feedly1">
<i class="fa-solid fa-rss"></i>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn14 my_rakutenroom1">
<i class="fa-solid fa-registered"></i>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn14 my_linkedin1">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn14 my_discord1">
<i class="fa-brands fa-discord"></i>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn14 my_podcast1">
<i class="fa-solid fa-podcast"></i>
</a>
</li>
</ul>
snsbtniti
を5
,flowbtn
を14
に変更しています。
フォントを指定していた<span>〇〇</span>
タグを削除しました。
/* ボタン全体の外枠指定 */
.snsbtniti5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti5 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti5 li {
flex: 0 0 19%;/* ボタンが5列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn14 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 100%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:33px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
color:#fff!important;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn14 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* マウスホバー時、少し白くなる */
.flowbtn14:hover{
opacity: 0.7;
text-decoration: none;
cursor: pointer;
}
/*InstagramとAmazonのアイコンを少し大きく */
.flowbtn14 i.fa-brands.fa-instagram,flowbtn14 i.fa-brands.fa-amazon{
font-size: 38px;
}
/* エックス背景 */
.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;
}
.snsbtniti5
の横幅制限をなくしたので、設置場所の最大幅に自動調整されます。flex: 0 0 19%;
でボタンが5列に並ぶように指定しました。
そのほかInstagramとAmazonアイコンは少し大きくしています。
<ul class="snsbtniti5">
<li>
<a href="エックスのプロフィールURL" class="flowbtn15 my_x2">
<i class="fa-brands fa-x-twitter"></i>
</a>
</li>
<li>
<a href="インスタのプロフィールURL" class="flowbtn15 my_instagram2">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="FacebookページのURL" class="flowbtn15 my_facebook2">
<i class="fa-brands fa-facebook-f"></i>
</a>
</li>
<li>
<a href="YouTubeのチャンネルURL" class="flowbtn15 my_youtube2">
<i class="fab fa-youtube"></i>
</a>
</li>
<li>
<a href="TikTokプロフィールURL" class="flowbtn15 my_tiktok2">
<i class="fa-brands fa-tiktok"></i>
</a>
</li>
<li>
<a href="Amazon欲しいものリストURL" class="flowbtn15 my_amazon2">
<i class="fa-brands fa-amazon"></i>
</a>
</li>
<li>
<a href="https://line.me/ti/p/%ライン@のアカウント" class="flowbtn15 my_line2">
<i class="fa-brands fa-line"></i>
</a></li>
<li>
<a href="ピンタレストプロフィールURL" class="flowbtn15 my_pinterest2">
<i class="fa-brands fa-pinterest"></i>
</a>
</li>
<li>
<a href="http://b.hatena.ne.jp/add?mode=confirm&url=https://自分のサイトドメイン名" class="flowbtn15 my_hatena2">
<i class="fa-solid fa-b"></i>
</a>
</li>
<li>
<a href="https://getpocket.com/edit?url=https://自分のサイトドメイン名/" class="flowbtn15 my_pocket2">
<i class="fab fa-get-pocket"></i>
</a>
</li>
<li>
<a href="https://feedly.com/i/subscription/feed/https://自分のサイトドメイン名/feed" class="flowbtn15 my_feedly2">
<i class="fa-solid fa-rss"></i>
</a>
</li>
<li>
<a href="楽天ルームURL" class="flowbtn15 my_rakutenroom2">
<i class="fa-solid fa-registered"></i>
</a>
</li>
<li>
<a href="リンクドインURL" class="flowbtn15 my_linkedin2">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
<li>
<a href="DiscordのURL" class="flowbtn15 my_discord2">
<i class="fa-brands fa-discord"></i>
</a>
</li>
<li>
<a href="PodcastのURL" class="flowbtn15 my_podcast2">
<i class="fa-solid fa-podcast"></i>
</a>
</li>
</ul>
snsbtniti
を5
,flowbtn
を15
,my_〇〇
を2
に変更しています。
/* ボタン全体の外枠指定 */
.snsbtniti5 {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* ulタグの内側余白なしと箇条書きの黒丸削除 */
ul.snsbtniti5 {
padding: 0!important;
list-style-type: none!important;
}
/* ボタン同士の余白調整 */
.snsbtniti5 li {
flex: 0 0 19%;/* ボタンが2列に並ぶ指定 */
text-align: center!important;
}
/* ボタン全体 */
.flowbtn15 {
font-family: 'Noto Sans Japaneses', sans-serif; /* フォント指定 */
position: relative;
display: inline-block;
width: 100%; /* ボタンの横幅 */
height:50px; /* ボタンの高さ */
font-size:33px;/* アイコンサイズ */
border-radius: 4px;/* ボタンの角を少し丸める */
transition: .5s;
text-decoration: none;
margin-bottom:5px;/* ボタン下の余白 */
}
/* アイコンとフォントの位置 */
.flowbtn15 i{
position:absolute;
top:50%;/* アイコン位置調整 */
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* スマホ向け調整 */
@media(max-width:500px) {
.flowbtn15 {
width:100%!important; /* ボタンの横幅を最大へ */
}}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover{
text-decoration: none;
cursor: pointer;
color: #fff;
}
/*InstagramとAmazonのアイコンを少し大きく */
.flowbtn15 i.fa-brands.fa-instagram,.flowbtn15 i.fa-brands.fa-amazon{
font-size: 38px;
}
/* エックス枠線 */
.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;
}
/* プロフィール枠線 */
.my_profile2 {
border: solid 1px #000;
color: #000;
}
/* プロフィールマウスホバー時 */
.my_profile2:hover {
border: solid 1px #000;
background-color: #000;
}
.flowbtn15
でボタンカラーの#fff;
指定を削除。/* マウスホバー時*/
の挙動を変更しています。
そのほか調整する場合は/* コメント */
を参考にしてください。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉚枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、24〜26行目の6箇所を追記または変更してください。
/* ボタン全体 */
.flowbtn15 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 100%;
height: 50px;
font-size: 33px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #fff!important;/* アイコンカラー */
background-color: #000;/* 背景カラー */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover {
text-decoration: none;
cursor: pointer;
color: #000!important;/* アイコンカラー */
border: solid 1px #000;/* 枠線カラー */
background-color: #fff;/* 背景カラー */
}
.flowbtn15
のbackground-color:#000;
.flowbtn15:hover
のcolor:#000;
border: solid 1px #000;
をそれぞれ同じカラーに指定すると、キレイな統一色になります。
カラーコードを3か所変更すれば、お好きな色を指定できます。
基本コードは㉚枠線バージョンと同じものを使ってください。
CSSの/* エックス枠線 */
より下のコードは削除しましょう。
そして以下の14〜16行目、25〜26行目の5箇所を追記してください。
/* ボタン全体 */
.flowbtn15 {
font-family: 'Noto Sans Japaneses', sans-serif;
position: relative;
display: inline-block;
width: 100%;
height: 50px;
font-size: 33px;
border-radius: 4px;
transition: .5s;
text-decoration: none;
margin-bottom:5px;
color: #000!important;/* アイコンカラー */
background-color: #fff;/* ここは白で固定 */
border: solid 1px;/* 枠線の指定 */
}
/* マウスホバー時、ボタン内を白に指定 */
.flowbtn15:hover {
text-decoration: none;
cursor: pointer;
color: #fff!important;
border: solid 1px #000;/* 枠線カラー */
background-color: #000;/* 背景カラー */
}
.flowbtn15
のcolor: #000;
.flowbtn15:hover
のborder: solid 1px #000;
background-color:#000;
をそれぞれ同じカラーに指定すると、バランスが良くなります。
/* ボタン同士の余白調整 */
.snsbtniti li {
flex: 0 0 33%;/* この数値を変える */
text-align: center!important;
}
どのボタンにもflex:0 0 〇〇%;
の指定がありますので、そこを変更してください。
設置場所の横幅を100%とし、ボタン同士の余白をどのくらいあけるか?の指定です。
例えば33%
でボタン3つなら「33+33+33」となり、ちょうど3等分の余白を自動であけてくれます。
20%に変更すれば、5つ並びへ。
25%に変更すれば、4つ並びになります。
/* ボタン全体の外枠指定 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
/* この2行を削除 */
max-width:350px;
margin:0 auto;
}
また設置場所の画面の幅に自動で合わせたければ、上記の2行を削除してください。
ただし、スマホから見た兼ね合いもあるため、必ずPCと合わせて確認してね。
/* スマホの並び数 */
@media(max-width:500px) {
.snsbtniti li {
flex: 0 0 25%;/* 4列指定 */
text-align: center!important;
}
}
/* タブレット以上の並び数 */
@media(min-width:800px) {
.snsbtniti li {
flex: 0 0 16%;/* 6列指定 */
text-align: center!important;
}
}
flexをそれぞれに指定してあげれば変更できます。
/* ボタン全体の位置調整 */
.snsbtniti {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
max-width:350px;/* ここを変更する */
margin:0 auto;
}
.snsbtniti
のmax-width
の値を小さくしてください。
.snsbtniti p {
display: none;
}
おそらく空のPタグが自動挿入されているので、上記コードを追記してみてください。.snsbtniti
はボタンの種類によって、.snsbtnit2
や.snsbtniti3
になっているのため、そこだけ注意しましょう。
Before
color: #fff;
After
color: #fff!important;
セミコロン「;」で指定いるところを優先「!important;」に変更してみてください。
まずCSSをコンパクト化ツールでコメントを一括削除します。
削除したコードをコピーしてください。
続いてCSS整形サイトを利用するとコメントを削除しつつ、見やすいコードに置き換えてくれます。
はい、可能です。
→詳細は公式サイトをご確認ください。
以上、SNSアイコンボタンの作例でした。
Font Awesomeは、2,000以上の無料アイコンがありますので、ご希望のものがなければ、応用して使ってください。
この記事が気に入ったら
フォローしてね!
記事への質問等はこちらからどうぞ
コメント一覧 (30件)
htmlとcssでクラス名ずれてるやつあるよ、確認してから書けよ
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」部分で調整してください。
よろしくお願いします。
ありがとうございます。Facebookのボタンの問題は解決いたしました。
名前側にSNSアイコンを近づけるのができませんでした。そちらのコードを入力したらそのまま本文に入力されてしまいました…。入力する場所が間違っているのでしょうか…。
ラッコ様
いえ本文ではなく、style.cssに追加してください。
よろしくお願いします。
はじめまして。今回このページを参考に自分のブログにTwitterのフォローボタンを設置しようとしたのですが、
何回やってもcssがうまく反映されません。原因を教えていただけますか?
サイドバーのSNSフォローはこちらというところです。よろしくお願いします。
なた様
サイトを確認したところ、以下のように反映されていますが「Twitter」テキスト部分の位置調整をしたいということでしょうか?
であれば以下の「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が使えるのでしたら、おそらく大丈夫なはずです。
よろしくお願いいたします。
※日本語が含まれていないコメントは投稿できません。