<>

【ルクセリタス】グリッドレイアウトとサムネイル(アイキャッチ)の組み合わせ

WordPressサイト  Luxeritas テーマの 記事一覧ページの表示では
カード型タイル型といった グリッドレイアウトを使って 投稿記事を見やすく表示することができます。
サムネイル設定された グリッドレイアウトのイメージ画像
グリッドレイアウトでは タイル型・カード型 の2通りのスタイルと
サムネイルの画像サイズとの 組み合わせで構成されます。

デザインが何通りにもなるので いろいろ試していると、
どの組み合わせが良かったのか 分からなくなってしまいますね。

今回は、グリッドの表示タイプと サムネイルの組み合わせ (サイズ設定) など 試してみました‼

 グリッドレイアウトと サムネイル(アイキャッチ)

外観カスタマイズの使いかた - グリッドレイアウトとサムネイル項目の図
外観カスタマイズ 編集画面へは 外観 > カスタマイズ  または  Luxeritas > カスタマイズ(外観)から移動します。

サムネイル(アイキャッチ)画像サイズ設定

サムネイルの表示サイズ - 画像サイズの選択画面
グリッドレイアウトで使用する サムネイル画像サイズは この サムネイル の項目で設定します。

サムネイル画像を表示したくない場合 …

外観カスタマイズのサムネイル(アイキャッチ)の設定から
サムネイルを非表示にすることもできます。

こちらの サンプル画像 300 x 300 px で設定した画面です。
サムネイル設定された グリッドレイアウトのイメージ画像
アップロードした画像サイズが 300pxより小さかった場合 このように
表示サイズが バラバラになってしまいますので 指定する画像サイズや
アップロードする際の 画像サイズを編集する必要があります。

サムネイル管理 と メディア設定

メディア画像の設定は Luxeritas管理機能サムネイル管理画面 と
設定画面のメディア の2か所から行います。

Luxeritas > 管理機能 > サムネイル管理
Luxeritas 管理機能 - サムネイル管理画面から 設定できる項目・できない項目
画面左にチェックを入れた項目が サムネイルに使用することができますが
上段の4項目は 基本のメディアサイズになり この画面から編集することが出来ません。

この編集は 管理画面>設定>メディア から行ないます。
設定項目 > メディア画面 - サイト内で使用する 画像サイズの変更

画像サイズのバラつきの原因

先ほどの バラバラの画像サイズの原因は Crop の設定ができない画像サイズにあります。
サムネイル管理 - Cropが設定できない画像サイズ の説明 - 300x300px Medium size

* Crop 縦横比が合わない時、はみ出した部分が切り取られます。とあります。
こちらの表で見ていくと 300x300px サイズCrop にはチェックが付いていませんので
元の画像の 縦横比のまま表示される形となってしまう。ということになります。

設定した画像サイズより小さい場合 Crop 設定 あり・なしの サムネイル イメージ画像

300x300px サイズ設定の場合、このように横幅に合わせるか カットされるかのどちらかになり
画像が小さい場合は 横幅に合わせて高さが足りない状態で Cropが設定されている場合は 両端をカットし 拡大されるという形になります。

逆に、正方形の画像も サムネイルサイズが 長方形の場合は 上下をカットされ調整されます。

改善方法

画像を均一にする方法としては こちらの3通りの方法になります。

  1. 150 X 150px の設定にする。
  2. 横長サムネイル 320x180px を選択する。
  3. ユーザーサムネイルで サイズ設定と Crop の設定をする。

3.の ユーザーサムネイルの作成は 表の下部に自由にサイズ設定できる欄が3つありますので
希望のサイズと ユーザーサムネイル1 の部分に 分かりやすいネーミングを付けます。
最後に Crop にチェックを入れれば 300pxサイズの画像でも 自動でサイズ調整してくれます。

注意

*サイズによっては完全にそろわない場合もありますので その場合は
元の画像をリサイズして頂くか 1.か2.の方法を選択してください。

