Luxeritas カスタマイズ-グリッドレイアウト

Luxeritas version2.~以上になってからグリッドレイアウト表示が可能になりました。タイルみたいに画像がペタペタと並ぶ形式です。さらにカード型というもう少し画像を抑えたグリッドレイアウト表示もできるようで、列の数や抜粋文字数など色々変更可能です。もちろん今までの表示でも可能です。

今までのスクロールで探すよりは記事の内容を表す画像を並べて画像から関連記事を探せる方が便利だということもあります。

少し試してみましたが、表示される画像はアイキャッチ画像のようです。私のサイトは暇な時にアイキャッチ画像を制作しているので、割とアイキャッチ画像が記事内容を表しているのでこのグリッドレイアウトを採用しようと思いましたが、問題が一つ起こりました。そのグリッドレイアウト表示にした時に一部画像が上下部分で切られて横長の長方形になってしまいます。
xserverwordpress238
3種類ともアイキャッチ画像の上下が切られています。

xserverwordpress239
本来は正方形の画像で下に犬さんやらブタさんもいるのに頭部のごく一部だけで切られてしまっています。どうしようか試行錯誤してなんとか上下が切られてしまう理由も分かったのでそれを含め、グリッドデザインを採用する手順を説明します。
スポンサーリンク

カスタマズ(外観)→「グリッドレイアウト」を表示させる

ダッシュボードから「カスタマズ(外観)」メニューへアクセスします。
xserverwordpress230
ダッシュボードの左側にLuxeritasテーマの場合、専用の「Luxeritas」メニューが表示されます。
マウスでその中にある「カスタマズ(外観)」をクリックします。

xserverwordpress240
Luxeritas 2以降には「グリッドレイアウト」メニューが表示されるのでクリックすると「グリッドレイアウト」メニューになります。

「グリッドレイアウト」メニューで「タイル型(最大3列)」表示にする

xserverwordpress241
「リスト型トップページ」はサイトのホームページのことでここをまずタイル型(最大3列)にしてみました。
ここで画像が横長の長方形になってしまいます。つまり上下で少しづつ切り取られてしまっています。この原因を調べてみると、この「グリッドレイアウト」メニューの中段あたりに、
「サムネイル(アイキャッチ)
*サムネイルは「サムネイル」の項目で設定できます。」
との一文が書かれています。
xserverwordpress242
Luxeritasではアイキャッチ画像をサムネイルと呼んでいるようです。サムネイル(アイキャッチ)の設定で修正できるようです。

「サムネイル(アイキャッチ)」メニューを表示させる

カスタマズ(外観)→「グリッドレイアウト」を表示させていますが、「グリッドレイアウト」メニューは「グリッドレイアウト」のもう少し下方にあります。カスタマズ(外観)では中段あたりです。
xserverwordpress243
「サムネイル(アイキャッチ)」メニューをクリックします。

「サムネイルの表示サイズ」を修正します

xserverwordpress245
「サムネイル(アイキャッチ)」メニューに「サムネイルの表示サイズ」とあって「タイル型(グリッドレイアウト)」が画像のように「tile(320 x 180px crop)」となっていました。それで上下が切り取られていたわけです。この選択をした覚えはありませんでしたけど、cropをしないnormal, medium, large, fullから選べば切り取られてしまうことは無さそうです。ここではmedium(300px)を選択しました。タイル型にしろカード型にしろグリッドレイアウト画像表示は「サムネイルの表示サイズ」で変更します。ちなみにこの下にカード型(グリッドレイアウト)とあって画像の大きさを変更できます。

hozonshitekokai01
変更したら忘れずに「保存して公開」をクリックします。

「グリッドレイアウト」メニューに戻ります

xserverwordpress240
再度、「グリッドレイアウト」メニューをクリックします。

「タイル型(最大3列)」で画像がcropされないか確かめる

xserverwordpress246
右側のサイト表示をトップページ(ホームページ)にしておいて、「グリッドレイアウト」メニューから「リスト型トップページ」を「通常スタイル」表示させておいてから、「タイル型(最大3列)」を再度選択します。

xserverwordpress247
アイキャッチ画像=サムネイルも全体が表示されました。「保存して公開」をクリックします。