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

くるみ

JINのプロフィール、デザイン的に被りやすいから差別化したいな

ということで今回は

JINを使っているがプロフィールのデザインをもっといい感じにしたい
他のサイトで同じようなプロフィール欄をよく見るから差別化したい

という方に向けて、そんなJINのプロフィール欄を可愛くするカスタマイズ方法をまとめました。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

私と一緒に見ていこう！

くるみ

お品書き

プロフィールボックスの完成イメージ
JINのプロフィール欄のカスタマイズ方法
- バックアップは忘れずにしておこう
- CSSを追加する
CSSの変更が反映されない場合の対処法
- キャッシュ系プラグインを疑う
- プラウザのキャッシュを削除
まとめ

プロフィールボックスの完成イメージ

before

after

完成イメージは上の通りです。PC・モバイルで特に違いはありません。

各種SNSボタンを鮮やかに
文字色を少し薄めにしておしゃれに
余白を十分にとり圧迫感を緩和

JINのプロフィールウィジェットは、カスタマイズせずともデフォルトのものがとても美しいので他のサイトと被りがちなのが難点でした。

そこで今回のように少しテイストを変えることで、記事を邪魔しない程度に目を引くものにするだけでなく、他サイトとの差別化を図ることができます。

JINのプロフィール欄のカスタマイズ方法

本カスタマイズはCSSを追記するだけで完成するものになります。

コピペするだけの簡単なものなので安心してくださいね。

バックアップは忘れずにしておこう

早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。

「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

【カスタマイズ時に必須】WordPressでCSSのバックアップをとる方法ファイルをいつでも元の状態に戻せるようにしたら、さっそく本題のカスタマイズに移っていきましょう。

CSSを追加する

まず以下のどれかの方法でCSSのコードをコピペします。

「追加CSS」に追加
「テーマエディター」を使って追加
FTPソフトを使って追加

「追加CSS」が最もお手軽にできるよ

くるみ

「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

【初心者向け】WordPressでCSSを編集する方法を徹底解説

コードはこちら

.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';
}

コメント無しのコードはこちら

.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';
}
.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';
}

「お好みの色に」とコメントアウトしてある箇所を変えることで、プロフィール欄の先端の色を変えることができます。

更に各種SNSボタンのテキストを変えることもできます。Twitterの場合などはユーザー名などにしてみてもいいかもしれませんね。

それらの調整も終わればカスタマイズは完成。お疲れ様です。

お疲れ様！

くるみ