【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をコピペするだけ】

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

19 COMMENTS

アオミネ

はじめまして
この記事を参考にさせていただきました
コードを貼り付けてみたのですが、上ボーダーが飛び出したような形になってしまいました。色々調べてみましたが、自分では解決できません。もし良かったら、解決策を教えていただきたいです。

https://aomine.blog

よろしくお願いします

返信する
おはようポテトのアイコン おはようポテト

アオミネ様

初めまして。
以下のコードを追記していただければ解決するかと思います。

—————
@media (min-width: 768px){
.sidebar_style4 .widget {
padding-left: 0;
}
}
—————

ご確認いただけますと幸いです!

返信する
アオミネ

返信ありがとうございます
コードをコピペして貼り付けてみましたが、改善されませんでした,,,
貼り付ける位置等、何か他に問題があるのでしょうか?

返信する
おはようポテトのアイコン おはようポテト

アオミネ様

なるほど…
でしたらお手数ですが、代わりに下記のコードを追記してみてください。

—————
@media (min-width: 768px){
.sidebar_style4 .widget {
padding-left: 0!important;
}
}
—————

返信する
アオミネ

たびたびすみません
やっぱり、ダメみたいです,,,

おはようポテトのアイコン おはようポテト

でしたら下記のコードはいかがでしょうか。
—————
@media (min-width: 1024px){
.sidebar_style4 .widget {
padding-left: 0!important;
}
}
@media (min-width: 768px){
.sidebar_style4 .widget {
padding-left: 0!important;
}
}
—————

もしこれでも改善しないようであれば、
「カスタマイズ」→「サイトデザイン設定」→「サイドバーデザインの選択」の設定を
「スタイル1」にしてみてください。
(こちらは応急処置的な方法なので、上のコードで改善されるのが1番望ましいですが…)

アオミネ

返信遅れてすみません…

@media (min-width: 1024px){
.sidebar_style4 .widget {
padding-left: 0!important;
}
}
@media (min-width: 768px){
.sidebar_style4 .widget {
padding-left: 0!important;
}
}

こちらのコードで無事、改善しました!
ありがとうございました!

返信する
アオミネ

たびたびすみません…
スマホで画面を確認した際、SNSのボックス内のテキストが表示されていませんでした…
PCの方では、正常に表示されています。

(コメントで頂いたコードをコピペしたことによる影響ではないようです)

すみません、もしよろしければ、こちらも解決策を教えていただきたいです。

https://aomine.blog

お手数ですが、スマホの方で開いてご確認いただければ幸いです
よろしくお願いします

返信する
おはようポテトのアイコン おはようポテト

モバイル端末で確認させていただきましたが、
SNSボタン内のテキストは表示されていますね…

確認になりますが、テキストが表示されないのは「プロフィールボックスのSNSボタン」
で合っていますでしょうか?

返信する
アオミネ

返信ありがとうございます
「プロフィールボックスのSNSボタン」であっています

そちらのモバイル端末の方で表示されるということは、ブログの読者様が見る分には何の影響もないということでひとまず安心しました

この不具合に関しては自分の端末が原因かもしれません(iPhone7をまだ現役で使用しています…)

もしよろしければ、TwitterのDMの方で画像をお送りしてもよろしいでしょうか?
(そちらのモバイル端末のスクショも見せていただけると嬉しいです)

返信する
おはようポテトのアイコン おはようポテト

承知しました。
でしたらDMの方でスクショを送っていただけると助かります。

返信する
アオミネ

昨日の19:00頃にDMの方で画像を送らせていただきました
都合の良い時に、ご確認ください

よろしくお願いします

返信する
maru

コメント失礼致します。
少し道が外れた質問になりますが、申し訳ありません。

プロフィール欄ですが、サイドバーにプロフィール自体が出ません。
トップページのサイドバーのデザインが何を押しても反映されなくて困っています、、

トップページはJINのデモでサイトスタイルを作ったのですがその時からサイドバーだけデモのように変わりませんでした。

どうやれば変わるのでしょうか、、、。
お返事頂けますと幸いです。よろしくお願い致します。

返信する
おはようポテトのアイコン おはようポテト

maru様
コメントありがとうございます。

具体的な事象を確認させていたただきたいので、
もしよろしければサイトURLをご教授いただけますでしょうか?

よろしくお願いします。

返信する
maru

お返事ありがとうございます!

https://maru0u0.blog/

よろしくお願い致します。

それとテーマエディターのスタイルシートに
このテーマは壊れています。 Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.
と出ているのを見つけて、、よろしければ重ねてお願いしたいです、、。

返信する
おはようポテトのアイコン おはようポテト

maruさん

ご返答ありがとうございます。
2件ほど確認させてください。

>プロフィール欄ですが、サイドバーにプロフィール自体が出ません。

こちら、「外観」→「ウィジェット」にてプロフィールボックスは配置されていますでしょうか?

>テーマエディターのスタイルシートにこのテーマは壊れています。と出ている

JINをご利用になっていると思いますが、子テーマはご利用になっていますでしょうか?
もしかすると子テーマにstyle.cssを置いてないのが原因かもしれません。

返信する
maru

ありがとうございます。
>こちら、「外観」→「ウィジェット」にてプロフィールボックスは配置されていますでしょうか?

配置されていませんでした、、どうすれば配置できますでしょうか?

>JINをご利用になっていると思いますが、子テーマはご利用になっていますでしょうか?

jin-childというテーマを使っています。

よろしくお願いします。

返信する
maru

ぽてとさん、度々コメント失礼します。

プロフィールの件ですが、無事にウィジェットに追加し、サイドバーにカスタムした状態で表示できるようになりました。ありがとうございます。

テーマエディターの壊れた部分は何か消してはいけないものを消してしまったようでもう少し頑張ってみます。

返信する

アオミネ へ返信する コメントをキャンセル

この記事を書いた人
おはようポテトのプロフィール画像
おはようポテト

22年4月から自社開発企業のWebエンジニアとして働く大学生。このサイトでは主にプログラミングやWordPressカスタマイズについて発信しています。他に運営しているのは宅配冷凍弁当の特化ブログなど。お問い合わせはこちらよりどうぞ。