【ルクセリタス】グリッドレイアウトとサムネイル(ｱｲｷｬｯﾁ)の組み合わせ
Webサイトのトップページや カテゴリー・アーカイブなどのページでは
投稿した記事の一覧を「グリッドレイアウト」という方法で表示することができます。
グリッドレイアウトは 「カード型」や 「タイル型」などの囲み枠の形で
記事のタイトル・冒頭の文章・カテゴリなどと アイキャッチ画像で設定した画像を入れたりすることでさらに
記事の一覧を見やすく表示できるというものです。
こちらの設定もいくつかの項目があるので組み合わせ方で何パターンにもなります。
これが外観カスタマイズで見ながら設定しても ほんとに悩んでしまいます！
できるだけ分かりやすくまとめてみましたので 参考になればと思います。
グリッドレイアウトとは？
WordPressサイトのテーマ Luxeritas では「カード型」や 「タイル型」といった
グリッドレイアウトを使って 投稿記事を見やすく表示することができます。
グリッドレイアウトでは タイル型・カード型 の2通りのスタイルと
サムネイルの画像サイズとの 組み合わせで構成されます。
デザインが何通りにもなるので いろいろ試していると、
どの組み合わせが良かったのか 分からなくなってしまいますね。
今回は、グリッドの表示タイプと サムネイルの組み合わせ (サイズ設定) など 試してみました‼
グリッドレイアウトと サムネイル（アイキャッチ）
外観カスタマイズ 編集画面へは外観 ＞ カスタマイズ または Luxeritas ＞ カスタマイズ（外観）から移動します。
サムネイル（アイキャッチ）画像サイズ設定
グリッドレイアウトで使用する サムネイル画像サイズは この サムネイル の項目で設定します。
サムネイル画像を表示したくない場合 …
外観カスタマイズのサムネイル（アイキャッチ）の設定から
サムネイルを非表示にすることもできます。
こちらの サンプル画像 300 x 300 px で設定した画面です。
アップロードした画像サイズが 300pxより小さかった場合 このように
表示サイズが バラバラになってしまいますので 指定する画像サイズや
アップロードする際の 画像サイズを編集する必要があります。
サムネイル管理 と メディア設定
メディア画像の設定は Luxeritas 管理機能の サムネイル管理画面 と設定画面のメディア の2か所から行います。
Luxeritas ＞ 管理機能 ＞ サムネイル管理
画面左にチェックを入れた項目が サムネイルに使用することができますが
上段の4項目は 基本のメディアサイズになり この画面から編集することが出来ません。
この編集は 管理画面＞設定＞メディア から行ないます。
画像サイズのバラつきの原因
先ほどの バラバラの画像サイズの原因は Crop の設定ができない画像サイズにあります。
＊ Crop 縦横比が合わない時、はみ出した部分が切り取られます。とあります。
こちらの表で見ていくと 300x300px サイズの Crop にはチェックが付いていませんので
元の画像の 縦横比のまま表示される形となってしまう。ということになります。
300x300px サイズ設定の場合、このように横幅に合わせるか カットされるかのどちらかになり
画像が小さい場合は 横幅に合わせて高さが足りない状態で Cropが設定されている場合は
両端をカットし 拡大されるという形になります。
逆に、正方形の画像も サムネイルサイズが 長方形の場合は 上下をカットされ調整されます。
改善方法
画像を均一にする方法としては こちらの3通りの方法になります。
- 150 X 150px の設定にする。
- 横長サムネイル 320x180px を選択する。
- ユーザーサムネイルで サイズ設定と Crop の設定をする。
3.の ユーザーサムネイルの作成は 表の下部に自由にサイズ設定できる欄が3つありますので
希望のサイズと ユーザーサムネイル1 の部分に 分かりやすいネーミングを付けます。
最後に Crop にチェックを入れれば 300pxサイズの画像でも 自動でサイズ調整してくれます。
元の画像をリサイズして頂くか 1.か2.の方法を選択してください。
グリッドレイアウトの設定
外観カスタマイズから グリッドレイアウトを選択します。
グリッドレイアウトの項目では リスト型トップページ・カテゴリ・アーカイブ
3種類の設定項目があります。手順はすべて同じです。
グリッドレイアウトには タイル型とカード型、2種類あり 最大1列から 4列までのサイズに分かれています。
ブラウザのサイズに合わせて 表示される列の数が変わり
4列を選んでいても、画面幅が狭くなると 3列や 2列のサイズに変化していきます。
タイル型
それぞれの レイアウトのイメージを見ていきます。
注）画像は 多少縮小していますので、特徴だけ捉えてください。
タイル型は 画像を大きく表示することが出来ますので インパクトが強くなる感じでしょうか。
カード型
カード型は 画像が左で右側にタイトルが入るデザインになります。
2列の設定の場合、横長のカード型ですが 3列・4列になると カードは縦長になります。
3列・4列のカード型の場合 画像が小さくなり 画像よりも 文字を目立たせたい場合に 有効ですね。
おすすめレイアウトとサムネイルパターン
これは サイトのイメージもあるのでお好みですが、バランス的に良いというパターンを２つ。
TOPに 通常スタイルを持ってくるデザインです。
タイル型
通常スタイル 1 サムネイルサイズ medium 300x300px
タイル型 ３列 サムネイルサイズ tile 320x180px ( Crop )
カード型
通常スタイル 1 サムネイルサイズ tile 320x180px ( Crop )
カード型 2列 サムネイルサイズ ユーザーサムネイル 300x300px ( Crop )
同じサイズで揃えてもいいのですが、このパターンも良くないですか？
通常スタイルの使い分け
通常スタイルを指定することで
グリッドレイアウトのサイズを使い分けることができます。
サムネイル項目で 通常スタイルと
リスト型・カード型のサイズ指定を行います。
サムネイル表示サイズ
こちらで 通常スタイルと 指定したスタイル（ タイル型・カード型 ）のサイズを選択します。
テキストの配置
記事の文章の抜粋を表示させる場合、文字数の指定と テキストの配置を指定することができます。
回り込みのイメージはこんな感じです。
文字を表示させたくない場合は 文字数の欄を 空白にしておきます。
青色のバーを左右に移動させることで テキストの文字色を薄くすることが出来ます。
今回サムネイルとして使用させていただいた 画像をご紹介させて頂きます。
こちらは無料で利用できる画像素材のサイトからダウンロードさせて頂いています。
ステキな画像を提供してくださり ありがとうございました。
pencil parkerさんの作品
Megan Rexazinさんの作品
無料写真素材なら【写真AC】
himawariinさんの作品