雑記

【コピペで簡単】WPテーマJINのプロフィールカスタマイズまとめ

こんにちは! アヅマです。

このサイトは、WordPressテーマ『JIN』を使用しています。

今回、JINのプロフィールのデザインを変更してみたので、そのカスタマイズの方法を紹介したいと思います

カスタマイズの前に…

今回ご紹介するカスタマイズは、親テーマJINを直接編集するものではないため、比較的安全にデザインの変更ができます。

しかし、絶対にデータが消えないとも言い切れませんので、バックアップを取った上で完全に自己責任でカスタマイズしてください。

プロフィールに関する基本設定をまだ終えていない方は、以下の公式サイトで設定してからカスタマイズしてください

https://jin-theme.com/manual/bloger-profile/

カスタマイズの方法

今回は「追加CSS」を使ってカスタマイズしていこうと思います。こんな感じになります

「外観」→「カスタマイズ」→「追加CSS」と進んでください

あとは画面左の「追加CSS」の欄に、下記で紹介するカスタマイズ用のCSSコードを入力するだけです。

ここに入力!

既にCSSコードを入力している場合は、その下に追加すればOKです

カスタマイズの例

プロフィール画像の丸枠を調整する

 

「追加CSS」に以下のコードを追加してください

/* プロフィール画像の丸枠調節 */
.my-profile-thumb{
border: solid 3px #6b1616;
}
/* プロフィール画像の丸枠調節終わり */

上記のコードの「3px」は枠の太さです。数値を変えることで太さを変更することができます。

また「#6b1616」の部分を好きなカラーコードに変えることで枠の色を変更することができます。

カラーコードについては以下のサイトを参照してください

https://www.colordic.org

プロフィールの外枠を調整する

「追加CSS」に以下のコードを追加してください

/*プロフィールの外枠調整*/
.my-profile{
border: 3px solid #6b1616;
}
/*プロフィールの外枠調整終わり*/

丸枠の調節同様、コードの数値を変えることで枠の色や太さを変更できます

プロフィールの背景を変更する

「追加CSS」に以下のコードを追加してください

/* プロフィール背景の調節 */
.my-profile{
padding:17px;
background-color:#f5deb3!important;;
}
/* プロフィール背景の調節終わり*/

上記コードの「17px」の数値を変えると、外枠と説明文の隙間が広がったり狭くなったりします。

また丸枠同様、「#f5deb3」の部分を好きなカラーコードに変えることで枠の色を変更することができます。

プロフィールの大きさを変更する

プロフィールの背景に色をつけたり外枠をつけたりすると、以下の画像のようにSNSボタンがはみ出て見た目が悪くなる場合があります。

そこでプロフィール全体の大きさを変えることで対処したいと思います。

「追加CSS」に以下のコードを追加してください

/*プロフィールの大きさ調節*/
.widget-profile{
padding:0px!important;
}
/*プロフィールの大きさ調節終わり*/

するとプロフィールの外側の余白がなくなり見た目が改善されます

番外編

プロフィールの説明文を改行する

外観→カスタマイズ→ウィジェット→サイドバー→プロフィールの順に進むとプロフィールの説明を入力する欄があります。

しかしこの欄で改行しても実際のサイトには反映されません。下の画像のように読みにくくなってしまいます。

そこで番外編としてプロフィールの文章を改行する方法を紹介します。

説明文の改行したいところに<br>を直接入力してください。

こんな感じです

すると下のように改行されます

空白の行を追加したい時は

のように入力してください。下のように表示されるはずです。

以上でプロフィールのカスタマイズの紹介を終えます。

他にもJINはいろいろカスタマイズできるので、興味のある方はこちらの公式サイトを参考にしてみてください

https://jin-theme.com/manual/customize/#i-7