【JIN】他と差を付ける！プロフィールボックスのカスタマイズ方法

.widget.widget-profile{
  border-top: 5px solid #3b4675; /* お好みの色に */
  border-radius: 5px;
}
.my-profile{
  color:#5f5f5f;
}
@media screen and (min-width: 768px){
  .my-profile {
    padding-bottom: 0px!important;
  }
}
@media screen and (max-width: 767px){
  .my-profile {
    padding-bottom: 5px!important;
  }
}
.my-profile .profile-sns-menu{
  background-color:transparent!important;
  position: relative;
  margin-top:1px;
}
.profile-sns-menu-title {
  display:none;
}
.my-profile .profile-sns-menu ul {
  flex-wrap:wrap;
}
.my-profile .profile-sns-menu ul li{
  width:30%;
  margin: 5% 1.5% 0%;
}
.my-profile .profile-sns-menu ul li a{
  width:100%;
  padding-top: 7px;
  padding-bottom:45px;
  text-align: center;
  letter-spacing: .02em;
  font-size:1.4em;
  border-radius: 3px;
}
.my-profile .profile-sns-menu i:before{
  margin-bottom:4px
}
.profile-sns-menu a:after{
  font-size:.01em;
  vertical-align: top;
  padding-top:5px
}
.profile-sns-menu .pro-tw a{
  color: #62bcf4!important;
  background-color:rgba(98,188,244,.1)!important;
}
.profile-sns-menu .pro-tw a:after{
  content:'Twitter'; /* ユーザー名(例：@ohayoupoteto22)などにすることも可能 */
}
.profile-sns-menu .pro-fb a{
  color: #3B5998!important;
  background-color:rgba(59,89,152,.1)!important;
}
.profile-sns-menu .pro-fb a:after{
  content:'Facebook';
}
.profile-sns-menu .pro-insta a{
  color: #fff!important;
  background:repeating-linear-gradient(45deg,rgba(254,208,110,.5),rgba(252,0,119,.5),rgba(63,53,238,.5))!important;
}
.profile-sns-menu .pro-insta a:after{
  content:'Instagram';
}
.profile-sns-menu .pro-youtube a{
  color: #DA1725!important;
  background-color:rgba(218,28,37,.1)!important;
}
.profile-sns-menu .pro-youtube a:after{
  content:'YouTube';
}
.profile-sns-menu .pro-line a{
  color: #00B900!important;
  background-color:rgba(0,185,0,.1)!important;
}
.profile-sns-menu .pro-line a:after{
  content:'LINE';
}
.profile-sns-menu .pro-contact a{
  color: #666!important;
  background-color:rgba(0,0,0,.1)!important;
}
.profile-sns-menu .pro-contact a:after{
  content:'Contact';
}