質問: ### 実現したいこと 【実現したいこと】 Wordpressの投稿記事一覧画面で、以下のレスポンシブデザインを実現したいです。 1パソコンの場合 ・投稿記事が表示が、最大5列になる。 ・ブラウザの縮小に応じて、5列→4列→3列→2列という風に列の数が減っていく。 2スマホの場合 ・2列で固定。 3それ以外(タブレット端末等) ・3列で固定。 上記サイトと同じような感じにしたいです。 【現状】 123いずれの端末でも3列で固定されている。 ■■■ ■■■ ■■■ ■■■ ↑のような感じです。 ### style.css(子テーマ) ``` /* Theme Name: stingerplus child Template: stingerplus Version: 20160525 */ /*media Queries タブレットサイズ(960px以下) ----------------------------------------------------*/ @media only screen and (max-width: 960x) { strong { background-color:#ffb6c1 !important; } /*-- ここまで --*/ } /*media Queries タブレットサイズ(600px以上) ----------------------------------------------------*/ @media only screen and (min-width: 600px) { header { text-align: center; } .sitename img { max-width: 300px; margin: 0 auto; } strong { background-color:#ffb6c1 !important; } /*-- ここまで --*/ } /*media Queries PCサイズ(960px以上) ----------------------------------------------------*/ @media print, screen and (min-width: 960px) { strong { background-color:#ffb6c1; } /*-- ここまで --*/ } li.cat-item .children { padding-left: 15px !important; } .backnon { background: none; padding: 0 10px; } @media only screen and (min-width: 781px) { .backnon { padding: 0; } } .itiran-custom dl { border: none; background: #fff; padding: 10px; margin-bottom: 20px; /* カード下に余白を追加 */ box-shadow: 1px 3px 3px #999999; -moz-box-shadow: 1px 3px 3px #999999; -webkit-box-shadow: 1px 3px 3px #999999; } .itiran-custom dl:last-child { padding-bottom: 10px; /* 最後のカードに設定されている余白を修正 */ } @media only screen and (min-width: 413px) { /* スマホは除外 */ .itiran-custom dl h3 a { font-size: 20px; /* 記事タイトルの文字サイズ */ line-height: 1.4em; /* 記事タイトルの行の高さ */ } .itiran-custom dl { width: 100%; float: none; margin-right: 0; margin-bottom: 20px; } .itiran-custom dd { height: auto; padding: 10px; } } .itiran-custom dl { width: 32%; float: left; padding: 0; margin-right: 2%; margin-bottom: 20px; } .itiran-custom dl:nth-child(3n) { margin-right: 0; } .itiran-custom dl:last-child { padding: 0; margin-bottom: 20px; } .itiran-custom dt { float: none; width: 100%; } .itiran-custom dt img { width: 300px; height: auto; } .itiran-custom dd { height: 160px; /* タイトル・日付・カテゴリ部分のボックスの高さ */ padding: 10px; } .inner { max-width: 1060px; padding: 0 10px; margin: 0 auto; } #headbox { padding: 0; margin: 0; } #header-l { text-align: center; float: none; max-width: initial; } ``` ### 補足情報 利用しているテーマは、STINGER PLUS というフリーのテーマです。 WordPressのバージョンは 4.7.5です。 どんな情報でもありがたいです。 宜しくお願い致します。
回答: 例示しているサイト()をブラウザのデベロッパーツール(開発者ツール)を使用して確認すると、おおよその仕組みがわかります。 ざっと見た感じでは、各記事のサムネイルとタイトルのセットがsectionタグで囲まれていて、そのsectionの横幅(width)がメディアクエリで指定されているようです。 ``` @media (min-width: 980px) { .content section { width: 24.5%; } } @media (min-width: 768px) { .content section { width: 49.5%; } } ... ```