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

2018/12/14

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

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

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

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

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

Luxeritasグリッドレイアウトメニュー

サムネイルが上下で勝手にカットされたので修正しました

どのようなデザインになるか見てみようとサムネイルを並べて表示させたら、サムネイル(アイキャッチ画像)が上と下で勝手にカットされてしまっていました。その原因と修正の仕方をまず説明します。ただ最新のLuxeritasのバージョンでは修正されているかもしれません。
ダッシュボードから「カスタマズ(外観)」メニューへアクセスします。
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
アイキャッチ画像=サムネイルも全体が表示されました。「保存して公開」をクリックします。

リスト型トップページ

リスト型トップページで通常スタイルを選択した時の画像
リスト型トップページで通常スタイルを選択すると記事が一つ一つ大きく並んで表示されていきます。

最初の1件で通常スタイルを選択した時の画像
「タイル型」や「カード型」を選んでもその下の数値挿入でその挿入した件数だけ通常スタイルとして表示させて混在表示も可能です。上の画像ではタイル型を選択していますがその下のボックスに1を挿入してあります。従って最初の1件は通常スタイルとして表示されています。2件目以降はタイル型(最大3列)表示です。

ウィジェットをクリックしている画像
トップページにウィジェットを配置できます。ダッシュボードのメニューから「ウィジェット」をクリックしてウィジェット一覧を表示させます。

記事一覧中央ウィジェットを赤く囲んだ画像
「記事一覧中央ウィジェット」というものがあります。

記事一覧中央ウィジェットをクリックして開いた時の画像
記事一覧の中央に表示されます。Web広告などのタグをここに貼ると記事一覧の中央に表示されます。

記事一覧中央ウィジェットの配置画像
さらにLuxeritasでは数値を記入して任意の位置に配置も出来ます。0のままでも自動的に配置されます。

カテゴリー

カテゴリー一覧ページ表示形式
カテゴリー一覧表示ページにおいても「通常スタイル」「タイル型」「カード型」の選択が可能です。つまりトップページをタイル型4列、カテゴリーページはカード型2列、あるいは通常スタイル表示など自由に選択可能です。

カテゴリー一覧の最初に説明分を挿入するにチェックを入れた画像
カテゴリー一覧ページ独自のカスタマイズとして「カテゴリー一覧の最初に説明分を挿入するにチェックを挿入する(HTML記述可)」という項目があります。
これを有効にするとカテゴリーに説明分を加えておくとカテゴリー一覧ページの冒頭にその説明分が表示されます。

ダッシュボード からカテゴリーを選択している画像
ダッシュボードの「投稿」メニューから「カテゴリー」をクリックします。新規カテゴリーを追加する場合は下部に「説明」とある白い大きな空欄が用意されています。ここに書かれた文章がカテゴリー冒頭に表示することができます。
新規カテゴリーを追加の説明欄を赤く囲んだ画像
HTML記述可とチェックボックスにあるので画像なども挿入できそうです。チェックを外して記述無しも当然可能ですから必須ではありません。

Posted by クチコミ探し