シン・マコ
2022.02.10 (更新日:2022.06.06)

【css】SNS用フォローボタン2種類の解説です。

  • css
  •  
     
    シンプルに力強く。

    数多くあるSNSボタン。
    今回は私の厳選SNSボタンを紹介します。
    カラーボタンはマウスを重ねると色が反転します。
    モノクロボタンは平面的でシンプルなデザインです。
    二つともとても気に入ってます。

    丸いカラーのSNSボタンとシンプルなピクトグラム風のSNSボタンデザインの紹介です。

    固定ページプロフィール用の丸カラーボタンから紹介します。

    私はフォローボタンとして使用してます。

    headerの間に下記コードを記載してください。

    httpsのコードなので外部読み込みです。

    
    <script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>
    

    本文(content)に下記コードを記載。

    記事本文ですよ。

    
    
    <ul class="snsbtniti">
    
            <li><a href="https://twitter.com/sinjotigers" class="flowbtn4 fl_tw2">
                      <i class="fab fa-twitter"></i><div>Twitter</div></a></li>
    
            <li><a href="https://www.instagram.com/sinjotigers/" class="flowbtn4 insta_btn2">
                      <i class="fab fa-instagram"></i><div>Instagram</div></a></li>
    
            <li><a href="https://www.youtube.com/user/sinjonrp/featured" class="flowbtn4 fl_yu2">
                      <i class="fab fa-youtube"></i><div>YouTube</div></a></li>
    
    </ul>
    
    

    cssに下記コードを記載。

    外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。

    
    /* ボタン全体の装飾 */
    .flowbtn4{
    font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
    border-radius:50%;
    display:inline-block;
    width:70px;
    height:70px;
    font-size:30px;
    transition:.5s;
    text-decoration:none;
    }
    /* ボタンマウスホバー時テキストカラー */
    .flowbtn4:hover{
    color:#fff!important;
    }
    /* Twitter */
    .flowbtn4.fl_tw2{
    border:solid 1px #55acee;
    color:#55acee;
    }
    /* Twitterマウスホバー時 */
    .flowbtn4.fl_tw2:hover{
    border:solid 1px #55acee;
    background:#55acee;
    }
    /* Instagram */
    .flowbtn4.insta_btn2 {
    border:solid 1px #c6529a;
    color:#c6529a;
    }
    /* Instagramマウスホバー時 */
    .flowbtn4.insta_btn2:hover{
    border:solid 1px #c6529a;
    background:#c6529a;
    }
    
    /* YouTube */
    .flowbtn4.fl_yu2{
    border:solid 1px #fc0d1c;
    color:#fc0d1c;
    }
    /* YouTubeマウスホバー時 */
    .flowbtn4.fl_yu2:hover{
    border:solid 1px #fc0d1c;
    background:#fc0d1c;
    }
    /* ボタン内テキスト調整 */
    .flowbtn4 div{
    font-size:11px;	
    font-weight:bold;
    position:relative;
    bottom:0px;		
    }
    .fab{
    	margin-top:10px;
    }
    /* ボタンの位置 */
    .snsbtniti{
    display:flex;
    flex-flow:row wrap;
    justify-content:flex-end;
    padding-right:50px;
    }
    /* ボタン同士の余白 */
    .snsbtniti li{
    	text-align:center;
    	letter-spacing:0em;
    	padding-right:10px;
      list-style-type:none;
    }
    @media screen and (max-width:568px){
    	.snsbtniti{
    	padding-right:10px;
    }
    .flowbtn4{
    	width:60px;
    	height:60px;
    }
    .flowbtn4 div{
    	display:none;
    }
    .fab{
    	margin-top:15px;
    }
    }
    

    codepen用です。

    sinjotigersは私のアカウントです。

    See the Pen
    Untitled
    by マージン (@sinjotigers)
    on CodePen.

    続いてfooterで使用しているSNSボタン。平面的なデザインです。

    これもフォロー用として使用してます。

    headerの間に下記コードを記載してください。

    httpsのコードなので外部読み込みです。

    
    
    <script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>
    
    

    本文(content)に下記コードを記載。

    記事本文ですよ。

    
    
    <footer id="footer">
        <div class="navi-row">
          <ul class="sns-navi">
            <li><a href="https://twitter.com/sinjotigers">
                <i class="fab fa-twitter"></i></a></li>
            <li><a href="https://www.youtube.com/user/sinjonrp/featured">
                <i class="fab fa-youtube"></i></a></li>
            <li><a href="https://www.instagram.com/sinjotigers/">
                <i class="fab fa-instagram"></i></a></li>
          </ul>
        </div>
    </footer>	
    
    

    cssに下記コードを記載。

    外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。

    
    #footer {
      position: relative;
      margin-top: 40px;
      color: #fff;
      padding: 40px 20px;
      background: #333;
    }
    #footer a {
      text-decoration: none;
      color: #fff;
    }
    #footer a:hover {
      text-decoration: underline;
    }
    
    @media screen and (max-width: 767px) {
      #footer {
        padding: 20px 20px;
        background: #333;
      }
    }
    .navi-row {
      display: flex;
      margin-top: 40px;
    }
    @media screen and (max-width: 767px) {
      .navi-row {
        display: block;
        margin-top: 15px;
      }
    }
    /* sns-navi */
    #footer .sns-navi {
      margin: 0 0 0 auto;
      padding: 0;
    }
    #footer .sns-navi li {
      display: inline-block;
      margin: 0 20px 0 0;
      padding: 0;
      font-size: 20px;
    }
    #footer .sns-navi li:last-child {
      margin-right: 0;
    }
    
    @media screen and (max-width: 767px) {
      #footer .sns-navi {
        margin: 20px 0 0;
        padding: 0;
      }
      #footer .sns-navi li {
        margin: 0 20px 0 0;
        padding: 0;
        font-size: 18px;
      }
    }
    /* sitenavi */
    #footer .sitenavi {
      width: 50%;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #footer .sitenavi li {
      display: inline-block;
      margin: 0 0 0 20px;
      padding: 0;
    }
    #footer .sitenavi li:first-child {
      margin-left: 0;
    }
    
    @media screen and (max-width: 767px) {
      #footer .sitenavi {
        width: 100%;
        text-align: center;
        font-size: 12px;
      }
    }
    
    

    codepen用です。

    sinjotigersは私のアカウントです。

    See the Pen
    Untitled
    by マージン (@sinjotigers)
    on CodePen.

    今後はシェアボタンの解説もやっていきます。

    Profile
    プロフィール
       
    Popular
    人気記事
    Archive
    アーカイブ
    Twitter
    ツイッター