グリッドレイアウトの設定

外観カスタマイズから グリッドレイアウトを選択します。
グリッドレイアウトの項目では リスト型トップページ・カテゴリ・アーカイブ
3種類の設定項目があります。手順はすべて同じです。
グリッドレイアウト - スタイル選択 と スタイルの種類一覧
グリッドレイアウトには タイル型カード型、2種類あり 最大1列から 4列までのサイズに分かれています。

ブラウザのサイズ(横幅)によって 表示される列の数が変わり
4列を選んでいても、画面幅が狭くなると 3列や 2列のサイズに変化していきます。

タイル型

それぞれの レイアウトのイメージを見ていきます。
注)画像は 多少縮小していますので、特徴だけ捉えてください。

グリッドレイアウト - タイル型4列 のイメージ画像
タイル型4列 300x300px

 

タイル型は 画像を大きく表示することが出来ますので インパクトが強くなる感じでしょうか。

 

 

 

 

 

 

カード型

グリッドレイアウト - カード型2列のイメージ画像
カード型2列 150x150px

カード型は 画像が左で右側にタイトルが入るデザインになります。
2列の設定の場合、横長のカード型ですが  3列・4列になると カードは縦長になります。

グリッドレイアウト -カード型 4列 のイメージ画像
カード型4列150×150

 

3列・4列のカード型の場合 画像が小さくなり
画像よりも 文字を目立たせたい場合に 有効ですね。

 

 

 

 

おすすめレイアウトとサムネイルパターン

これは サイトのイメージもあるのでお好みですが、バランス的に良いというパターンを2つ。
TOPに 通常スタイルを持ってくるデザインです。

タイル型
おすすめグリッドレイアウトパターン1 - タイル型のイメージ画像
通常スタイル 1 サムネイルサイズ medium 300x300px
タイル型 3列 サムネイルサイズ tile 320x180px ( Crop )

カード型
おすすめグリッドレイアウトパターン2 - カード型のイメージ画像

通常スタイル 1 サムネイルサイズ tile 320x180px ( Crop )
カード型 2列 サムネイルサイズ ユーザーサムネイル 300x300px ( Crop )

同じサイズで揃えてもいいのですが、このパターンも良くないですか?

通常スタイルの使い分け

グリッドレイアウト 通常スタイルの使い分けのしかた通常スタイルを指定することで
グリッドレイアウトのサイズを使い分けることができます。

サムネイル項目で 通常スタイルと
リスト型・カード型のサイズ指定を行います。

 

サムネイル表示サイズ

サムネイルの表示サイズ - 画像サイズの選択画面
こちらで 通常スタイル指定したスタイル( タイル型・カード型 )のサイズを選択します。

テキストの配置

記事の文章の抜粋を表示させる場合、文字数の指定と テキストの配置を指定することができます。
サムネイル テキストを表示させる場合の テキストの配置のしかたについての設定
回り込みのイメージはこんな感じです。
サムネイル - テキストを表示させる場合の テキスト抜粋の文字数と 色濃度の設定画面
文字を表示させたくない場合は 文字数の欄を 空白にしておきます。

青色のバーを左右に移動させることで テキストの文字色を薄くすることが出来ます。

 

 


以上、【ルクセリタス】グリッドレイアウトとサムネイル(アイキャッチ)の組み合わせ でした。

今回サムネイルとして使用させていただいた 画像をご紹介させて頂きます。
こちらは無料で利用できる画像素材のサイトからダウンロードさせて頂いています。
ステキな画像を提供してくださり ありがとうございました。

高品質なフリー画像 Pixabay

サムネイル画像-pencil parkerさんの作品pencil parkerさんの作品

サムネイル画像-Megan Rexazinさんの作品Megan Rexazinさんの作品

無料写真素材なら【写真AC】
サムネイル画像-himawariinさんの作品himawariinさんの作品