IDOL×IDOL STORY! 感想レビュー
ナツメグチャンネル
Luxeritas カスタマイズ サムネイル 05
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02

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

2024/06/26Luxeritas

【Luxeritas】サイドバープロフィールのカスタマイズ サムネイル 02
ナツメグチャンネル

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

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

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

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

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

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

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

サイドバー カテゴリー
ナツメグチャンネル

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

サイドバー プロフィール AFFINGER風 スマホ 02
ナツメグチャンネル

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

サイドバー カテゴリー JIN風
ナツメグチャンネル

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

サイドバー プロフィール JIN風 スマホ
ナツメグチャンネル

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

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

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

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

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

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

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

テキストウィジェットを追加
ナツメグチャンネル

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

テキストウィジェットにメディアを追加
ナツメグチャンネル

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

投稿を挿入
ナツメグチャンネル

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

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

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

ナツメグチャンネル プロフィール 02
ナツメグチャンネル

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

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

テキストを書き込む
ナツメグチャンネル

改行はしないで下さい。

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

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

SNSフォローボタンを設置

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

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

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

プラスマーク 02
ナツメグチャンネル

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

ソーシャルアイコンを選択
ナツメグチャンネル

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

プラス記号をクリックして追加
SNSボタンを選択
ナツメグチャンネル

TwitterとPinterestを選択しました。

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

URLを入力
ナツメグチャンネル

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

SNSボタンの設定 01
ナツメグチャンネル

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

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

SNSボタンの設定 02
ナツメグチャンネル

スタイルはロゴのみ。

色は黒#333333を指定。

SNSボタン オプション
ナツメグチャンネル

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

再利用ブロックを作成 02
ナツメグチャンネル

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

SNSフォローボタン 保存
ナツメグチャンネル

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

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

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

再利用ブロックをh3に追加
ナツメグチャンネル

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

SNSフォローボタンを選択して保存
ナツメグチャンネル

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

この段階での見た目。

プロフィールの現時点での見た目 AFFINGER風
ナツメグチャンネル

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画面。

サイドバー カテゴリー
ナツメグチャンネル

スマホ画面。

サイドバー プロフィール AFFINGER風 スマホ 02
ナツメグチャンネル

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画面。

サイドバー カテゴリー JIN風
ナツメグチャンネル

スマホ画面。

サイドバー プロフィール JIN風 スマホ
ナツメグチャンネル

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フォローボタンの間隔を
調整。

サイドバーの幅を調節する

最後はサイドバーの幅を調節します。

AFFINGER風は300pxで
JIN風は280px。

JINはサイドバーが狭い感じがするからです。

WordPressの管理画面から
外観>カスタマイズ>コンテンツ領域とサイドバー。

サイドバーウィジェットの幅 300px
ナツメグチャンネル

サイドバーウィジェットの幅を調節。

人気のテーマに
デザインを寄せれば
見慣れたデザインになるので
ダサくなりにくくなります。

今回は以上です。

お疲れさまでした。

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

【Luxeritas】もうダサくしないカスタマイズ
【Luxeritas】サムネイルは正方形か長方形か!?
【Luxeritas】サムネイルを長方形に統一
【Luxeritas】メタ情報のカテゴリーのカスタマイズ
【Luxeritas】記事一覧カスタマイズ【カード型】
【Luxeritas】文字の色はどうしよう!?【文字リンク】
【Luxeritas】SNSシェアボタンを消します
【Luxeritas】ブログカードのカスタマイズ
【Luxeritas】デベロッパーツールの使い方【Google Chrome】
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】
【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃える
【Luxeritas】ページネーションのカスタマイズ
【Luxeritas】ヘッダー上の帯メニューのカスタマイズ
【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】
【Luxeritas】目次のカスタマイズ
【Luxeritas】サイドバーカテゴリーのカスタマイズ【AFFINGER風】
【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】新着記事のカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける

Luxeritas