『Amazonフレッシュ』ならネットで注文
食品・飲料・日用品を自宅にお届け
30日間の無料体験はこちら

【JINカスタマイズ】プロフィールウィジェットの枠や色を装飾する(WordPress)

WordPressテーマJINカスタマイズ(プロフィール)

WordPressの人気テーマ『JIN』の、コピペでできる簡単カスタマイズをご紹介します。

今回は、ウィジェットに表示される「プロフィール」の背景や枠を自分好みのデザインにカスタマイズしてみました!

 

\\ ブログ初心者さん必見 //

カスタマイズをする際の注意点

今回のカスタマイズは、JIN(親テーマ)のPHPやCSSを直接編集するものではありませんので、初心者さんでも比較的簡単にカスタマイズしていただけます。

しかしながら万が一の際に責任がとれませんので、ご自身でバックアップをとったうえで作業していただきますようお願いします。

また、テーマのアップデートによりデザインが修正前に戻ってしまうのを防ぐため、子テーマの導入をおすすめします。
(参考:WordPressテーマ「JIN」のアップデート情報「子テーマを活用しよう」

 

プロフィール部分のカスタマイズイメージ

WordPressテーマJINカスタマイズイメージ(プロフィール)

このように、プロフィールウィジェットの背景や枠などのデザインを自由にカスタマイズできます。

 

カスタマイズ方法

「追加CSS」の画面を開く

このカスタマイズは、JINの「追加CSS」の機能を利用します。

WordPressの管理画面を開き、

「外観」→「カスタマイズ」→「追加CSS」に進みます。

WordPressテーマJINカスタマイズ(プロフィール)

「追加CSS」欄にカスタマイズ用のコードを入力する

「追加CSS」欄に、下記でご紹介するカスタマイズ用のコードを入力します。

入力後はプレビューで確認し、最後に「公開」ボタンを押して保存してください。

 

(基本編)カスタマイズ例

画像の丸枠をカスタマイズ

プロフィール画像の周りを囲う丸枠の線の太さや色を変更できます。

【WordPressテーマJINカスタマイズ】プロフィール

画像の周りの丸枠にピンクの色がつきました!

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 画像丸枠の装飾 */
.my-profile-thumb{
border: solid 3px #f08080;
}

 

※ 数字は線の太さです。お好みで数字を指定してください。

※ #英数字はお好きなカラーコードを指定できます。

 

外枠をカスタマイズ

プロフィールウィジェットを囲う外枠の線の太さや色を変更できます。

【WordPressテーマJINカスタマイズ】プロフィール

外枠が青色になりました!

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 枠の装飾 */
.my-profile{
border: 3px solid #b0c4de;
}

※ 数字は線の太さです。お好みで数字を指定してください。

※ #英数字はお好きなカラーコードを指定できます。

 

背景をカスタマイズ

プロフィールウィジェット全体の背景色を変更できます。

【WordPressテーマJINカスタマイズ】プロフィール

背景にピンクの色が付きました!

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 背景を装飾 */
.my-profile,.widget-profile{
background-color:#ffefd5!important;
}

※ #英数字はお好きなカラーコードを指定できます。

 

(応用編)カスタマイズ例

画像の丸枠をカラフルにする

プロフィール画像を囲む丸枠を上下左右の4色で設定することができます。

【WordPressテーマJINカスタマイズ】プロフィール

カラーコード次第で、きれいなグラデーションの枠にすることもできます。

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 画像枠を4色に装飾 */
.my-profile-thumb{
border: solid 3px ;
border-top-color: #87cefa; /* 丸枠の上側 */
border-bottom-color: #98fb98; /* 丸枠の下側 */
border-left-color: #ffc0cb; /* 丸枠の左側 */
border-right-color: #ffd700; /* 丸枠の右側 */
}

※ 数字は線の太さです。お好みで数字を指定してください。

※ #英数字はお好きなカラーコードを指定できます。

 

外枠をステッチ風にする

プロフィールウィジェットを囲う枠線を、ステッチ風(破線)に変更できます。

【WordPressテーマJINカスタマイズ】プロフィール

おしゃれなステッチ風の枠になりました!

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 枠をステッチ風に */
.my-profile{
border: 2px dashed #b0c4de;
}

※ 数字は線の太さです。お好みで数字を指定してください。

※ #英数字はお好きなカラーコードを指定できます。

 

背景に画像を入れる

プロフィールウィジェット全体の背景に好きな画像を設定することができます。

【WordPressテーマJINカスタマイズ】プロフィール

背景に画像を加えるとイメージがガラリと変わります!

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* 背景に画像を設定 */
.my-profile,.widget-profile{
background-image:url("画像のURLを指定") !important;
}

URL部分は、ご自身で「メディア」にアップロードした画像のURLを入力してください。

【追記】フッターウィジェットにプロフィールを設定すると背景色が変わらないというご指摘をいただきまして、CSSコードを一部訂正しました。(2019.10.23)

 

説明文の背景色を変える

プロフィール説明文の背景色を変更することができます。

【WordPressテーマJINカスタマイズ】プロフィール

説明文の部分を目立たせることができますね。

 

▼「追加CSS」に下記コードを追加

HTML

/* プロフィールのカスタマイズ */
/* プロフィール説明文の背景色 */
.myintro{
background-color:#f0e68c;
}

※ #英数字はお好きなカラーコードを指定できます。

 

 
以上、WordPressテーマ『JIN』のプロフィール部分のカスタマイズをご紹介しました。

ぜひ色の指定や組み合わせで、自分自身のイメージに合うアレンジをしてみてくださいね♪

 

当サイトでは、他にもJINのオリジナルカスタマイズをご紹介しています。こちらの記事もぜひあわせてお読みください。

最後になりますが、カスタマイズを行う際は必ずバックアップをとったうえで自己責任にて作業を行ってください。

ご質問ご指摘ありましたらお問い合わせフォームからお願いします。