テーマLuxeritas(ルクセリタス)でサイドバーにプロフィールを表示する

ウィジェットを使ってサイドバーにプロフィールを表示する

こんな感じのプロフィール欄を作る

プロフィール用の画像を準備する

1. サンプルで表示した画像で143×158pxです。その程度のサイズの画像をサイトにアップロードします。当方で使用のイラストは無料イラストなら【イラストAC】からお借りしています。
2. サンプルでは画像をFTPでアップロードし、/wp-content/uploads/profile.png　に保存しています。メディアから追加すると、不要なサムネイルサイズもいっしょに生成されてしまいますので、FTPツールでダイレクトにアップロードする方法をオススメします。

ウィジェットを利用する

1. 「外観」「ウィジェット」を開いて、サイドバーの表示したい箇所に「カスタムHTML」ウィジェットを追加します。
2. ウィジェットの [タイトル] と [内容] 欄に下のように入力します。

プロフィールの入力サンプル

<li>ここ</li>に自分で自己紹介文を入力して保存してください。

Font Awesome 4 の場合

<div class="widget-profile">
<ul class="self-info">
	<li>ニックネーム: あなたの名前</li>
	<li>生まれ/育ち： 田舎/都会</li>
	<li>血液型： ×型</li>
	<li>誕生日： 1月1日</li>
	<li><i class="fa fa-envelope-o" aria-hidden="true"></i>：<a title="コンタクト" href="/contact/"><span class="bold">お問い合わせはこちら</span></a></li>
</ul></div>

Font Awesome 5 の場合

<div class="widget-profile">
<ul class="self-info">
	<li>ニックネーム: あなたの名前</li>
	<li>生まれ/育ち： 田舎/都会</li>
	<li>血液型： ×型</li>
	<li>誕生日： 1月1日</li>
	<li><i class="far fa-envelope" aria-hidden="true"></i>：<a title="コンタクト" href="/contact/"><span class="bold">お問い合わせはこちら</span></a></li>
</ul></div>

スタイルを追加する

1. 以下のようにプロフィール用のスタイルを追加します。
–2018.05.04–更新しました！

/* プロフィールウィジェット */
.widget-profile {
	max-width: 336px; /* サイドバーの横幅 */
	margin: auto;
	padding-top: 170px; /* プロフィール画像の縦サイズより長く */
	background: url(/wp-content/uploads/profile.png) top center no-repeat;
}
.widget-profile ul {
	margin: auto;
	padding-left: 60px; /* 文字数によって左の余白を変更 */
}
#side .widget-profile ul.self-info li {
	line-height: 2rem; /* 行間の指定 */
	list-style-type: disc; /* リスト表示をしない場合は: none */
}

（参考）旧CSS

/* プロフィールウィジェット */
.widget-profile {
    max-width: 336px; /* サイドバーの横幅*/
    margin: auto;
    padding-top: 170px; /* プロフィール画像の縦サイズより長く */
    background: url(/wp-content/uploads/profile.png) top center no-repeat; /* 画像URL */
}
.widget-profile ul {
    width: 200px; /* 文字の長さに応じて */
    margin: auto;
    padding-left:0px; /* 横幅との調整に */
}
#sidebar .widget-profile ul.self-info li {
    line-height:1.6em; /* 行間を指定する場合*/
    list-style-type:disc; /* リスト表示をしない場合は none */
}

2. 6行目の background: url(/wp-content/uploads/profile.png)の内容を書き換えます
3. スタイルを更新します。

あとがき

スタイルを更新した理由は、モバイルでサイドバーを表示した際、文字が適切なサイズに縮小されず、改行されていたからです。

今回のスタイルで、以下のように適切な文字サイズになりました！（やったー！）

少しでも参考になりましたら、WEB拍手ボタンなどポチッとしていただけると励みになります！
あなたの貴重なお時間を使って読んでいただきありがとうございました！

関連さらにプチカスタマイズを追加しました

テーマLuxeritas(ルクセリタス)で以前に作ったプロフィール欄をプチカスタマイズして

サイドバーのプロフィール欄をプチカスタマイズ サイドバーにプロフィール欄を設置した時の記事はこち ...

 https://martto.net/luxeritas-theme/customize/9455/