ママのブログ運営

【WordPressテーマ・JINカスタマイズ】プロフィールウィジェット(サイドバー)を装飾する

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

 

この記事は、WordPressの人気テーマ『JIN』のカスタマイズ記事です。

「プロフィール」ウィジェットをCSSでかわいくアレンジしてみました♪

 

こんにちは!

あつみー(@lemonatumi)です。

 

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

 

今回、サイドバー(スマホの場合は記事の下)に表示されるプロフィールウィジェットをカスタマイズしてみました!

⇒ その他のカスタマイズも見るにはこちらから

 

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

 

 

カスタマイズの注意点

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

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

 

事前設定

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

JINマニュアル

 

 

カスタマイズイメージ

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

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

 

 

カスタマイズ方法

「追加CSS」の画面を開く

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

 

WordPressの管理画面を開き、

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

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

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

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

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

 

 

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

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

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

【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;;
}

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

 

 

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

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

プロフィール画像を囲む丸枠を上下左右の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から初めて自分のブログに訪問してくださった方の中には、「このブログを書いている人ってどんな人だろう?」とプロフィールを見てくれる人もいるかもしれません。

 

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

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

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

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

 

★関連記事>> JINご利用中でブログのカスタマイズがお好きな方は、こちらの記事もぜひどうぞ♪

【ブログ】WordPressテーマJINカスタマイズ
【WordPressテーマ・JIN】コピペで簡単!あつみーのカスタマイズまとめ WordPressの人気テーマ『JIN』の非公式カスタマイズです。 「追加CSS」にコピペするだけの簡単カスタマイズな...

 

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

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

ご意見ご指摘ありましたらお問い合わせからお願いします。

 

ブログランキング・にほんブログ村へ>> 応援クリックおねがいします! <<