[SALE] 12月9日(月)23:59まで
お買いもので最大5,000ポイント還元キャンペーン!!事前エントリー受付中
JINカスタマイズ

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

【ブログ】WordPressテーマJINカスタマイズ(プロフィールウィジェット)

WordPressの人気テーマ『JIN』を簡単コピペでカスタマイズしてみよう!

ウィジェット部分やサイドバーに表示される「プロフィール」の背景や枠をCSSでアレンジしてみました。

 

このブログは、WordPressのテーマ『JIN』を使用しています。

『JIN』のオリジナルカスタマイズ【第一弾】は、ウィジェットエリアやサイドバーに表示できるプロフィールをカスタマイズする方法です!

 

\ ブログで広告収入 /

 

JINカスタマイズの注意点

今回のカスタマイズは、JIN(親テーマ)のPHPやCSSを直接編集するものではありません。

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

また、アップデートによりデザインが修正前に戻ってしまうのを防ぐため、子テーマの導入もおすすめします。

 

事前の設定

JINでプロフィールを設定する方法は、JIN公式マニュアルの「プロフィールの設定」ページを参照してください。

JIN公式マニュアルへ

 

 

JINカスタマイズイメージ

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

プロフィールウィジェットの背景や枠などのデザインをカスタマイズできます!

 

 

JINカスタマイズ方法

「追加CSS」の画面を開く

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

 

WordPressの管理画面を開き、

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

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

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

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

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

 

 

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

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

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

【WordPressテーマJINカスタマイズ】プロフィール
画像の周りの丸枠にピンクの色がつきました!

 

追加CSSに下記コードを追加

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

 

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

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

 

外枠をカスタマイズ

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

【WordPressテーマJINカスタマイズ】プロフィール
外枠が青色になりました!

 

追加CSSに下記コードを追加

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

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

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

 

背景をカスタマイズ

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

【WordPressテーマJINカスタマイズ】プロフィール
背景にピンクの色が付きました!

 

追加CSSに下記コードを追加

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

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

 

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

 

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

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

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

【WordPressテーマJINカスタマイズ】プロフィール
カラーコード次第で、きれいなグラデーションの枠にすることもできます。

 

追加CSSに下記コードを追加

/* プロフィールのカスタマイズ */
/* 画像枠を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に下記コードを追加

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

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

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

 

背景に画像を入れる

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

【WordPressテーマJINカスタマイズ】プロフィール
背景に画像を加えるとイメージがガラリと変わります!

 

追加CSSに下記コードを追加

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

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

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

 

説明文の背景色を変える

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

【WordPressテーマJINカスタマイズ】プロフィール
説明文の部分を目立たせることができますね。

 

追加CSSに下記コードを追加

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

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

 

 

あとがき

ブログやサイト内でも、プロフィールは目にする機会が多い部分ですよね。

検索やSNSから初めて自分のブログに訪問してくださった方の中には、「このブログを書いている人ってどんな人だろう?」とプロフィールを見てくれる人もいるかもしれません。

 

初めてのお客様(ブログへの訪問者)の目に触れるであろう「プロフィール部分」を自分流にカスタマイズすることで、

  • 人柄がイメージしやすくなる
  • 個性を出せる

といったメリットがあると思います!

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

 

 

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

また、ご利用の環境によっては上手く動作しない場合があります。

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

 

▼未経験でもOK!在宅で稼ぐスキルを身につけよう




WEBデザインやプログラミングを未経験から勉強するなら【TECH::CAMP】がおすすめ!

まずは無料のオンライン説明会に参加して、講座の内容を見てみよう

\ 25分間の無料説明会 /
TECH::CAMPオンライン説明会

主婦 & WEBライター
あっつ

アラサー主婦、2歳(男の子)のママです。

0~3歳の子育てに役立つ情報をブログで発信しています。

DWEの中古教材を使って楽しく「おうち英語」挑戦中!

詳しいプロフィールはこちら

\ Follow me /