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

2023/07/132024/09/04Luxeritas

ナツメグ

ナツメグです

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

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

AFFINGERは「稼ぐ」事に特化した
WordPressの有料テーマ。

サイドバーのカテゴリーを
AFFINGER風にする事で稼げてしまうかも!?

こんな見た目になります。

Contents

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

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

作業の手順

サイドバーウィジェットの幅を300pxにする
カテゴリーを親と子にする
メニューを作成
ウィジェットにナビゲーションメニューを追加
CSSで見た目を整える

早速カスタマイズを始めてみましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

メニューを作成

次は
サイドバーに表示する
カテゴリーの
メニューを作ります。

メニューで作ったカテゴリーを
ウィジェットでサイドバーに表示して行きます。

カテゴリーのウィジェットを使うと
カテゴリーの順番が入れ替えられないからです。

カテゴリーのウィジェットを使うと
こうなります。

親カテゴリーの
「ブログカスタマイズ」を一番上にしたい。

そこで
カテゴリーウィジェットではなく
ナビゲーションメニューウィジェットを
使います。

WordPressの管理画面から外観＞メニュー。

新しいメニューを作成しましょうをクリック。

メニュー名は「カテゴリー」にしました。

メニュー名を付けたら
メニューを作成をクリック。

カテゴリーを選んですべてを表示をクリック。

「ブログカスタマイズ」
「Luxeritas」
「Material Theme Builder」にチェックを入れて
メニューに追加。

右側のカテゴリーが段にならないように並べて
メニューを保存をクリック。

カテゴリーのメニューが出来ました。

ウィジェットにナビゲーションメニューを追加

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

ナビゲーションメニューを
汎用サイドバー（タイトルH3タイプ）に追加します。

カテゴリーを選択して保存をクリック。

サイドバーにメニューが表示されました。

ここまでの見た目はこんな感じ。

何も装飾がありませんが
カテゴリーの順番は
親の「ブログカスタマイズ」が
一番上になりました。

CSSで見た目を整える

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

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

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

#side .side-title{
	display: none;
	margin-top: 0px;
}

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

.widget_nav_menu ul li a{
	color: #333;
}

.widget_nav_menu ul li:first-child a{
	color: #fff;
}

.widget_nav_menu ul li:first-child{
	background-color: #555e7b; 
}

.widget_nav_menu ul li{
	border-bottom: 1px solid #c5e0dc;
}

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

.widget_nav_menu ul li:first-child a:hover{
	color: #fff; 
	background-color: #99b2b7; 
}

.widget_nav_menu ul li a:hover{
	color: #999; 
}

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

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

/*記事一覧下げる*/
#main #section, #main #core{
	margin-top: 10px;
}

長い…。

こんな見た目になります。

CSSの解説

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

読まなくてもスタイルシートにコピペすれば
同じ見た目になりますが。

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

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

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

スマホ表示で
枠線が画面の端に近過ぎたので
画面の端から離したのですが
スマホ表示でだけ離しても良いかも知れません。

side .side-titleはタイトルを
noneで消しました。

タイトルの分の余白を
margin-top: 0px;で消しています。

.widget ul, .tagcloudは外側の枠線です。

枠線の色は薄い水色の#c5e0dcを指定。

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

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

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

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

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

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

.widget_nav_menu ul li aは文字の色。

黒#333を指定。

.widget_nav_menu ul li:first-child aは
最初の子、つまり親カテゴリーの文字の色。

親の「ブログカスタマイズ」の色です。

白#fffに指定。

.widget_nav_menu ul li:first-childは
親の背景の色を紺色#555e7bに指定。

.widget_nav_menu ul liは
カテゴリー名の下の線。

薄い水色#c5e0dcを指定。

一番下のカテゴリー名の下の線は
外枠と重なってしまうので
.widget_nav_menu ul li:last-childに
border-bottom: none !important;で消しました。

.widget_nav_menu ul li:first-child a:hoverは
親カテゴリーのマウスホバー時の色。

文字の色は白#fffで
背景は青みがかったグレー#99b2b7を指定。

.widget_nav_menu ul li a:hoverは
子カテゴリーのマウスホバー時の色で
文字の色を
グレー#999にしました。

.widget_nav_menu ul li:first-child a:beforeは
親カテゴリーのアイコンです。

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

色は黄色#f9d423。

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

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

【Luxeritas】目次のカスタマイズ

もうダサくしないカスタマイズ第16回。今回はLuxeritas（ルクセリタス）の目次のカスタマイズをして行 ...

https://nutmeg-channel.com/luxeritas-contents-customize/

.widget_nav_menu ul li a:beforeは
子カテゴリーのアイコンで\e5dfを指定。

色は黄色#f9d423。

PCでの表示でカテゴリーと記事一覧の
高さが合わなかったので
main #section, #main #coreで
記事一覧の高さを下げました。

今回参考にしたブログはこちら。

nakkiのblogさま

【ワードプレス】プラグインなしでカテゴリー表示の順番を並び替える方法 | nakkiのbl

どうもNAKKI(@nakki0109)です。今回はプラグインを使わずに、HTMLやCSSといったテーマの編…

https://nakkiblog.com/wordpress-category-sort/

ありがとうございました。

カテゴリーのデザインをAFFINGER風にしたので
PVが倍…になると良いですね。

ナツメグ

今回は以上です

追記

カテゴリーを増やしました。

上から4番目の「稼ぎ方」が
親カテゴリーなんですが
上記のやり方では
子カテゴリーと同じ表示になってしまいます。

なので
親カテゴリーの表示を変える為
スタイルシートに
CSSを追加しました。

.widget_nav_menu ul li:nth-child(4) a{
	color: #fff;
}

.widget_nav_menu ul li:nth-child(4){
	background-color: #555e7b; 
}

.widget_nav_menu ul li:nth-child(4) a:hover{
	color: #fff; 
	background-color: #99b2b7; 
}

.widget_nav_menu ul li:nth-child(4) a:before{
	font-family: "Material Icons";
	content: "\e1c4";
	font-size: 1.8rem;
	vertical-align: middle;
	margin-right: 5px;
	color: #f9d423;
}

このようになりました。

4番目の
親カテゴリーの「稼ぎ方」も
親カテゴリーの表示に
なりました。

nth-child(4)が上から4番目の子
という指定なのですが
親カテゴリーを増やすごとに
この指定を増やすのは結構手間ですね。

しかしテーマをAFFINGERにすると
PVが倍になるらしい。

PVを倍にする為に
Luxeritasのデザインを
AFFINGER風にして
頑張ります。

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

2023/07/13Luxeritas