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

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

2024/06/13Luxeritas

【Luxeritas】サムネイルは正方形か長方形か サムネイル 02
ナツメグチャンネル

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

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

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

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

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

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

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

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

デザインは引き算です。

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

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

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

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

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

サムネイル管理

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

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

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

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

小サムネイル
ナツメグチャンネル

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

Luxeritas サムネイル 表示サイズ
ナツメグチャンネル

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

記事一覧を見てみます。

Luxeritas 記事一覧 サムネイル ホバー
ナツメグチャンネル

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

Luxeritas 記事一覧 記事を読む ホバー
ナツメグチャンネル

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

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

次はNext/Prev。

Luxeritas Next Prev ホバー
ナツメグチャンネル

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

記事タイトルは赤。

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

Luxeritas 関連記事 サムネイル ホバー
ナツメグチャンネル

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

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

Luxeritas 関連記事 タイトル ホバー
ナツメグチャンネル

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

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

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

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

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

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

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

外観カスタマイズ サムネイル 02
ナツメグチャンネル

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

外観>テーマファイルエディターで
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;
}

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

Luxeritas 記事一覧 完成
ナツメグチャンネル
Luxeritas Next Prev 関連記事 完成
ナツメグチャンネル

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

お疲れさまでした。

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

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

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

【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】グローバルナビのメニューにアイコンを付ける

Luxeritas