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

WordPressサイト  Luxeritas テーマのトップページ、または
カテゴリページには グリッドレイアウトという形式で投稿記事を
見やすく表示することができます。
グリッドレイアウトのサンプル画像
サムネイル画像を使用するグリッドレイアウトですが、
Luxeritas (ルクセリタス)では タイル型・カード型 の2通りの
スタイルと サムネイルのサイズとの組み合わせで構成されます。

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

今回は、できるだけわかりやすくグリッドのタイプと
サムネイルの組み合わせについて解説していきたいと思いますので
よければ参考にしてみてくださいね。

【ルクセリタス】サムネイル管理

まず、サムネイル使用する画像のサイズについての予備知識ですが、
こちらのサンプル画像 300×300ピクセルで設定した画面です。
元の画像サイズが正方形でない場合、このようにサイズがバラバラになってしまいます。
サンプル画像=サムネイルのサイズについての説明

バランスから考えて、均一にしたいところですね。
150×150 px で設定してしまえばどれも同じサイズになり
問題なく使用することも出来ますが、なぜ300x300px ではダメなのか?

これは  Luxeritas  サムネイル管理の画面に注意事項として記載されています
* Crop 縦横比が合わない時、はみ出した部分が切り取られます。とあります。
Luxeritas サムネイル管理画面の編集
こちらの表で見ていくと 300×300 のサイズの Crop にはチェックが付いていませんので
元の画像の縦横比のまま表示される形となってしまうのです。
画像を均一にする方法としてはこちらの3通りの方法になります。

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

ユーザーサムネイルの作成は表の下部にあります
ユーザーサムネイル1 と書かれている場所に
設定したいサイズと分かりやすいネーミングを付けます。
最後に Crop にチェックを入れればサイズ調整してくれます。

外観カスタマイズの設定

外観カスタマイズ画面から グリッドレイアウトとサムネイルの設定を見てみます。
ダッシュボードから外観カスタマイズへ移動のしかたこちらをクリックしていただくと
外観カスタマイズ-グリッドレイアウトとサムネイルの編集画面の表示

 

外観からカスタマイズを選択サイト画面左に
外観カスタマイズの項目一覧が
表示されます。

こちらに グリッドレイアウト と
少し下にサムネイル(アイキャッチ)の項目が
ありますので この2箇所の設定をしていきます。

グリッドレイアウトでは画像スタイルの選択
サムネイルでは画像のサイズを設定していきます。

 

グリッドレイアウト

グリッドレイアウトの項目ではリスト型トップページと
カテゴリ・アーカイブと3種類の設定項目があります。
手順はすべて同じです。

グリッドレイアウトスタイル選択画面グリッドレイアウトには
タイル型とカード型、2種類あります。
そして、このように最大1列から
4列までのサイズに分かれています。

ブラウザのサイズ(横幅)によって
4列を選んでいても、画面幅が狭くなると
3列や 2列のサイズに変化していきます。
最大というのは3列を選択した場合
それ以上小さいサイズにはならない。ということです。

 

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

タイル型

グリッドレイアウトのサンプル画像-タイル型4列
タイル型4列 300x300px

タイル型は画像が上部 次にタイトル となっています。
そのため、画像が大きくなりますのでインパクトが強くなる感じでしょうか。

カード型

グリッドレイアウトのサンプル画像-カード型2列
カード型2列 150x150px

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

グリッドレイアウトのサンプル画像-カード型4列
カード型4列150×150

一見、タイル型と混乱してしまいそうですが、
カード型は画像が左にくるので3列・4列のカード型の場合
画像が小さくなるのが特徴です。
画像よりも文字を目立たせたい場合、カード型の方が
良いかもしれません。

カードとタイルのイメージ、つかんでいただけましたでしょうか?
あとは サムネイルのサイズを設定していきます。

サムネイルの表示サイズ

次にサムネイルのサイズの調整ですが、デフォルトのままで
使用して頂いても全く問題ないのですが
先ほども少し触れました  Luxeritas のサムネイル管理と
ダッシュボード 設定の項目の中のメディアでの
サイズ設定のしかたを少し説明させて頂きます。

外観カスタマイズ-サムネイルサイズ設定画面

 

こちらの外観カスタマイズのサムネイルに
表示されるサイズのことです。

設定画面-メディアの設定からサムネイルのサイズの編集のしかた1
ダッシュボードの設定という項目のメディアを開きます。
このように3種類のサイズがあり、ピクセルの変更ができるようになっています。
設定画面-メディアの設定からサムネイルのサイズの編集のしかた2中サイズと大サイズを変更してみます。
保存をクリックして Luxeritas の管理機能を見てみましょう。
Luxeritas サムネイル管理画面-サイズの確認

 

先ほど300×300だったミディアムサイズと
1024ピクセルだった大サイズが
サムネイルの画面でも変更されています。

外観カスタマイズ画面を見てみます。

 

外観カスタマイズ-サムネイルサイズ設定画面
このように先ほど設定したサイズに変更されています。

ここでも注意しておきたいのは
crop が付いていないものは
元のサイズの影響を受ける。ということですので
お忘れないように…。^^

おわりに

グリッドレイアウトのタイプとサムネイルのサイズによって
画像のイメージがすごく変わりますね。
サイト全体のイメージにも影響がでる重要な設定ですので
この機能をうまく使いこなしてみてください。

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

高品質なフリー画像 Pixabay

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

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

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