スマホの一覧リストスタイル

何列でもやることは可能なんですが、スタイル3列からスタイル2列にするのは難しいかと思います。
おそらくSimplicity付録のjavascriptが3列を作っていて、タイルの位置をabsolute等で計算していたりすると思います。
もしここでcssをいじくって幅を広げたりするとタイル同士が重なったりすることもあろうかと思います。

予め、cssのflex等を利用して3列で作っておいたものを、スマホの画面に合わせて2列は可能です。
そのためには、3列の時のスタイルをflexを利用して作っておかないといけません。一度作れば、要素の幅を設定するだけで何列でも作れます。

Simplicityは、基本的に枠となる要素、例えば#body-inや#footer-in等と、タイルなら.entryを囲む#listに対してdisplay: flexを指定して、その中身の並び方を設定するだけで良いのですが、flexはベンダープレフィックスが必要なため色々と面倒でもあります。
しかしながら古いブラウザを除けばたいてい対応しているので、flexを利用することをオススメします。

flexを利用する際は、一覧リストのスタイルはデフォルで構いません。

サンプル: デフォルトのリストスタイルをflexで3列にする | codepen

サックリと作ったのでまだ手を入れないといけない部分はあるかと思いますが、基本的にはこんな感じです。

cssはscssで書いてます。これはこのままでは動作しません。
css欄のview compiledボタンを押してcssに変換したものを子テーマstyle.css等に入れてお試し下さい。
尚、CSSに変換した時に自動でベンダープレフィックスが付与されます。
冒頭のmixinの部分は出力されませんが、cssではその内容を利用している部分に既に適用されています。

画像の高さを揃えたいとか、きっちりグリッドにして枠の高さを揃えたいと言う場合は、ここから更にひと工夫が必要です。

ご返答ありがとうございます

コピペ程度しかできないので
Hidekichi様のstyle.cssで試してみました

見事にスマホでの２列表示が成功しましたが
画像が正方形のためＰＣで見るとボヤけてしまいます
画像の縦横比を維持するための
方策をご指示頂けないでしょうか

よろしくお願いいたします

それも用意してますが、jQueryが必要です。
また一瞬チラツキも出ますので、できるのであればjQueryを使わず画像自体を16:9で作りなおすのが理想です。作りなおした場合はjQueryは必要ないかも。
※ チラツキはキャッシュが効けば軽減されるかも知れません。
※ jQueryで、imgのsrcを新規挿入要素(.insert)にbackground-imageで読み込ませています

サンプル: 複数列表示のサムネイルを16:9にする

ちなみに、前のサンプルも今回のもPCでは3列、タブレット(スマホ横)では2列、スマホ(縦)も2列、仮に320pxより小さな画面では1列となっています。そういう端末がアレばですが。

> 画像が正方形のためＰＣで見るとボヤけてしまいます
これはサムネイルが正方形であるためだろうと思います。元の画像が仮に16:9などであって、それがサムネイルとして正方形で作られているのでそうなるのでほあって、例えば、

http://localhost/blog/wp-content/uploads/2015/09/black-and-white-buildings-city-1380-300×111-300×111-100×100.jpg

こういうアドレスがある時に、.jpgの前にある-100×100(-300×111)を取り除ければ元の画像になります。
それを利用すれば、元の画像の比率でできるのですが、そうすると画像が重すぎる可能性があるので、サンプルではサムネイルの上下を切り取り(実際には隠れているだけ)16:9に見せかけています。
仮に横幅が狭い場合は横に引き伸ばされますが、もちろん縦にも引き伸ばされ、はみ出した部分は表示されません。
つまり、常に表示領域は16:9であるわけです。

サムネイルを引き伸ばすということはそれだけ画像が荒くなります。よって高画質なサムネイルを作る場合は、画像を高画質に保つ必要があります。単純に画像編集ソフトで圧縮をかければ画像のファイル容量は下がりますが、画質が荒くなります。
tinypngやtinyjpegのようなサービスで画像の最適化を行いできるだけ画質を保つ必要があります。大きな画像を利用するというのもひとつの手です。大きすぎてもアレですけれども。

ご丁寧な説明ありがとうございます

ＰＣの一覧リストをタイルにした場合
スマホのタイル２列はイメージにぴったりです

スマホは正方形でもいい（ボケが目立たない）ので
「mobile.css」用のcssを
ご教示頂けないでしょうか

よろしくお願いいたします

スマホの時に画像が正方形になるようにサンプルをアップデートしました。

コメント 16:9 の部分の追記部分をコメントアウトすれば常に16:9です。background-size: containは必要に応じて利用して下さい。※ 無くても行けそうなのでコメントアウトしています。

あ、mobile.cssは必要ありません。子テーマのみで完結できると思います。

> スマホは正方形でもいい（ボケが目立たない）ので

この認識は間違っています。
.insertにはbackground-imageで読み込んでいますから、読み込んだ画像自体が変化しているのではなく.insert自身が変化しているのです。

