Luxeritas カスタマイズ(外観) グリッドレイアウト

2017/09/17Luxeritas カスタマイズ(外観)

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

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

少し試してみましたが、表示される画像はアイキャッチ画像のようです。私のサイトは暇な時にアイキャッチ画像を制作しているので、割とアイキャッチ画像が記事内容を表しているのでこのグリッドレイアウトを採用しようと思いましたが、問題が一つ起こりました。そのグリッドレイアウト表示にした時に一部画像が上下部分で切られて横長の長方形になってしまいます。
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
アイキャッチ画像=サムネイルも全体が表示されました。「保存して公開」をクリックします。

ダッシュボード→Luxeritas→カスタマイズ(外観)攻略法

Luxeritas270[6]
サイトタイトル変更とサイトアイコンを設定手順説明
Luxeritas271[6]
横幅、記事一覧、パンくずリンク、関連記事とナビ表示
Luxeritas272[6]
タイル型、カード型グリッドレイアウト表示手順説明
Luxeritas273[5]
カラム変更とサイドバーなどの領域分離or結合を選択
Luxeritas274[6]
ヘッダー/フッターのカスタマイズ
Luxeritas275[4]
コンテンツ&サイド枠線とサイドバー幅変更
Luxeritas276[8]
コメント欄の表示or非表示、枠線
Luxeritas277[4]
キャッチフレーズ、ホーム、PAGE TOP変更
Luxeritas278[3]
メタ情報の表示or非表示と配置
Luxeritas279[7]
サムネイル(アイキャッチ)大きさと配置
Luxeritas280[4]
フォントの変更
Luxeritas281[6]
タイトル、記事など文字サイズの変更
Luxeritas282[3]
文字色の編集
Luxeritas284[3]
背景色と枠線色の編集
Luxeritas283[7]
背景とタイトルとロゴ画像挿入による編集
Luxeritas285[3]
パンくずリンクの配置変更と編集
Luxeritas287[7]
ヘッダーナビ(グローバルナビ)編集
Luxeritas288[3]
ヘッダー上の帯状メニュー編集
Luxeritas289[3]
マウスオンアニメーション

Posted by クチコミ探し