買い物アプリ漫画アニメお問い合わせおすすめの副業”治験バイト”に参加してきたホームブログスキルCSS8種類のSNSフォローボタンのCSSカスタマイズ18選2019/03/31この記事では「8種類のSNSボタン」と「お問い合わせ用のメールボタン「プロフィール用のボタン」のカスタマイズコードを「18パターン」載せています。どれもコピペで使えますが、最初にHTMLコードを簡単に解説します。TwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contactこのページのアイコンは9〜10個で構成しています。わかりやすいよう各URL先を(赤字)、リンク先の名前を(緑字)にしています。Awesome5」を使用しています。fa-envelope"></i><div>Contact</div></a></li></ul>各URLの詳細は「よくある質問コーナー」に記載しています。不要なアイコンを消す場合は、<li>〜</li>まで消してください。fa-line"></i><div>LINE</div></a></li>までです。お問い合せまたそれぞれ(緑字部分)を変更すればボタン内の文字を変更できます。※文字なしタイプのボタンは関係ありません。続いて、CSSコードです。(style.css)にコピペしましょう。補足うまくいかなかった方は「よくある質問」を設置したので、そちらもあわせて参照ください。気になるボタンをクリックしていただくと、コードの記載場所までひとっ飛びできます。TwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contact!!!TwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contact!TwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfile1.四角いベタ塗りのSNSボタン(文字付き)SNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contactマウスを乗せるとフワッと浮き上がります。ボタンカラーはbackground部分で変更してね。33%;text-align:center!important;}2.文字付き四角い枠線ボタンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contactマウスを乗せると枠線と同じカラーに変わります。CSSが少しだけ細かくなるので注意してね。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」3.丸いベタ塗りのSNSボタン(文字付き)SNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contact丸くしてみました。フォントを変えるだけでも雰囲気が変わるよ。*/.flowbtn3:hover{-webkit-transform:translateY(-5px);-ms-transform:translateY(-5px);transform:translateY(-5px);text-decoration:none;}CSSが上手くいかないときは「よくある質問コーナーへGO」4.丸い枠線のSNSボタン(文字付き)SNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contact枠線の丸いバージョン。コードの微調整が必要だよ。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」5.ボタンの下に文字を表示させるSNSボタンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contactオシャレなボタンです。キレイに見せるコツは「Instagram」のアイコンだけサイズを大きくすること。fa-envelope"></i><div>Contact</div></a></li></ul>補足サンプルボタンは.flowbtn5にmargin-bottom:10px;を追加し、見た目を整えています。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」6.アプリアイコン風SNSボタンSNSボタン一覧表に戻る!多分使われないと思うけど、今回一番こだわったボタンです。100%);}CSSが上手くいかないときは「よくある質問コーナーへGO」7.グラデーションをかけた丸いボタンSNSボタン一覧表に戻る!グラデーションをかけてみました。女性向けサイトと相性が良さそうですね。100%);font-size:26px;}CSSが上手くいかないときは「よくある質問コーナーへGO」8.丸い枠線のSNSボタンSNSボタン一覧表に戻る!丸い枠線は少しスタイリッシュになりますね。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」9.アイコンフォントのみで作るSNSボタンSNSボタン一覧表に戻るコードが短いので、初心者の方でも簡単。はてブっぽいアイコンは「バージョン5.8.0」で追加されたものです。translateY(-5px);}CSSが上手くいかないときは「よくある質問コーナーへGO」10.アイコンフォントのみモノクロ風SNSボタンSNSボタン一覧表に戻る当サイトのようにブラックベースのサイトだと相性良さそうですね。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」11.横長ベタ塗りのSNSボタンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileバランスが悪かったので「プロフィールボタン」も追加しました。マウスを乗せると文字がクルクル回転します。!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」13.アイコン・テキスト・点線を組み合わせたSNSボタンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileここまでくると趣味の域ですね......。マウスを乗せると文字がビヨーンって伸びます。#bbb;を削除してください。48%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」14.付箋風SNSフォローボタンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfile13ではキリが悪かったので、無理やり作ったボタンです。48%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」15.横長ベタ塗りの中央寄せボタン(文字付き)SNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfile文字を中央にしたバージョン。マウスを乗せると少し透明になります。48%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」16.文字付き四角い枠線ボタンのダークカラーバージョンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@Contactワントーンに揃えると一気に雰囲気が変わりますね。33%;text-align:center!important;}CSSが上手くいかないときは「よくある質問コーナーへGO」17.丸いボタンのダークカラーバージョンSNSボタン一覧表に戻る!ブラック系だと丸くてもスタイリッシュになります。マウスを乗せるとカラーが変わるよ。!important;}18.横長ボタンダークバージョンSNSボタン一覧表に戻るTwitterInstagramFacebookFeedlyPocketHatenaYouTubeLINE@ContactProfileサイトを選びますが、シックなサイトにはぜひ。マウスを乗せるとカラーが変わります。質問SNSボタン同士の余白を調整したい初めまして!こちらのページ『https://kagesai.net/sns-follow-button-design/#SNSCSS10』を参考に、デザイン7のフォローボタンを設置させていただきました。分かりやすく詳しい説明で、非常に役立ちました。ありがとうございます!1つ質問なのですが、ボタン3つのみ利用時に、ボタン同士の余白を少なくし、まとめて中央に寄せることは可能でしょうか?もし可能でしたら、ご回答いただければ大変ありがたく思います。参考に私のサイトURLを貼り付けます→https://◯◯◯◯.com/よろしくお願い致します。回答を見る回答なるほど、サイドバーに小さめのボタンを3つだけ貼り付ける場合、確かに余白がありすぎてブサイクでしたね。auto;}width:200px;を変更することで、ボタン同士の余白を調整できます。33%;の33%部分を変更すると、並べる個数を変えられます。4つ並びにしたければ、24%へ変更5つ並びにしたければ、19%へ変更スマホ表示も意識するなら、「3〜5つ並び」にすると綺麗に収まります。質問liタグの黒ポチが消えません。{width:0!important;}質問ボタンの下に謎のボックスができて困ってます回答を見る回答テーマによってなのかな?「pタグ」が勝手に挿入されちゃう場合があるみたいですね。「@より後ろのアカウント名」をコピペするFeedly・Hatena・Pocketこの3つはそれぞれ「自分のサイトドメイン名」なので、当サイトで言えばkagesai.netになります。Contact・Profile自分の問い合わせフォームまたはプロフィールページのURLを貼り付けてください。自作フォローボタンだと愛着が湧きますよね。カスタムしていただければ〜。【見出しタグの使い方】記事はh2〜h4だけで構成しようこの記事を書いた人カゲオ陰ながら最高の人生を模索するブログ「カゲサイ」の管理人です。自分が好きなものやブログのことを色々書いています。2019年4月8日ff様ご指摘ありがとうございます。確認したところ「グラデーションボタン」のclassのズレを発見したので、修正致しました。現状そこくらいかと思いますが、また何かあればコメントいただけますと幸いです。お手間でなければ「間違っている箇所」をご指摘頂けますと非常に助かります。ご不便をおかけして申し訳ありません。今後とも「カゲサイ」をよろしくお願いします。暖かいコメントありがとうございます。参考になった様で何よりです。今後とも精進していこうと思っていますので、「カゲサイ」をよろしくお願いします。コメントをキャンセルメールアドレスが公開されることはありません。