【はてなブログ】スマホのプロフィール欄をおしゃれにカスタマイズしてみた

こんにちは、YUMAです！

今回はスマホのプロフィール欄を作成してみたので、どのように作ったのかここにまとめておきます。

最終的にプロフィールはこんなかんじになりました！！

割とイケてる！？

自分的には結構気に入ってます。特にSNSのアイコンとか。

大枠は、こちらの超有名カスタマイズを使わさせていただきました。

hitsuzi.hatenablog.com

また、instagramアイコンの色やグラデーションはこちらの記事を参考にさせていただきました。

sunsukeblog.com

YouTubeのアイコンの色は、このサイトを参照しました。

www.youtube.com

アイコンの画像はinstagramのアイコンから持ってきました。

instagramアイコンとYouTubeアイコンを追加して色もデザインしてみました。

SNSアイコンのサイズをちょっと大きくしました。

プロフィールのコードを貼っておきますね

<div class="hatena-module hatena-module-profile">

  <div class="hatena-module-title">プロフィール</div>

  <div class="hatena-module-body">

    <a href="http://www.yumaofficial.com/about" class="profile-icon-link">

      <img src="https://scontent-nrt1-1.cdninstagram.com/vp/62ab59c892904c2eaeaa4eea841cb045/5DB587C3/t51.2885-19/s150x150/64420627_636618783519897_8719186246884130816_n.jpg?_nc_ht=scontent-nrt1-1.cdninstagram.com" width="60" height="60" class="profile-icon">

    </a>

    <div class="profile-description">

      <span class="id">

        YUMA

        <a href="http://blog.hatena.ne.jp/guide/pro" title="はてなブログPro"><i class="blog-sprite-pro"></i></a>

      </span>

      <p>剣道、COD、乃木坂46が好きな雑記ブロガー！22歳。

      instagram毎日投稿してます。詳しくはアイコンをタップ！</p>

      <div class="flwtxt">YUMAをフォローする</div>

      <div class="sns_follow">

        <a href="https://blog.hatena.ne.jp/Psuke222/yuma-official.hatenablog.com/subscribe"class="follow_btn flwhtn"><i class="fa fa-bookmark"></i></a>

        <a href="https://twitter.com/yuma_tempa" class="follow_btn flwtw"><i class="fa fa-twitter"></i></a>

        <a href="https://www.instagram.com/yuma_selfie/" class="follow_btn flwig"><i class="fa fa-instagram"></i></a>

        <a href="https://www.youtube.com/channel/UCDFZpOZ9V6hU8vnznGrAFGg?view_as=subscriber" class="follow_btn flwyt"><i class="fa fa-youtube-play"></i></a>

      </div>

    </div>

  </div>

</div>

<style type="text/css">

.flwtxt{

    font-weight: bold;

    background:#00334e;

    padding:5px 0;

    /*margin:15px -11px 0;*/

    text-align:center;

    color:#fff;

}

.sns_follow{

    text-align:center;

    /*margin:0 -11px;*/

    padding:5px 0;

    background:#ECEEF1;

}

.follow_btn{

    display: inline-block;

    width: 40px;

	  margin:2px;

    height: 40px;

    line-height: 40px;

    font-size: 25px;

	  color:#ffffff;

    border-radius: 11px;

    text-align: center;

    vertical-align: middle;

    overflow: hidden;

    font-weight: bold;

}

.follow_btn:hover{

    opacity: 0.5; 

}

.sns_follow a{

 color:#fff !important;

}

.follow_btn.fa {line-height:40px}

.follow_btn.flwig{color:#fff;

  background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;

  border-radius:20%;}

.follow_btn.flwtw {background: #33BCF0;}

.follow_btn.flwyt {background: #FF0000;}

.follow_btn.flwhtn {

    background: #5F5F66;

    font-size:17px !important;

}

</style>