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

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

2024/06/13Luxeritas

【Luxeritas】新着記事のカスタマイズ サムネイル 02
ナツメグチャンネル

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

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

Recent Posts Widget Extendedを
使おうとしていたんですが
狙った形にならなかったので
急遽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が分かるので
ある程度自分でカスタマイズ
出来るようになります。

試してみて下さい。

デベロッパーツールの使い方

今回は以上です。

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

【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】サイドバーカテゴリーのカスタマイズ【JIN風】
【Luxeritas】サイドバープロフィールのカスタマイズ
【Luxeritas】カテゴリーと記事一覧にタイトルを付ける
【Luxeritas】グローバルナビのメニューにアイコンを付ける

Luxeritas