ヤゴコロ研究所に訪問いただきありがとうございます。東大生ブロガーの西片(@nskt_yagokoro)です
このサイトは、WordPressテーマ『JIN』を使用しています。
今回、JINのプロフィールのデザインを変更してみたので、そのカスタマイズの方法を紹介したいと思います
クリックできる目次
カスタマイズの前に…
今回ご紹介するカスタマイズは、親テーマJINを直接編集するものではないため、比較的安全にデザインの変更ができます。
しかし、絶対にデータが消えないとも言い切れませんので、バックアップを取った上で完全に自己責任でカスタマイズしてください。
プロフィールに関する基本設定をまだ終えていない方は、以下の公式サイトで設定してからカスタマイズしてください
https://jin-theme.com/manual/bloger-profile/
カスタマイズの方法
今回は「追加CSS」を使ってカスタマイズしていこうと思います。最終的にはこんな感じになります↓
見た目を変更するには、「外観」→「カスタマイズ」→「追加CSS」と進んでください
あとは画面左の「追加CSS」の欄に、下記で紹介するカスタマイズ用のCSSコードを入力するだけです(超簡単)
既にCSSコードを入力している場合は、その下に追加すればOKです！
カスタマイズの例
プロフィール画像の丸枠を調整する
プロフィール画像の丸枠を変更したい場合には「追加CSS」の部分に以下のコードを追加してください
/* プロフィール画像の丸枠調節 */
.my-profile-thumb{
border: solid 3px #c0c0c0;
}
/* プロフィール画像の丸枠調節終わり */
上記のコードの「3px」は枠の太さです。数値を変えることで太さを変更することができます。
また「#c0c0c0」の部分を好きなカラーコードに変えることで枠の色を変更することができます(上の画像ではsilverに設定してあります)
カラーコードについては以下のサイトを参照してください
プロフィールの外枠を調整する
プロフィールに外枠を追加する場合には「追加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>を直接入力してください。
こんな感じです
すると下のように改行されます
空白の行を追加したい時は
のように入力してください。下のように空白の行が入るはずです。
まとめ
今回はWordPressテーマ「JIN」のプロフィールをいじってみました
他にもJINはいろいろカスタマイズできるので、興味のある方はJINの公式サイトを参考にしてみてください
以上、東大生ブロガーの西片(@nskt_yagokoro)でした！
