【Luxeritas】サムネイルを長方形に統一

2023/07/012024/09/04Luxeritas

ナツメグ

ナツメグです

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

今回は
Luxeritas（ルクセリタス）の
記事一覧、Next/Prev、関連記事の
サムネイルを長方形に統一して行きます。

正方形のサムネイルが好きな人は
正方形で良いと思います。

サーチコンソールインサイトのサムネイルも
正方形ですし
正方形のサムネイルも
悪くないかも知れません。

ただ現代では長方形のサムネイルが
主流なので長方形の方が無難です。

他と違うとダサく見えるんですよ。

ダサい要素を排除する事で
ダサくないブログデザインにするというのが
「もうダサくしないカスタマイズ」の
目的です。

ダサくないブログにするには
サムネイルは長方形一択です。

Contents

1. 【Luxeritas】サムネイルを長方形に統一

【Luxeritas】サムネイルを長方形に統一

作業の手順

サムネイルのサイズを決める
記事一覧のサムネイルを長方形にする
Next/Prevのサムネイルを長方形にする
関連記事のサムネイルを長方形にする
スマホの記事一覧のサムネイルを160×90pxにする

サムネイルのサイズを決める

長方形のサムネイルにすると言っても
サイズは一体どう決めるのか!?

縦横の比率を16：9にしたいので
800×450pxで作って行きます。

YouTubeサムネイルは1280x720pxだそうです。

さすがに1280x720pxは
大きい気もしますが
今後YouTubeで使い回す事を考えたら
1280x720pxで作るのもありですね。

縦横の比率を16：9にした場合
考えられるのは
1600×900px
1280x720px
800x450px
640x360px
320x180px
240x135px
160x90px
これのどれかになりますが
貴方はどのサイズが好みですか？

今回は800x450pxでサムネイルを作って
PCの記事一覧は200×113px
Next/Prev、関連記事は160×90pxで
表示します。

スマホは記事一覧、Next/Prev、関連記事の全てを
160×90pxで表示する事にします。

好みじゃない場合は
好みなサイズに変えて下さい。

長方形のサムネイルを作りました

800×450pxでサムネイルを作りました。

使ったソフトは
MediBang PaintとInkscapeです。

ロゴは
フリーフォントで簡単ロゴ作成を使いました。

今回はLuxeritasのカスタマイズの記事なので
サムネイルの作り方はやりません。

800×450pxのサムネイルを用意して下さい。

テストするのに上の画像をコピペして
使っても良いですよ。

画像の著作権は放棄しません。

記事一覧のサムネイルを長方形にする

では作業開始。

メディア設定

WordPressの管理画面から設定＞メディアで
メディア設定を開きます。

サムネイルのサイズは記事一覧のサムネイルに使う
200×113pxを指定。

変更を保存をクリック。

サムネイル管理

管理機能＞サムネイル管理。

正方形のサムネイルの欄にチェックが入っていると
正方形のサムネイルが横に伸びた画像が
表示されてしまうので
チェックを全部外します。

外観カスタマイズ

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

normal（200× 113px crop）を指定して
公開をクリック。

アイキャッチ画像を設定

記事の編集画面から
アイキャッチ画像を設定をクリック。

メディアライブラリに
800×450pxのサムネイル画像をアップロード。

アイキャッチ画像を設定をクリックします。

記事一覧に200×113pxの長方形の
サムネイル画像が表示されました。

次はNext/Prevと関連記事の
サムネイルのサイズを160×90pxの長方形に表示して
スマホの記事一覧のサムネイルも
160×90pxにして行きます。

Next/Prevのサムネイルを長方形にする

Luxeritasの子テーマのスタイルシートに
CSSを書き込みます。

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

前回の記事でサムネイルのデザインを
整えた人はborderとboder-radiusはいりません。

Next/Prevのサムネイルが
160×90pxの長方形になりました。

表示がおかしいのは
前回の正方形のサムネイルのままだからです。

後で直します。

スマホの記事一覧のサムネイルを160×90pxにする

これで最後です。

次はスマホの記事一覧のサムネイルの表示を
160×90pxにします。

PCと同じ200×113pxだとさすがに大きい。

最終的にはこの形にしたいので
スマホの記事一覧のサムネイルを
小さくするのは
前準備です。

ブログ『ナツメグの子供部屋』はこちら

https://nutmeg-room.com/

何でこの形にしたいかと言うと
スマホの小さい画面で
記事一覧に記事を沢山
並べたいからです。

今の段階だとこの状態です。

スマホの画面に1記事しか表示されていません。

Luxeritasの一番の弱点は
このスマホ画面に記事一覧の記事が
1記事しか表示されない事だと
思っています。

スマホ画面で
沢山記事が表示されれば
回遊率が上がって
PVも増えるはずです。

PVが増えるなら
別に有料テーマはいらないですね。

外観＞カスタマイズ＞サムネイルの
カード型の欄でnormal（200× 113px crop）を指定。

外観カスタマイズ＞グリッドレイアウトで
カード型（最大1列）を選択。

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

/*スマホ記事一覧サムネイル*/
@media screen and (max-width: 575px){
#list div[id^=card-] .term img{
	width: 160px;
	height: 90px;
	}
}

スマホ画面のサムネイルのサイズが
160×90pxになりました。

この後
抜粋と記事を読むを消して
サムネイルの横に記事のタイトルを並べて行くのですが
それはまた今度。

今回の記事はこれで終了です。

ナツメグ

お疲れさまでした

追記

関連記事のサムネイルが横に潰れていたので
CSSを追加しました。

@media screen and (max-width: 575px){
#related .term img{
	max-width: 50%;
	}
}

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

2023/07/01Luxeritas

【Luxeritas】サムネイルを長方形に統一

サムネイルのサイズを決める

長方形のサムネイルを作りました

記事一覧のサムネイルを長方形にする

メディア設定

サムネイル管理

外観カスタマイズ

アイキャッチ画像を設定

Next/Prevのサムネイルを長方形にする

関連記事のサムネイルを長方形にする

スマホの記事一覧のサムネイルを160×90pxにする

追記