###実現したいこと
【実現したいこと】
Wordpressの投稿記事一覧画面で、以下のレスポンシブデザインを実現したいです。
①パソコンの場合
・投稿記事が表示が、最大5列になる。
・ブラウザの縮小に応じて、5列→4列→3列→2列という風に列の数が減っていく。
②スマホの場合
・2列で固定。
③それ以外(タブレット端末等)
・3列で固定。
http://gigazine.net/
上記サイトと同じような感じにしたいです。
【現状】
①②③いずれの端末でも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です。
どんな情報でもありがたいです。
宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/02 05:43