Stinger8で投稿一覧をグリッド表示する方法WordPress(ワードプレス)の使い方は用途によって異なります。ホームページとして使うのか、ブログとして使うかの?WordPressの使い方について、サーバーの設定、テンプレート。プラグインの選び方などをまとめています。ブログStingerの投稿一覧をグリッド表示するメリットシンプルな表示でファンの多いWordPressのテーマファイルStingerですが、この投稿一覧をグリッド表示にしたいというニーズが発生しました。Stingerの投稿一覧はシンプルでいいのですが、グリッド表示にすることでメリットがあります。画像(写真)を強調できて一覧が華やかになり、スマホではレスポンシブ表示も可能で大きなグリッドをタップして記事を選び易くなります。グリッド表示(グリッドレイアウト)とはグリッド表示というのは、要素を格子状に並べるグリッドレイアウトのことです。そもそもグリッドとはが、格子状領域という意味で、カメラのプレビュー画面などに表示される縦横の線のことです。グリッド表示に似たものとして、タイル表示もあります。タイル表示の方は、高さが異なる要素が上下にあってもそれを隙間なく埋めていく表示と定義している場合があります。そのため、タイル表示はグリッド表示とは別ものとして扱う場合が多いようです。グリッド表示のためのプラグインがあるWordPressにおいてグリッド表示は、プラグインを使うと簡単に実現が可能です。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と同じ場所です。?>(3)サムネイルをthumbnailからmediumに変更するitiran.phpでサムネイルのサイズがthumbnailであるため、行に並べるグリッドの数にもよりますが、このままではサムネイルの表示サイズが小さすぎるはずです。そこで、これをmediumに変更します。?>(4)行に並べるグリッドの数を調整するサムネイルの画像数や行に並ぶグリッドの数を調整するのは、CSSに設定した以下の行のminmaxの数字を変えるだけです。1fr));上記のCSSでは「200」に設定していて、Stinger8でPC表示した場合は3つ並ぶようになっています。サイズや一列に表示される数を変更したい場合は、この数字を変更するだけです。”1ページに表示する最大投稿数”が初期値が「10」になっているので、列に3つ並べる場合は3の倍数の方がいいと思います。スマホでの表示を意識する場合は、あまりたくさん表示しない方がいいと思います。非常にシンプルな方法で、Stinger8の投稿一覧をグリッド表示させることが可能でした。CSSエラーの表示について今回ご紹介したCSSは、WordPressのテーマ編集を使った場合に警告やエラーが表示されます。そのまま保存してもらえばグリッド表示されます。現時点では、警告とエラーの原因と解決方法は分かりません。ご利用される場合は、その点をご留意ください。既存サイトをWordPressへ移行する方法HTMLで作成された既存サイト(ホームページ)をWordPress化する方法を動画にまとめました。移行に必要な手順を順を追って丁寧に解説した動画です。あなたの既存サイトをWordPressに移行したいとお考えでしたらご覧ください。こちらからご登録ください。1分以内にご覧いただくことができます。