くるみ
ということで今回は
- JINを使っているがプロフィールのデザインをもっといい感じにしたい
- 他のサイトで同じようなプロフィール欄をよく見るから差別化したい
という方に向けて、そんなJINのプロフィール欄を可愛くするカスタマイズ方法をまとめました。
参考になれば幸いです⸝⸝- ̫ -⸝⸝
お品書き
プロフィールボックスの完成イメージ
before
after
- 各種SNSボタンを鮮やかに
- 文字色を少し薄めにしておしゃれに
- 余白を十分にとり圧迫感を緩和
JINのプロフィールウィジェットは、カスタマイズせずともデフォルトのものがとても美しいので他のサイトと被りがちなのが難点でした。
そこで今回のように少しテイストを変えることで、記事を邪魔しない程度に目を引くものにするだけでなく、他サイトとの差別化を図ることができます。
JINのプロフィール欄のカスタマイズ方法
本カスタマイズはCSSを追記するだけで完成するものになります。コピペするだけの簡単なものなので安心してくださいね。
バックアップは忘れずにしておこう
早速カスタマイズしていきたいところですが、万が一の事態に備えて事前にバックアップを取っておくことをオススメします。
「そもそもバックアップってどうすればいいの…?」という方は以下の記事を参考にしてみてください。

CSSを追加する
まず以下のどれかの方法でCSSのコードをコピペします。
- 「追加CSS」に追加
- 「テーマエディター」を使って追加
- FTPソフトを使って追加
くるみ
「カスタマイズするの初めてでそもそも追加の仕方が分からない…」という方は以下の記事を参考にしてみてください。

コードはこちら
.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」キー |
まとめ
主にSNSボタンをいじりましたが、他テーマのように背景にも画像を加えてみても面白いかもしれませんね。
他のJINカスタマイズに関しては以下の記事でまとめているので、ぜひ参考にしてください。
JINのおしゃれなカスタマイズ総まとめ【CSSをコピペするだけ】
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
はじめまして
この記事を参考にさせていただきました
コードを貼り付けてみたのですが、上ボーダーが飛び出したような形になってしまいました。色々調べてみましたが、自分では解決できません。もし良かったら、解決策を教えていただきたいです。
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の方で画像を送らせていただきました
都合の良い時に、ご確認ください
よろしくお願いします
コメント失礼致します。
少し道が外れた質問になりますが、申し訳ありません。
プロフィール欄ですが、サイドバーにプロフィール自体が出ません。
トップページのサイドバーのデザインが何を押しても反映されなくて困っています、、
トップページはJINのデモでサイトスタイルを作ったのですがその時からサイドバーだけデモのように変わりませんでした。
どうやれば変わるのでしょうか、、、。
お返事頂けますと幸いです。よろしくお願い致します。
maru様
コメントありがとうございます。
具体的な事象を確認させていたただきたいので、
もしよろしければサイトURLをご教授いただけますでしょうか?
よろしくお願いします。
お返事ありがとうございます!
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を置いてないのが原因かもしれません。
ありがとうございます。
>こちら、「外観」→「ウィジェット」にてプロフィールボックスは配置されていますでしょうか?
配置されていませんでした、、どうすれば配置できますでしょうか?
>JINをご利用になっていると思いますが、子テーマはご利用になっていますでしょうか?
jin-childというテーマを使っています。
よろしくお願いします。
ぽてとさん、度々コメント失礼します。
プロフィールの件ですが、無事にウィジェットに追加し、サイドバーにカスタムした状態で表示できるようになりました。ありがとうございます。
テーマエディターの壊れた部分は何か消してはいけないものを消してしまったようでもう少し頑張ってみます。
おはようポテトさん
今回カスタマイズを参考にさせていただきました
とても気に入っていて助かりましたありがとうございます。
今回他の方のコメントでもあったのをお見掛けしたのですが
CSS追加後PCとiPhone13でも確認したのですが
モバイル端末の方だけSNSボタンの名称の表記がされません。
何かアドバイス等いただけると幸いです。
お手数をおかけしますがご対応頂けたら嬉しいです
いつも有益な記事をありがとうございます!
今回、プロフィールのSNSアイコンをカスタマイズさせていただきました。
cssをコピペするだけのとても簡単な作業でした。
ただ、モバイル画面の方では、SNSの名称(TwitterやInstagram)と問い合わせの名称が消えてしまう事象が発生しています。
色味は問題なくカスタマイズされています。
こちら解決策はございますでしょうか?
よろしくお願いいたします。