ブログで稼ぐ

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

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

 

この記事は、WordPressの人気テーマ・JINの非公式カスタマイズです。

ウィジェット部分に表示される「プロフィール」エリアをCSSでアレンジしてみました。

 

こんにちは!

あつみん(@lemonatumi)です。

 

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

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

当カスタマイズは、『JIN』公式マニュアルのカスタマイズ例として掲載されました。

 

\ ブロガー初心者さんへ /

ブログで稼ぎたい(= 広告収入を得たい)ならまずはASPに登録しましょう(`・-・´)b

私が登録しているおすすめのASPです

 

あつみん
あつみん
それではカスタマイズを紹介していきます!

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{
background-color:#ffefd5!important;;
}

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

 

 

(応用編)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{
background-image:url(“画像のURLを指定“) !important;
}

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

 

説明文の背景色を変える

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

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

 

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

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

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

 

 

あとがき

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

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

 

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

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

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

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

 

 

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

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

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