【Luxeritas】サイドバープロフィールのカスタマイズ

2023/07/142024/09/04Luxeritas

ナツメグ

ナツメグです

もうダサくしないカスタマイズ第19回。

前回、前々回とサイドバーカテゴリーの
カスタマイズを
AFFINGER風とJIN風の
2回に亘わたって行いました。

もうダサくしないカスタマイズ第17回

【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】

もうダサくしないカスタマイズ第17回。今回はLuxeritas（ルクセリタス）のサイドバーのカテゴリーのデ ...

https://nutmeg-channel.com/luxeritas-side-bar-category-affin...

もうダサくしないカスタマイズ第18回

【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】

もうダサくしないカスタマイズ第18回。今回はLuxeritas（ルクセリタス）のサイドバーのカテゴリーのデ ...

https://nutmeg-channel.com/luxeritas-side-bar-category-jin/

今回はLuxeritas（ルクセリタス）の
サイドバーのプロフィールを
AFFINGER風とJIN風に合ったデザイン
2種類を作って行きたいと思います。

仕上がりはこんな感じです。

AFFINGER風プロフィールPC画面。

AFFINGER風プロフィールスマホ画面。

JIN風プロフィールPC画面。

JIN風プロフィールスマホ画面。

気に入ったデザインのプロフィールがあったら
使ってみて下さい。

Contents

1. 【Luxeritas】サイドバープロフィールのカスタマイズ

【Luxeritas】サイドバープロフィールのカスタマイズ

作業の手順

テキストウィジェットの追加
SNSフォローボタンを設置
CSSで見た目を整える
サイドバーの幅を調節する

CSSで見た目を整えるまでは
AFFINGER風とJIN風の作業は共通です。

テキストウィジェットの追加

WordPressの管理画面から
外観＞ウィジェット。

テキストウィジェットを
汎用サイドバー（タイトルH3タイプ）に追加します。

テキストウィジェットのタイトルに
Profileと書き込みました。

メディアを追加でプロフィール画像を追加します。

プリフィール画像を選択して
投稿に挿入をクリック。

プロフィール画像は
512×512pxの画像を使っています。

テスト用にこの画像を使って下さい。

画像の著作権は放棄しません。

画像の下にテキストを書き込みます。

改行はしないで下さい。

後でスマホ用のプロフィールで
display: table-cell;を使って
画像とテキストを横並びさせるのですが
改行すると要素が増えるからです。

テキストを書き込んだら保存をクリック。

SNSフォローボタンを設置

再利用ブロックウィジェットを使って
SNSフォローボタンを設置して行きます。

WordPressの管理画面から
固定ページ＞新規追加。

編集画面の左上のプラスボタンを押します。

ブロック一覧が表示されるので
ソーシャルアイコンを選択。

右側のプラス記号をクリックして
SNSフォローボタンを追加します。

TwitterとPinterestを選択しました。

目当てのSNSボタンがない場合は
すべて表示をクリックすると
左側に全てのSNSボタンが表示されるので
使っているSNSのボタンを選択して下さい。

アイコンをクリックしてURLを入力して
Enterをクリック。

画面右側のSNSボタンの設定は
配置は中央揃え。

新しいタブでリンクを開くをオン。

スタイルはロゴのみ。

色は黒#333333を指定。

ソーシャルアイコンブロックを選択して
縦の…をクリック。

再利用ブロックを作成をクリック。

SNSフォローボタンと名前を付けて保存。

固定ページに名前を付けて公開します。

WordPressの管理画面から
外観＞ウィジェット。

再利用ブロックウィジェットを
汎用サイドバー（タイトルH3タイプ）に追加。

SNSフォローボタンを選択して保存します。

この段階での見た目。

SNSボタンに
既に枠線が入っているのは
カテゴリーの
外枠のCSSが反映されているからです。

.widget ul, .tagcloud{
	border: 1px solid #c5e0dc;
	padding: 0px 0px;
}

このCSSを消すと
カテゴリーの外枠が消えるので
SNSボタンの部分の外枠は
消せません。

CSSで見た目を整える

スタイルシートにCSSを書き込んで
見栄えを整えて行きます。

/*プロフィール*/
#side .textwidget img{
	width: 200px;
	height: 200px;
	position: relative;
	left: 30px;
}

#side .textwidget{
	border: 1px solid #c5e0dc;
	margin-top: 10px;
	padding: 10px 10px 10px 20px;
}

div[id*=side-], #col3{
	padding: 0px 0;
}

@media (max-width: 575px){
#side .textwidget img{
	width: 100px;
	height: 100px;
	position: relative;
	left: 0px;
	}
}

@media (max-width: 575px){
#side .textwidget p{
	display: table-cell;
	vertical-align: top;
	padding: 10px 0px 0px 8px;
	}
}

/*SNSフォローボタン*/
.wp-container-6.wp-container-6{
	margin-top: 10px;
	padding: 6px 0px 6px;
}

この見た目になります。

サイドバーのプロフィールPC画面。

スマホ画面。

CSSの解説

side .textwidget imgは
プロフィール画像のサイズです。

200×200pxを指定。

左から30px右に寄せて
プロフィール画像を真ん中寄りにしました。

side .textwidgetは
プロフィールの外枠です。

色は薄い水色#c5e0dcを指定。

paddingで枠の内側の余白を調節。

div[id*=side-], #col3は
paddingに0pxを指定しておくと
サイドバーが
ちょっと上に上がります。

@media (max-width: 575px)は
スマホの設定。

side .textwidget imgで
100×100pxを指定。

leftは0px。

side .textwidget pは
display: table-cell;で要素を横並びにしました。

.wp-container-6.wp-container-6は
プロフィールと
SNSフォローボタンの間隔を
調整。

次はJIN風のカテゴリーに合わせた
プロフィールのCSS。

/*プロフィール*/
#side .textwidget img{
	width: 200px;
	height: 200px;
	position: relative;
	left: 30px;
}

#side .textwidget{
	border: none;
	margin-top: 10px;
	padding: 10px 10px 10px 20px;
}

div[id*=side-], #col3{
	padding: 0px 0;
}

@media (max-width: 575px){
#side .textwidget img{
	width: 100px;
	height: 100px;
	position: relative;
	left: 0px;
	}
}

@media (max-width: 575px){
#side .textwidget p{
	display: table-cell;
	vertical-align: top;
	padding: 10px 0px 0px 8px;
	}
}

/*SNSフォローボタン*/
.wp-container-6.wp-container-6{
	margin-top: 0px;
	padding: 6px 0px 6px;
}

見た目はこうなります。

JIN風サイドバープロフィールPC画面。

スマホ画面。

CSSの解説

side .textwidget imgは
プロフィール画像のサイズです。

200×200pxを指定。

左から30px右に寄せて
プロフィール画像を真ん中寄りにしました。

side .textwidgetは
プロフィールの外枠。

border: none;で枠線を消しました。

paddingで枠の内側の余白を調節。

div[id*=side-], #col3は
paddingに0pxを指定しておくと
サイドバーが
ちょっと上に上がります。

@media (max-width: 575px)は
スマホの設定。

side .textwidget imgで
100×100pxを指定。

leftは0px。

side .textwidget pは
display: table-cell;で要素を横並びにしました。

.wp-container-6.wp-container-6は
プロフィールと
SNSフォローボタンの間隔を
調整。