【Luxeritas】カテゴリーと記事一覧にタイトルを付ける

2023/07/152024/09/04Luxeritas

ナツメグ

ナツメグです

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

今回は
Luxeritas（ルクセリタス）の
カテゴリーと記事一覧に
タイトルを付けて行きます。

記事一覧のタイトルって何だ？

と思ったかも知れませんが
ここです。

カテゴリーのタイトルはここ。

記事一覧のタイトルと
サイドバーの見出しを同じデザインにしておくと
スマホで表示したときに
上から下まで見出しが揃そろいます。

スマホ表示。

下にスクロール。

統一されたモバイルフレンドリーな
デザインですね。

ちなみに上の画像はメインブログの
『ナツメグの子供部屋（https://nutmeg-room.com/）』です。

Contents

1. 【Luxeritas】カテゴリーと記事一覧にタイトルを付ける

【Luxeritas】カテゴリーと記事一覧にタイトルを付ける

作業の手順

プラグインWidget Logicをインストール
記事一覧にタイトルを付ける
カテゴリーにタイトルを付ける
CSSで見た目を整える

早速やってみましょう。

プラグインWidget Logicをインストール

Widget Logicはウィジェットの
表示、非表示をコントロールするプラグインです。

このプラグインを使って記事一覧のタイトルを
記事一覧だけに表示させます。

プラグインWidget Logicをインストールします。

WordPressの管理画面から
プラグイン＞新規追加。

右上のキーワードに
「Widget Logic」と入力します。

Widget Logicを探して
今すぐインストールをクリック。

有効化します。

これでWidget Logicが使えるようになりました。

記事一覧にタイトルを付ける

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

記事一覧上ウィジェットに
カスタムHTMLウィジェットを追加します。

カスタムHTMLにHTMLを書き込みます。

<div class="box1">記事一覧</div>

このように書き込みました。

ウィジェットのロジックには
is_home()と書き込みます。

ブログのトップページにのみ
表示させるという指示。

classがbox1でタイトルが「記事一覧」です。

記事一覧上にタイトルが表示されました。

スタイルシートにCSSを書き込んで
デザインを整えて行くんですが
その前に
カテゴリーの方にもタイトルを付けます。

カテゴリーにタイトルを付ける

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

編集するカテゴリー名をクリックします。

カテゴリーを編集の説明に
HTMLを書き込みます。

説明の欄はHTMLが使えます。

<div class="box1">ブログカスタマイズ</div>

このように書き込んで更新をクリック。

classがbox1でタイトルが「ブログカスタマイズ」です。

全てのカテゴリーの説明に
同じように
HTMLでカテゴリー名を
それぞれ書き込みます。

CSSで見た目を整える

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

このように書き込みました。

/*記事一覧とカテゴリーのタイトル*/
.box1{
	font-size: 1.4em;
	font-weight: normal;
	color: #333;
	padding: 0em 0.5em;
	border-bottom: 3px double #555e7b;
}

/*記事一覧*/
@media screen and (max-width: 575px){
#list .toc{
	margin: 0 0 20px;
	padding: 0px 13px;
	}
}

サイドバーの見出しとデザインが揃いました。

記事一覧のタイトルと
サイドバーの見出しの高さが合ってません。

記事一覧のタイトル側はこれ以上
上に上げられそうにないので
サイドバーの見出しの方を
下げます。

前回の記事で
サイドバープロフィールの
カスタマイズをやったので
前回の記事のCSSを修正します。

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

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

もうダサくしないカスタマイズ第19回。今回はLuxeritas（ルクセリタス）のサイドバーのプロフィールをA ...

https://nutmeg-channel.com/luxeritas-side-bar-profile/

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

paddingで上下の余白を7pxにしました。

記事一覧のタイトルとサイドバーの見出しの高さが
ぴったり揃いました。

カテゴリーの方も
綺麗に表示されました。

CSSの解説

.box1がカスタムHTMLウィジェットで
設定したclassです。

font-sizeは文字の大きさ1.4em。

font-weightは文字の太さnormalを指定。

colorは文字の色
黒#333を指定しました。

paddingは内側の余白で
上下0em左右0.5emを指定。

border-bottomは文字の下に線を引きます。

doubleで3pxの二重線を指定して
線の色は紺色#555e7bにしました。

list .tocはスマホ表示で二重線が端まで
くっ付いていたので
記事一覧の両サイドに余白を入れて
サイドバーと同じ表示にしました。

ついでに記事同士の間隔を狭くました。