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

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

2024/09/04Luxeritas

【Luxeritas】サムネイルを長方形に統一 サムネイル
ナツメグチャンネル
ナツメグチャンネル プロフィール 02
ナツメグ

ナツメグです

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

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

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

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

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

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

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

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

【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で表示する事にします。

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

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

Luxeritas カスタマイズ サムネイル 04
ナツメグチャンネル

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

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

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

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

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

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

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

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

では作業開始。

メディア設定

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

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

Luxeritas メディア設定
ナツメグチャンネル

変更を保存をクリック。

サムネイル管理

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

Luxeritas サムネイル管理 03
ナツメグチャンネル

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

外観カスタマイズ

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

Luxeritas サムネイル ノーマル
ナツメグチャンネル

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 長方形 サムネイル
ナツメグチャンネル

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

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

後で直します。

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

次は関連記事のサムネイルを
長方形の160×90pxにします。

外観>テーマファイルエディターで
Luxeritasの親テーマを選択します。

テーマを選択
ナツメグチャンネル

関連記事を選択。

関連記事を選択
ナツメグチャンネル

related.phpと書いてあるのが
関連記事のphpです。

95行目。

95行目
ナツメグチャンネル

-100×100.と書いてあるところを
-160×90.に書き直します。

-160×90に書き直す
ナツメグチャンネル

ファイルを更新をクリック。

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

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

これで関連記事のサムネイルが
160×90pxの長方形になりました。

関連記事 長方形 サムネイル
ナツメグチャンネル

関連記事とNext/Prevのサムネイルのデザインがそろって
良い感じです。

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

サムネイルの画像に枠線を表示したり
白ふちにしたり
マウスホバー時に枠線を表示したりは好みなので
好きなデザインにして下さい。

記事一覧とNext/Prevと関連記事で
サムネイルのデザインが揃っていればダサくなりにくいです。

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

これで最後です。

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

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

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

スマホ 記事一覧
ナツメグチャンネル

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

https://nutmeg-room.com/

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

スマホ 記事一覧 02
ナツメグチャンネル

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

スマホの画面に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になりました。

スマホ 記事一覧 03
ナツメグチャンネル

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

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

ナツメグチャンネル プロフィール 02
ナツメグ

お疲れさまでした

追記

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

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

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

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

乗り換えるなら最速の組み合わせ

Luxeritas