【ルクセリタス】グリッドレイアウトとサムネイル(ｱｲｷｬｯﾁ)の組み合わせ
WordPressサイト Luxeritas テーマのトップページ、または
カテゴリページには グリッドレイアウトという形式で投稿記事を
見やすく表示することができます。
サムネイル画像を使用する グリッドレイアウトですが、
Luxeritas （ルクセリタス）では タイル型・カード型 の2通りの
スタイルと サムネイルのサイズとの組み合わせで構成されます。
外観カスタマイズのサムネイル（アイキャッチ）の設定から変更することができます。
デザインが何通りにもなり いろいろ試していると、
どの組み合わせが良かったのか分からなくなってしまうのではないでしょうか。
今回は、できるだけわかりやすくグリッドのタイプと サムネイルの組み合わせについて
解説していきたいと思いますので よければ参考にしてみてくださいね。
【ルクセリタス】サムネイル管理
まず、サムネイル使用する 画像のサイズについての予備知識ですが、
こちらのサンプル画像 300×300ピクセルで設定した画面です。
元の画像サイズが正方形でない場合、このようにサイズがバラバラになってしまいます。
バランスから考えて、均一にしたいところですね。
150×150 px で設定してしまえばどれも同じサイズになり
問題なく使用することも出来ますが、なぜ300x300px ではダメなのか？
これは Luxeritas サムネイル管理の画面に注意事項として記載されています
＊ Crop 縦横比が合わない時、はみ出した部分が切り取られます。とあります。
こちらの表で見ていくと 300×300 のサイズの Crop にはチェックが付いていませんので
元の画像の縦横比のまま表示される形となってしまうのです。
画像を均一にする方法としてはこちらの3通りの方法になります。
- 150 X 150px の設定にする。
- 横長のサイズのサムネイル画像を選択する。
- ユーザーサムネイルでサイズ設定と Crop の設定をする。
ユーザーサムネイルの作成は表の下部にあります
ユーザーサムネイル1 と書かれている場所に
設定したいサイズと分かりやすいネーミングを付けます。
最後に Crop にチェックを入れればサイズ調整してくれます。
外観カスタマイズの設定
外観カスタマイズ画面から グリッドレイアウトとサムネイルの設定を見てみます。
こちらをクリックしていただくと
外観からカスタマイズを選択サイト
画面左に外観カスタマイズの項目一覧が
表示されます。
こちらに グリッドレイアウト と
少し下にサムネイル（アイキャッチ）の項目がありますので この2箇所の設定をしていきます。
グリッドレイアウトでは 画像スタイルの選択 サムネイルでは画像のサイズを設定していきます。
グリッドレイアウト
グリッドレイアウトの項目では リスト型トップページと カテゴリ・アーカイブ
3種類の設定項目があります。手順はすべて同じです。
グリッドレイアウトには タイル型とカード型、2種類あります。
そして、このように最大1列から 4列までのサイズに分かれています。
ブラウザのサイズ（横幅）によっては 4列を選んでいても、画面幅が狭くなると 3列や 2列のサイズに変化していきます。
最大というのは 3列を選択した場合 それ以上小さいサイズにはならない。ということになります。
それでは、サンプル画像でレイアウトのイメージを見ていきます。
注）多少縮小していますので、特徴だけ捉えてください。
タイル型
タイル型は画像が上部 次にタイトル となっています。
そのため、画像が大きくなりますのでインパクトが強くなる感じでしょうか。
カード型
カード型は画像が左で右側にタイトルが入るデザインになります。
2列の設定の場合、横長のカード型ですが 3列・4列になると カードは縦長になります。
一見、タイル型と混乱してしまいそうですが、
カード型は画像が左にくるので3列・4列のカード型の場合 画像が小さくなるのが特徴です。
画像よりも文字を目立たせたい場合、カード型の方が良いかもしれません。
カードとタイルのイメージ、つかんでいただけましたでしょうか?
あとは サムネイルのサイズを設定していきます。
サムネイルの 表示サイズ
次にサムネイルのサイズの調整ですが、デフォルトのままで使用して頂いても全く問題ないのですが
先ほども少し触れました Luxeritas のサムネイル管理と
ダッシュボード 設定の項目の中のメディアでの
サイズ設定のしかたを少し説明させて頂きます。
こちらの外観カスタマイズのサムネイルに
表示されるサイズのことです。
ダッシュボードの設定という項目のメディアを開きます。
このように3種類のサイズがあり、ピクセルの変更ができるようになっています。
中サイズと大サイズを変更してみます。
保存をクリックして Luxeritas の管理機能を見てみましょう。
先ほど300×300だったミディアムサイズと 1024ピクセルだった大サイズが
サムネイルの画面でも変更されています。
外観カスタマイズ画面を見てみます。
このように先ほど設定したサイズに変更されています。
ここでも注意しておきたいのは crop が付いていないものは 元のサイズの影響を受ける。ということになりますので 気を付けましょう。^^
おわりに
グリッドレイアウトのタイプとサムネイルのサイズによって
画像のイメージがすごく変わりますね。
サイト全体のイメージにも影響がでる重要な設定ですので
この機能をうまく使いこなしてみてください。
また、今回サムネイルとして使用させていただいた
画像をご紹介させて頂きます。
こちらは無料で利用できる画像素材のサイトからダウンロードさせて頂いています。
ステキな画像を提供してくださりありがとうございました。
pencil parkerさんの作品
Megan Rexazinさんの作品
無料写真素材なら【写真AC】
himawariinさんの作品