【Luxeritas】サムネイルは正方形か長方形か!?

2023/06/302024/09/04Luxeritas

ナツメグ

ナツメグです

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

高速テーマのLuxeritas（ルクセリタス）を
ダサくなくカスタマイズして行きます。

サムネイルの形を統一する事で
ブログのデザインをダサくならないようにします。

Luxeritasのブログのデザインが
ダサくなりやすいのは
長方形のサムネイルと正方形のサムネイルを
混在させるからです。

Luxeritasでは
デフォルトで
Next/Prevと関連記事のサムネイルが
正方形になっています。

なので
記事一覧のサムネイルを長方形にすると
記事一覧とNext/Prevと関連記事で
サムネイルの形が変わって統一感がなくなります。

これがLuxeritasのブログのデザインが
ダサくなりやすい原因です。

Next/Prevと関連記事の
サムネイルの角が丸かったり
関連記事のサムネイルだけ白いふちが付いていたり
記事一覧のサムネイルと統一感がないのも良くない。

デザインは引き算です。

ダサくなる要素を排除していけば
ダサくはなりません。

ブログのデザインを
ダサくしたくなければ
サムネイルを正方形だけにするか
長方形だけにするかを決めて下さい。

記事一覧とNext/Prevと関連記事の
サムネイルのデザインを統一して行きます。

Contents

1. 【Luxeritas】サムネイルのデザインを統一する

【Luxeritas】サムネイルのデザインを統一する

作業の手順

サムネイル管理
記事一覧のサムネイルのデザインを整える
Next/Prevのサムネイルのデザインを整える
関連記事のサムネイルのデザインを整える

サムネイル管理

今回は正方形でやります。

とりあえず
正方形の100×100pxの小サムネイルで試してみます。

元の画像は512×512pxで作りました。

WordPressのLuxeritas＞管理機能＞サムネイル管理から

100×100pxの小サムネイルを選択して
外観＞カスタマイズ＞サムネイル。

サムネイルの表示サイズsmall(100×100crop）を選択。

記事一覧を見てみます。

記事一覧のサムネイルを
マウスホバーすると青い線が表示されます。

記事を読むをマウスホバーすると
リンクの青い文字が赤くなります。

分かりにくいですがサムネイルの画像のふちに
グレーの線があります。

次はNext/Prev。

マウスホバーするとサムネイルに青い線が
表示されます。

記事タイトルは赤。

サムネイルの角は丸いです。

関連記事のサムネイルはマウスホバーで青い線が表示。

そしてサムネイルの画像に白いふちが付いて
画像の角はちょっと丸くなっています。

関連記事のタイトルをマウスホバーすると
文字が青く。

記事一覧、Next/Prev、関連記事の
サムネイルの形とマウスホバー時の色と
記事タイトルのマウスホバー時の色が
見事にバラバラです。

記事一覧、Next/Prev、関連記事の
サムネイルの形とマウスホバー時の色
記事タイトルのマウスホバー時の色を
統一する事でダサくならなくなります。

サムネイルの画像の角は全部丸みを取って
マウスホバー時の青い線は非表示。

関連記事のサムネイルのグレーの線と
マウスホバー時の青い線も非表示にします。

記事一覧のサムネイルのデザインを整える

まず外観＞カスタマイズ＞サムネイル。

枠線を付けるのチェックを外す事で
記事一覧のサムネイルのグレーの線が消えます。

外観＞テーマファイルエディターで
Luxeritasの子テーマの
スタイルシートに
CSSを書き込みます。

/*記事一覧サムネイル角*/
.term img{
	border-radius: 0px;
}

これで記事一覧のサムネイルの角の
丸みが取れます。

サムネイルのグレーの線と
ホバー時の青い線が表示されなくなってすっきりしました。

Next/Prevのサムネイルのデザインを整える

Next/Prevは「ネクストパーヴ」と
読むそうです。

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

/*Next/Prevサムネイル*/
#pnavi img{
	border: none;
	border-radius: 0px;
}

/*Next/Prevタイトルの文字を太く*/
#pnavi a{
	font-size: 1.6rem;
	font-weight: bold;
}

Next/Prevのサムネイルの角の丸みを取って
ホバー時の青い線を消した事ですっきりしました。

文字の大きさは関連記事のタイトルに合わせました。

Next/Prevタイトルの文字を太くしたら
Next/Prevの文字まで一緒に太くなってしまいました。

タイトルの文字は細い方がスマートかも知れません。

font-weight: bold;をfont-weight: normal;に
書き直すと文字が細くなります。

関連記事のサムネイルのデザインを整える

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

/*関連記事のサムネイル*/
#related .term img{
	padding: 0px;
	border-radius: 0px;
	border: none;
}

/*関連記事のタイトルホバー時の色*/
#related h3 a:hover{
	color: #b22222;
}

/*関連記事の抜粋を消す*/
#related .excerpt p{
	display: none;
}

関連記事のサムネイルの角の
丸みを取って
ホバー時の青い線を消して
白いふちも消しました。

関連記事のタイトルの文字を細くする場合。

/*関連記事タイトル細く*/
#related h3{
	font-weight: normal;
}

Next/Prevと関連記事のホバー時の
赤が微妙に色が違うので色を合わせました。

最終的にはこうしました。

/*記事一覧サムネイル角*/
.term img{
	border-radius: 0px;
}

/*Next/Prevサムネイル*/
#pnavi img{
	border: none;
	border-radius: 0px;
}

/*Next/Prevタイトルの文字の太さ*/
#pnavi a{
	font-size: 1.6rem;
	font-weight: normal;
	color: #333;
}

/*Next/Prevホバー時のタイトルの色*/
#pnavi a:hover{
	color: #b22222;
}

/*関連記事のサムネイル*/
#related .term img{
	padding: 0px;
	border-radius: 0px;
	border: none;
}

/*関連記事タイトル細く*/
#related h3{
	font-weight: normal;
	color: #333;
}

/*関連記事のタイトルホバー時の色*/
#related h3 a:hover{
	color: #b22222;
}

/*関連記事の抜粋を消す*/
#related .excerpt p{
	display: none;
}

今回はこれで終わりです。

記事一覧、Next/Prev、関連記事の
サムネイルのデザインと
タイトルのホバー時の色を
合わせるだけで大分見栄えが良くなったと思います。

お疲れさまでした。

記事一覧とリンクの文字の
ホバー時の色がまだ合ってませんが
それは
後でやります。

今回は正方形のサムネイルを使いましたが
次は長方形のサムネイルで形を揃そろえて行きます。

ナツメグ

今回は以上です

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

2023/06/30Luxeritas