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

2023/07/132024/09/04Luxeritas

ナツメグ

ナツメグです

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

今回は
Luxeritas（ルクセリタス）の
サイドバーのカテゴリーのデザインを
JIN風にするカスタマイズです。

仕上がりはこうなります。

プロフィールは今回やりません。

下のカテゴリーのカスタマイズをやります。

一応
プロフィールと併あわせて
サイドバーの見栄えはこうなるという
サンプルです。

JINはWordPressの有料テーマ。

かなり使われている
人気のテーマなので
JIN風のデザインにすると
PVがアップするかも!?

もうダサくしないカスタマイズ第11回で
カルーセルスライダーをJIN風にしました。

サイドバーとカルーセルスライダーを
両方をJIN風にするのも良いですね。

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

【Luxeritas】カルーセルスライダーのカスタマイズ【JIN風】

もうダサくしないカスタマイズ第11回。今回はカルーセルスライダーをLuxeritas（ルクセリタス）の関連 ...

https://nutmeg-channel.com/luxeritas-carousel-slider/

ちなみに前回は
AFFINGER風のサイドバーカテゴリーの
カスタマイズをやったので
そっちも見て下さい。

好みのデザインを見付けて
PVアップに役立ててくれると嬉しいです。

AFFINGER風サイドバーカテゴリー

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

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

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

Contents

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

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

作業の手順

サイドバーウィジェットの幅を280pxにする
カテゴリーを親と子にする
ウィジェットにカテゴリーウィジェットを追加
CSSで見た目を整える

早速やって行きましょう。

サイドバーウィジェットの幅を280pxにする

まずはサイドバーの幅を280pxにします。

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

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

サイドバーウィジェットの幅
2カラム目を280pxにしました。

カテゴリーを親と子にする

この形にしたいので
カテゴリーに親と子の階層を作ります。

「ブログカスタマイズ」が親カテゴリーで
その下の階層に
「Luxeritas」と「Material Theme Builder」
という構成です。

WordPressの管理画面からカテゴリーを選択。

カテゴリー名をクリック。

親カテゴリーを選択します。

「Luxeritas」を「ブログカスタマイズ」の
子カテゴリーにしました。

「Material Theme Builder」も
同じように
「ブログカスタマイズ」の
子カテゴリーにしました。

次は記事の編集画面のカテゴリーの設定。

子カテゴリーの「Luxeritas」のみ
チェックを入れます。

こうする事で記事一覧のカテゴリーが
子カテゴリーだけ表示されます。

親カテゴリーと子カテゴリーの
両方にチェックを入れてしまうと
親カテゴリーと子カテゴリーの両方が表示されて
記事一覧のデザインが崩れます。

ここまでは前回の
AFFINGER風カスタマイズとほとんど同じですが
今回はナビゲーションメニューではなく
カテゴリーウイジェットを使います。

ウィジェットにカテゴリーウィジェットを追加

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

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

階層を表示にチェックを入れました。

好みで投稿数を表示に
チェックを入れても良いかも知れません。

ここまでの見た目はこうなりました。

地味ですね。

ここからCSSで
見た目を整えて行きます。

CSSで見た目を整える

スタイルシートにCSSを書き込みます。

/*サイドバーナビメニュー*/
.widget_nav_menu a{
	padding: 0px 8px;
}

#side .widget, #col3 .widget{
	margin:0px 6px 14px;
	padding: 0px 7px;
}

/*サイドバー*/
#side .side-title{
	font-size: 20px;
	font-weight: normal;
	color: #333; 
	margin-bottom: 10px;
	padding: 4px 10px;
}

#side h3{
	border-bottom: 3px double #555e7b;
}

.widget_categories .children{
	padding-top: 10px;
}

/*サイドバーカテゴリーアーカイブの行間*/
#side ul li, #col3 ul li{
	line-height: 1.2;
}

/*カテゴリーウィジェット*/
.widget_categories ul li a{
	color: #333;
}

/*マウスホバー時*/
.widget_categories ul li a:hover{
	color: #b22222;
}

/*サイドバーカテゴリーアイコン*/
.widget_categories ul li a:before{
	font-family: "Material Icons";
	content: "\e1c4";
	font-size: 1.8rem;
	vertical-align: middle;
	margin-right: 5px;
	color: #f9d423;
}

.widget_categories ul li li a:before{
	font-family: "Material Icons";
	content: "\e5df";
	font-size: 1.8rem;
	vertical-align: middle;
	margin-right: 5px;
	color: #f9d423;
}

/*サイドバーカテゴリーマウスホバー時*/
.widget_categories ul li a:hover{
	transform: translateX(3px);
}

/*サイドバーカテゴリー下線*/
.widget_categories ul li{
	padding: 10px 10px !important;
	border-bottom: 1px solid #f0f0f0;	
}

.widget_categories ul li ul li{
	padding: 0px 0px !important;
	border-bottom: none !important;
}

.widget_categories ul li:last-child{
	border-bottom: none !important;	
}

こうなりました。

JINっぽいですね。

CSSの解説

ちょっと長いですが解説します。

.widget_nav_menu aは
内枠の余白です。

上下は0pxで左右が8px。

side .widget, #col3 .widgetは枠の外側です。

side .side-titleは
カテゴリーの見出しのタイトル。

font-sizeは文字の大きさで20pxにしました。

font-weightは文字の太さでnormal
文字の色は黒#333を指定。

#side h3は見出し3の下の線。

太さは3pxを指定してdoubleで
2本線が表示されます。

2本線の色は紺色#555e7bを指定しました。

色はもうダサくしないカスタマイズ第12回で
決めた色を使います。

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

【Luxeritas】メニュー（グローバルナビ）とフッターの色を揃える

もうダサくしないカスタマイズ第12回。Luxeritas（ルクセリタス）のデフォルトでは白かったメニュー（ ...

https://nutmeg-channel.com/luxeritas-menu-and-footer-colors/

色コードは#555e7b, #99b2b7, #c5e0dc, #f9d423, #f0f2eb。

.widget_categories .childrenは
親カテゴリーと子カテゴリーの余白。

ここです。

padding-topに10pxを指定しました。

side ul li, #col3 ul liは行間です。

line-heightに1.2を指定。

.widget_categories ul li aは
カテゴリーの文字の色で黒#333を指定。

.widget_categories ul li a:hoverは
カテゴリーのマウスホバー時の色。

赤#b22222を指定。

ここは好みで色を変えても良いと思います。

.widget_categories ul li a:beforeは
アイコンの指定です。

マテリアルアイコンの\e1c4を指定。

色は黄色#f9d423。

マテリアルアイコンの使い方は
前回の
もうダサくしないカスタマイズ第16回で
解説したので見て下さい。

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

【Luxeritas】記事内のカスタマイズ【Snow Monkey Editor】

もうダサくしないカスタマイズ第15回。Luxeritas（ルクセリタス）の外観が大体整ったので次は記事内の ...

https://nutmeg-channel.com/snow-monkey-editor/

.widget_categories ul li li a:beforeは
子カテゴリーのアイコンの指定。

マテリアルアイコンに\e5dfを指定。

色は黄色#f9d423。

.widget_categories ul li a:hoverは
カテゴリーをマウスオーバーすると
右に3px動く
という指示です。

さらにその下に
「サイドバーカテゴリー下線」というのがありますが
これは親カテゴリーが増えたときに
区切りの線が表示されます。

現時点ではカテゴリーが少ないので
表示されません。

サイドバーの見栄えを良くして
ブログの回遊率を上げて下さいね。

ナツメグ

今回は以上です

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

2023/07/13Luxeritas