Stingerの投稿一覧をグリッド表示するメリット

シンプルな表示でファンの多いWordPressのテーマファイルStingerですが、この投稿一覧をグリッド表示にしたいというニーズが発生しました。

Stingerの投稿一覧はシンプルでいいのですが、グリッド表示にすることでメリットがあります。

例えば、画像(写真)を強調できて一覧が華やかになり、スマホではレスポンシブ表示も可能で大きなグリッドをタップして記事を選び易くなります。

グリッド表示(グリッドレイアウト)とは

グリッド表示というのは、要素を格子状に並べるグリッドレイアウトのことです。

そもそもグリッドとはが、格子状領域という意味で、カメラのプレビュー画面などに表示される縦横の線のことです。

グリッド表示に似たものとして、タイル表示もあります。

タイル表示の方は、高さが異なる要素が上下にあってもそれを隙間なく埋めていく表示と定義している場合があります。

そのため、タイル表示はグリッド表示とは別ものとして扱う場合が多いようです。

グリッド表示のためのプラグインがある

WordPressにおいてグリッド表示は、プラグインを使うと簡単に実現が可能です。

プラグインを探すと「Post Grid」と「The Post Grid」が見つかりこれが有名な2つとなります。

これらを使う方法でもいいのですが、プラグインを使うのが嫌という人もいます。

また、表示部分にプラグインを使うと大きなデメリットがあります。

それは、デザインがテーマファイルのそれとはテイストが変わってしまうことです。

そこで、デザインを統一させようと思うと、無理にプラグインのファイルを編集することになりハマるケースが多々あります。

事実、この2つのプラグインは表示設定については、あまりかゆいところに手が届いていません。

プラグインを使わないでCSSだけで実現できる

そのため、Stingerの投稿一覧に表示されているhtml要素をそのまま使ってグリッド表示にしたいというニーズの方が多いと思います。

プラグインを使わないでStingerのテーマファイルを編集する方法で実現できないか模索したところ、CSSの編集だけで実現可能なことが分かりました。

Stingerのテーマファイルの表示がを維持できるのであれば、その後の一覧表示箇所のCSS編集などを含めたカスタマイズはやりやすいはずです。

そこで、CSSだけを用いてグリッド表示を実現する方法をご紹介します。

CSSを変更してStinger8で投稿一覧をグリッド表示する手順

(1)CSSを貼り付ける

以下のCSSをstyle.cssに追記します。

Stingerの一覧表示では、定義リスト<dl><dt><dd>を使っているため、dl,dt,ddの設定もしています。

また、画像サイズも横幅一杯を使うようにしています。

(2)itiran.phpにclassを追加する

Stinger8テーマで一覧表示を司るPHPファイルは「itiran.php」です。

そこで、CSSで追加したclassである「grid」をitiran.phpに定義します。

場所は、kanrenと同じ場所です。(class=”kanren grid”)

(3)サムネイルをthumbnailからmediumに変更する

itiran.phpでサムネイルのサイズがthumbnailであるため、行に並べるグリッドの数にもよりますが、このままではサムネイルの表示サイズが小さすぎるはずです。

そこで、これをmediumに変更します。

(4)行に並べるグリッドの数を調整する

サムネイルの画像数や行に並ぶグリッドの数を調整するのは、CSSに設定した以下の行のminmaxの数字を変えるだけです。

上記のCSSでは「200」に設定していて、Stinger8でPC表示した場合は3つ並ぶようになっています。

サイズや一列に表示される数を変更したい場合は、この数字を変更するだけです。

また、1ページに表示する記事の数は、WordPress管理画面の「設定ー表示設定」で表示します。

”1ページに表示する最大投稿数”が初期値が「10」になっているので、列に3つ並べる場合は3の倍数の方がいいと思います。

また、スマホでの表示を意識する場合は、あまりたくさん表示しない方がいいと思います。

以上です。

非常にシンプルな方法で、Stinger8の投稿一覧をグリッド表示させることが可能でした。

CSSエラーの表示について

今回ご紹介したCSSは、WordPressのテーマ編集を使った場合に警告やエラーが表示されます。

ただ、そのまま保存してもらえばグリッド表示されます。

現時点では、警告とエラーの原因と解決方法は分かりません。

ご利用される場合は、その点をご留意ください。