PCとSPで「一覧リストのスタイル」を変えたい

3列になっていればよいのであれば、「タイル3列 画像縦横比保存（要再生成）」を使わずcssで3列にして、スマホではそれを解除すればよいだけです。

「タイル3列 画像縦横比保存（要再生成）」はjQueryで作られており、いわゆるposition: absoluteの状態で作られています。これはpxなどで絶対値として各リストアイテムを並べています。

これが問題なのは、cssでスタイルしているのではなく、各.entryにstyle属性として書かれているので上書きするにはjQuery(javascript)を利用しないと値を変えたりできないわけです。

なので、メディアクエリで変えるならcssで制御できたほうが便利ですからタイル状にはできませんが3列に並べたカードでやるのが良いのではないかと思います。

サンプル: PCは3列表示でスマホはデフォルトっぽい感じ | codepen

こんな感じでしょうか。

＞Hidekichiさま
早速でアドバイスいただいていたのに返事が遅くなってすみません。

＞タイル状にはできませんが3列に並べたカードでやるのが良いのではないかと思います。

これっていうのは3列だけど高さがバラバラになるやつのことですか？

＞サンプル: PCは3列表示でスマホはデフォルトっぽい感じ | codepen

わざわざサンプルを作って頂きありがとうございます(>_<)
「HTML」「CSS」「JS」がありますが、これらはどのファイルに記述すれば宜しいのでしょうか？
また全上書きですか？
あ、CSSは子テーマに追加で良いんですよね？
無知すぎて申し訳ないのですが、今後作っていくサイト軍は全てsimplicityでやっていこうと思っていますので、お手間ではない範囲で教えて下さると幸いです<(_ _)>

＞わいひらさま
ご助言ありがとうございます。
is_mobile()関数に関しては#38932でも書かれていますが、やはりチンプンカンプン状態です(/_;)
検索したところ、

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！
ttp://naifix.com/is_home-and-is_mobile/

というサイトを発見しました。
このサイトに書いてあることを参考にすれば可能でしょうか？
また、このサイトに書いてあるようにfunctions.phpへも変更が必要なのでしょうか？
・・・WP導入2日目にfunctions.phpを扱って大変なことになったので、functions.phpはちょっとビビッてます（苦笑）

> これっていうのは3列だけど高さがバラバラになるやつのことですか？

通常はバラバラになりますが、その列で一番高いブロックに自動で揃います。また高さが可変になるのはたいていタイトルの長さなので、タイトルのセレクタを高さ固定にして、はみ出た分はoverflow: hiddenで消してしまえば高さが揃います。
そうすると、おおまかに高さは全て揃います。

> 「HTML」「CSS」「JS」がありますが、これらはどのファイル
> に記述すれば宜しいのでしょうか？

htmlは元のhtmlを流用しているので何もしなくて大丈夫です。
cssはサンプル上ではscssで書いてあるので、css欄にあるview compiledボタンよりcssに変更して、それを子テーマstyle.cssに追記します。
jsはそのまま子テーマjavascript.jsに追記します。

またjacascript欄にあるものは、コメントにもあるようにアイテムの数を揃えるためのものです。例えば、5つのアイテムがあるとして横に3つ並べるということは2つ余りが出ます。
cssのflexのjustify-content: space-between(※)と言うプロパティでは、アイテム数を親要素の横幅で均等に割り付けます。3つで折り返すようになっているので、2つ横に並ぶアイテムの部分では幅が50%となってしまいます。
なので、3つになるようにダミーのリストアイテムを追加しているわけです。

※ flex-start(通常の横並び)でやる場合は、.entryのwidthをcalc(100% / 3 – (マージン*2*アイテム数))とかでもできなくはないですけど上手く行かない場合もあります。

更に、レスポンシブになっているので画面幅によって3列の時と2列の時があります。そうすると、3の倍数だけでは2列の時に最後が1つ余る場合が出てきます(※)。そうすると3列の時と同じように最後のアイテムが横幅いっぱいになってしまうのです。
※ 例えばリストイテムが10件の場合、3列なら3段と1つ余り、2列なら5段で余りナシ等

よって、これを回避するためには、リストアイテムの数を2と3の公倍数にする必要があります。つまり6、12、18などです。これらの数値はjavascript.jsの記述でもできますが、wordpressの設定で1ページにリストアイテムをどれだけ表示するかを設定できますので、それで設定しても良いです。デフォルトは10なので、これを12とか6とかサイトのデザインに合うように設定すればjavascript部分は不要です。

wordpressの設定は、ダッシュボード→設定→表示設定で1ページに表示する最大投稿数を設定すれば良いです。

＞Hidekichiさま

とても丁寧に解説頂きありがとうございます！
ただ申し訳なく思うのですが、アドバイス頂いた内容は何となくしか理解できていません。
理屈的な感じは理解できたのですが・・・。

初心者は当分カスタマイズ等はしない方が良さそうですね。
とはいっても、ブログ始めた以上はお気に入りなデザインにしたくなるんですよね。
ご指導いただいた内容が理解できるように、一つひとつ勉強と検証をしてみます。

いつもいつもありがとうございます<(_ _)>

＞わいひらさま

お忙しい中、いつもありがとうございます！

＞PHPを書いた事がないのであれば、多少PHPの勉強してからでないと、PHPの編集はやめておいた方が良いかもしれません。

確かに（笑）
今日早速「PHP入門書」を取り寄せました。
今のところ意味不明でじんましんが出そうです（笑）
でも今後ブログやサイトを増やしていこうと思っていますので
通らないといけない道と思い、苦手な勉強をしていきたいと思います。

また質問をさせて頂くことが多々あるかもしれませんが、
お二方とも、今後ともどうぞよろしくお願い致します<(_ _)>

誰でも「知らないウチ」は何となくしかわかりません。
何がわからないのかを順番に読み解いて、実践していけばその内わかります。
プログラムやらの上達は人の書いたスクリプトをコピペして、自分で改造していくことです。わからない箇所が出てきたら、その都度それを調べます。

どこを触れば、どのような動作になるかがわかってくれば、自分に引き出しができて、必要な時に必要なことが「使える」ようになります。

まず言葉がわからない場合は、その言葉を調べます。昔のように本を読まなければ理解できないなんてことはこのご時世ありません。たいていはオンライン上に答えがあります。

phpはphpマニュアルがあります。本ではスクリプトの組み立て方を覚えて、その内容はPHPマニュアルを読みます。書いてあることはすぐに理解できないかも知れませんが、PHPマニュアルはその使い方とかも書いてあるので、どういう時にどういったことをするを本で理解して、それぞれのコマンドはマニュアルで理解すると言うのが良いかと思います。

つまり本は人のコードをコピペしてるのと同じことなのです。それをどのように自分が理想とする形にするかは改造です。

プログラムに熟練した人とこれから始める人との差は、やり方や言葉を知っているかだけです。結局辞書を引くようにマニュアルサイトを見ながら作業するわけですから。

まだ準備中みたいですが、programming copilot kiteはそういう面倒なのを自分のエディター環境で実現できる凄いやつです。その内こういうのがたくさん出てきてプログラミングもよりお手軽になるでしょうね。

Hidekichiさま

暖かいお言葉ありがとうございます。

「習うより慣れろ」という言葉がありますが、
「最初はみんな初心者」的なことを考えると
今からでも頑張ってみようと思います。

ブログもコンテンツありきだということは分かっていますが、
見た目的にも訪問したくなるサイトにしたいと思っていますので
色々勉強していきたいと思います。

今後ともよろしくお願いします！<(_ _)>