つまり、16:9になる枠組みがあって、その中に画像をセンタリングし入れています。16:9からはみ出た部分はもちろん非表示です。なので中身自体は完全にあって、表示領域である.insertを正方形にすれば、通常表示になるという寸法です。

ここから、16:9以外の比率でも作れます。

ボケが目立つのは、元々のサムネイルが100×100のサイズで作られているからだろうと思います。それを拡大してbackground-imageで入れればたいていはボケます。特にjpg画像であれば余計にボケるでしょう。
ボケを軽減したい場合は、サムネイルを作成する前の元の画像の画質を上げて画像を最適化する必要があります。
それでも100×100のサムネイルが作成されるとすれば、確実に拡大されることになるので画質は落ちます。

サムネイルのサイズを変えるとすれば、アップロード時に変更される設定として、ダッシュボード→メディアの設定で、サムネイルの設定をし、画像からサムネイルを再生成するプラグインなどで良い感じになるように変更する必要が出てくるかと思います。

ただしここらは、ややこしいことになる部分でもあるので、これからサイトを作成する方には良いですが、すでに記事がいくつかあってやり直すのも大変だと言う方にはオススメできません。

wordpressは大・中・小とサムネイルがあるわけですから、最悪、.entry-thumbに読み込むサムネイルを「中」辺りにすれば、これまでより画像自体は画質アップすると思います。

entry-card.phpの

the_post_thumbnail( ‘thumb150’, array(‘class’ => ‘ent

この部分などを、

the_post_thumbnail( ‘medium‘, array(‘class’ => ‘ent

等にすれば、中サイズのサムネイルが貼り付けられるかと思います。デフォルトでは300×300だったかと思うので、今よりは画質は上がるはずです。ただしその分重くなるので諸刃の剣だと思って下さい。

ご教示頂きましてありがとうございます

申し訳ありませんが「jQuery」はどう扱って良いのか
私レベルではわかりません

最初に提示して頂きました「css」に
entry-card.php「中サイズのサムネイル」としたところ
ＰＣもスマホも現状の４：３画像となり
最初に望んだ結果となりました
※＜スマホ2列＞リスト数が奇数の時、一番下のみ画像が大きい

画像データは以前と同じ？　なので
重さは変わらない？　かもしれません

いろいろとアドバイスありがとうございました

jQueryは子テーマjavascript.jsにそのまんま追記します。
そのまんま追記した場合、サムネイルが入っている部分が、

[.entry-thumb]
[a]
[img][/img]
[/a]
[/.entry-thumb]

↑　こういった構造から

[.entry-thumb]
[a]
[.insert][/.insert]
[/a]
[/.entry-thumb]

のようになります。で、cssの16:9の部分で.insertがスタイルされて16:9でサムネイルが表示されます。

仕組みとしては、imgのsrcのアドレスを.insertのbackground-image:url(“ここ”)で読み込ませています。.insertが枠になり、その中の背景としてサムネイルが読み込まれるという仕組みです。
この背景は元々のサムネイルなので、100×100のサムネイルと300×300のサムネイルなら後者の方が画質は高いはずです。大きな差はないかも知れませんが数が増えればそれだけ重くなるというのに注意して下さい。

> ※＜スマホ2列＞リスト数が奇数の時、一番下のみ画像が大きい

これは、自動でサイズが決定されるため、3列の時(PC時)にリストアイテムが10個表示だとすると、3段になった所で1つあまり、その一つがとても大きくなります。もしここを9個表示にすると、今度はスマホの時(2列)には、4段の後1つ余ることになりその1つが大きくなります。

このことから、3と2の公倍数あたりを設定するのが良さそうです。なので6か12あたりでしょうか。
そうすると、
12個表示の時、3列で4段、2列で6段。
6個表示の時、3列で2段、2列で3段。
となって、うまくあまりがでないと思います。それでも投稿記事が全部で11個しか無いような場合は足りないスペースを埋めるように最後の要素が大きく表示されます。これはflexの仕様です。

> ※＜スマホ2列＞リスト数が奇数の時、一番下のみ画像が大きい

無理矢理感が強いですけれども、表示件数が10件の場合などで、3列スタイルで1つ余る時を何とかするためにサンプルのcssを修正しました。

どうしても6件あるいは、12件以外の記事数を表示したい時に。
本来は、max-widthを指定しないほうが確実ですので、表示件数を6件あるいは12件にするのがベストかと思います。

■scss

#list {
  justify-content: flex-start; //変更

  .entry {
    max-width: 216px;  //追加
  }
}

/*スマホの時2列*/
@include tablet {  //タブレット部分追加
  #list {		
    .entry {
      max-width: 100%;
      flex: 1 45%;
      margin: 10px 5px;
    }
  }
}

/*スマホで画面幅が320px以下の時は1列*/
@media screen and (max-width: 320px) {
  #list {
    .entry {
      max-width: 100%; //追加
      flex: auto;
    }
  }
}

こんな感じですかね。

ＧＯＤ ＨＡＮＤ

何が変わったかはわかりませんが
ＰＣ時の１余りボケボケ画像が
直りました！

ありがとうございます！！