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

【JIN】他サイトと差を付ける!プロフィール欄のカスタマイズを紹介

くるみ

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

ということで今回は

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

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

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

私と一緒に見ていこう!

くるみ

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

before

JINのカスタマイズ前のプロフィールボックス

after

JINのカスタマイズ後のプロフィールボックス

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

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

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

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

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

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

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

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

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

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

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

CSSを追加する

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

  • 「追加CSS」に追加
  • 「テーマエディター」を使って追加
  • FTPソフトを使って追加
「追加CSS」が最もお手軽にできるよ

くるみ

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

WordPressで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の場合などはユーザー名などにしてみてもいいかもしれませんね。

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

お疲れ様!

くるみ

CSSの変更が反映されない場合の対処法

「CSSを追記して保存したにも関わらず反映されないぞ…」となった場合は、以下が原因であることが多いです。

  • キャッシュ系プラグイン
  • プラウザキャッシュ

キャッシュ系プラグインを疑う

「WP Fastest Cache」や「WP Super Cache」をはじめとしたキャッシュ系プラグインをお使いの場合は、そちらの方でキャッシュを削除してください。

プラウザのキャッシュを削除

お使いのブラウザのキャッシュを削除してみてください。

Chromeをお使いの場合は以下のショートカットキーで削除できます。

Windows[Shift]+[Ctrl]+[Delete]キー
Mac[shift]+[command]+[delete」キー

まとめ

以上、JINのプロフィール欄をより可愛くするカスタマイズ方法でした。

主にSNSボタンをいじりましたが、他テーマのように背景にも画像を加えてみても面白いかもしれませんね。

他のJINカスタマイズに関しては以下の記事でまとめているので、ぜひ参考にしてください。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】

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

コメントを残す