【Luxeritas】新着記事のカスタマイズ

2023/07/212024/09/04Luxeritas

ナツメグ

ナツメグです

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

今回は
Luxeritas（ルクセリタス）の
サイドバーに
新着記事を設置して行きます。

Recent Posts Widget Extendedを
使おうとしていたんですが
狙った形にならなかったので
急遽Luxeritasの新着記事を使う事にしました。

こんな仕上がりになります。

Contents

1. 【Luxeritas】新着記事のカスタマイズ

【Luxeritas】新着記事のカスタマイズ

作業の手順

ウィジェットの設定
CSSで見た目を整える

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

ウィジェットの設定

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

新着記事（Luxeritas オリジナル）を
選択して
汎用サイドバー（タイトルH3タイプ）に
ウィジェットを追加します。

新着記事ウィジェットの設定。

タイトルは「Selected entries」にしました。

サムネイルは
正方形サムネイル（小）。

表示する記事数は5。

カテゴリ・タグの表示は
表示しないを選択。

日付なしと抜粋なしに
チェックを入れました。

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

ここからCSSで
Next/Prevや関連記事と見た目を揃そろえます。

CSSで見た目を整える

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

/*新着記事*/
#thk-new .term img, #thk-new .term amp-img{
	margin: 0 10px 0 0;
	padding: 0px;
	border:  none;
	max-width: 160px;
	max-height: 90px;
}

#thk-new p.new-title a{
	font-size: 1.4rem;
	font-weight: normal;
	padding: 0;
	margin: 0 0 12px;
	text-decoration: none;
	color: #333;
}

#thk-new p.new-title a:hover{
	color: #b22222;
}

#thk-new .toc{
	padding: 0px 0 0px;
	border-bottom: none;
}

#thk-new{
	padding-top: 20px;
}

.excerpt{
	margin-top: -5px;
}

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

CSSの解説

#thk-new .term img, #thk-new .term amp-imgは
サムネイルの指定です。

サイズを160×90pxにして
paddingを0pxで白ふちを消しました。

border: noneで外枠のグレーの線を消しました。

#thk-new p.new-title aはタイトルです。

font-sizeはフォントサイズ
1.4remを指定。

font-weightは文字の太さnormal。

text-decorationは下線でnoneで消しました。

#thk-new p.new-title a:hoverは
タイトルのマウスホバー時の色です。

赤#b22222を指定。

#thk-new .tocは記事の間隔で
paddingを0pxにして狭くしました。

border-bottom: none;で記事の間の
グレーの線も消しています。

#thk-newは
タイトルの「Selected entries」の部分と
記事の間隔で
padding-top: 20pxを指定。

.excerptは記事の間隔を
さらに狭くしました。

新着記事にカテゴリーを表示させてみる

カテゴリーを表示させてみました。

記事一覧と見た目が揃うので
良さそうですが
カテゴリー名の文字数が多いと
表示が崩れます。

この表示にするには
カテゴリー名を全部短くする必要があります。

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

先ほどの新着記事ウィジェットを開きます。

カテゴリを優先表示にチェック。

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

/*新着記事*/
#thk-new .term img, #thk-new .term amp-img{
	margin: -4px 10px 0 0;
	padding: 0px;
	border:  none;
	max-width: 160px;
	max-height: 90px;
}

#thk-new p.new-title a{
	font-size: 1.4rem;
	font-weight: normal;
	padding: 0;
	margin: 0 0 12px;
	text-decoration: none;
	color: #333;
}

#thk-new p.new-title a:hover{
	color: #b22222;
}

#thk-new .toc{
	padding: 0px 0 0px;
	border-bottom: none;
}

#thk-new{
	padding-top: 20px;
}

.cat_or_tag{
	background: #fff;
	padding: 1px 6px;
	color: #555e7b;
	border: 1px solid #555e7b;
}

#thk-new p.new-meta{
	margin: 0px 0 10px;
}

CSSの解説

サムネイルの高さとカテゴリーの高さが
揃わなかったので
#thk-new .term img, #thk-new .term amp-imgの
marginを-4pxにして揃えました。

.cat_or_tagはカテゴリーのデザインです。

thk-new p.new-metaはカテゴリーと
タイトルH3の間に間隔を10px空けました。

.excerptは消しました。

Luxeritasオリジナルの
新着記事も使えそうです。

デベロッパーツールを使えば
classが分かるので
ある程度自分でカスタマイズ
出来るようになります。

試してみて下さい。