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

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

2024/06/26Luxeritas

【Luxeritas】サイドバーカテゴリーのカスタマイズ【JIN風】 サムネイル 02
ナツメグチャンネル

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

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

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

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

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

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

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

JINはWordPressの有料テーマ。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

カテゴリーの順番 JIN風
ナツメグチャンネル

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

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

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

管理画面のカテゴリー
ナツメグチャンネル

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

カテゴリー名をクリック
ナツメグチャンネル

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

親カテゴリーを選択
ナツメグチャンネル

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

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

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

子カテゴリーのみチェック
ナツメグチャンネル

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

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

子カテゴリーのみ表示
ナツメグチャンネル

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

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

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

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

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

カテゴリーを追加
ナツメグチャンネル

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

カテゴリーウィジェットの設定
ナツメグチャンネル

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

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

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

地味ですね。

ここから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風
ナツメグチャンネル

こうなりました。

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回

青を基調
ナツメグチャンネル

色コードは#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回

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

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

色は黄色#f9d423。

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

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

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

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

今回は以上です。

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

【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】サイドバープロフィールのカスタマイズ
【Luxeritas】グローバルナビのメニューにアイコンを付ける

Luxeritas