前略、M.J.さん

試しに、雑な書き方で、CSSのコードを書いてみましたが、なんだか、メインカラム内が散かっているようで見づらく、スッキリしません。

Cocoonのデフォルト縦型2列のままの方が良いと感じます。

#list article {
  display: flex;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb {
  width: 35%;
  margin-right: 4%;
}

.ect-vertical-card .entry-card-wrap .entry-card-content {
  flex: 1;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
  vertical-align: top;
}

.cat-label {
  position: static;
}

@media screen and (max-width: 740px) {

  #list article {
    display: block;
  }

  .ect-vertical-card .entry-card-wrap .entry-card-thumb {
    width: 100%;
    margin-right: 0;
  }

  .ect-vertical-card .entry-card-wrap .entry-card-content {
    flex: 0 1 auto;
  }
 
  .ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    vertical-align: baseline;
  }

  .cat-label {
    position: absolute;
  }
}

サムネイル画像の縮小率が大きいため？かInternet Explorer 11では、サムネイル画像もキレイに表示されないみたいですし・・

テストサイトなどでご自身でも試してみられると良いかと思います。

私は、あまり、オススメする気がしません。

M.J. さん

私が最近いいなと思ったのは、M.J.さんとは真逆の、スマホでエントリーカードが横長（サムネイル画像が左でタイトルが右）になるレイアウトです。

以下の過去のトピックは、新着記事をショートコードで表示するものですが、実際やってみると、いい感じかも？と思ったりしました。

https://wp-cocoon.com/community/postid/42494/

ただ、新着記事ウィジェットや新着記事のショートコードだと、生成されるサムネイル画像が320px幅なので、少し大きなサイズで表示されると、ちょぴりピンボケになってしまいます。

リフィトリーさんありがとうございます。

cssを学び始めたばかりで記述内容を完全に理解はできませんでしたが、文字サイズとか簡単部分のCSSを追記編集して自分好みにする事ができました。ありがとうございます。

せっかくですのでPC表示はこのまま横長2列で、おすすめ頂いたスマホ表示を横長1列にするのもやってみようと試みているのですが、

@media screen and (max-width: 740px)
以下を削除してスマホ表示でも横長カードにするまではわかりました。

しかしこれだと2列表示のままです。このままスマホ表示だけ1列表示にする方法はございますか？

M.J. さん

ちょっと、やってみないと、わからないのですが、スマホでも、横長（左がサムネイル画像で右がタイトル）という場合は、縦型２列をベースにカスタマイズするのではなく、最初から横長（左がサムネイル画像で右がタイトル）のデフォルトのインデックスページのレイアウトをカスタマイズした方が良いのかもしれません。

こればかりは、やってみないと、何とも・・

リフィトリーさん

だんだんわかってきました。

一応このまま

@media screen and (max-width: 740px) {

.ect-vertical-card .entry-card-wrap {
width: 100%;
}
}

を追記したらPC横長2列　スマホ横長1列にできました。

しかしこれだとそもそものCocoon側の縦長2列設定を無理やり横長にしつつスマホの時だけさらに1列にしているので、込み入った事をしてるわけですね。

もう少し試してみます。

M.J. さん

しかしこれだとそもそものCocoon側の縦長2列設定を無理やり横長にしつつスマホの時だけさらに1列にしているので、込み入った事をしてるわけですね。

そうなんです。

縦型じゃなくて、デフォルトのエントリーカードからカスタマイズした方が、良いのかもしれません。

M.J. さん

試しにデフォルトのエントリーカードでやってみましたが、雑な書き方なため、間違っているかもしれませんし、合っていても、細かい修正が必要かと思います。

セレクタが長くなっているのは、もしかしたら、別の箇所のエントリーカードに影響しちゃうかもしれないので、長くなってしまっています。

とても、雑で、適当なコードですが、ヒントぐらいにはなるかもしれません。

/*横型２列*/
#list.list.ect-entry-card.front-page-type-index {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
  width: 48%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
  width: 35%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
  margin-left: 0;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
  position: static;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
  vertical-align: top;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
  margin-right: 4%;
}

@media screen and (max-width: 740px) {

  #list.list.ect-entry-card.front-page-type-index {
    display: block;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
    width: auto;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
    width: 38%;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-content {
    margin-left: 40%;
  }

  #list.list.ect-entry-card.front-page-type-index .cat-label {
    position: absolute;
  }

  #list.list.ect-entry-card.front-page-type-index .card-thumb img {
    vertical-align: baseline;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
    margin-right: 3%;
  }
}

M.J. さん

上記コードのイメージは以下のような感じです。

リフィトリーさん

#listのなんかをdisplay:flex ;にするくらいしかわからなかったので助かりました。

殆ど一般的なCSSの質問になってしまいましたが、長々とありがとうございました。

これを元に勉強します。他の方の参考にもなれば幸いです。

PC表示でスニペットが下に回りこんでしまうのを防ぐには、

#list article {
  display: flex;
}

とするといいのかもしれません。

ただ、740px以下では、

display: block;

に戻さないといけないかもです。

ああ、

 flex: 1;

を指定しなくてはいけない箇所もありました。

とりあえず、以下に全体のコードを貼っておきます。

/*横型２列*/
#list.list.ect-entry-card.front-page-type-index {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
  width: 48%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
  width: 35%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
  margin-left: 0;
  flex: 1;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
  position: static;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
  vertical-align: top;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
  margin-right: 4%;
}

#list article {
  display: flex;
}

@media screen and (max-width: 740px) {

  #list.list.ect-entry-card.front-page-type-index {
    display: block;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
    width: auto;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
    width: 38%;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-content {
    margin-left: 40%;
    flex: 0 1 auto;
  }

  #list.list.ect-entry-card.front-page-type-index .cat-label {
    position: absolute;
  }

  #list.list.ect-entry-card.front-page-type-index .card-thumb img {
    vertical-align: baseline;
  }

  #list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
    margin-right: 3%;
  }
  #list article {
    display: block;
  }

}

一応コードは書いてみたものの、やはり、カテゴリーラベルをどのようにするかや、サムネイル画像の生成サイズなどの問題もあり、ヒント程度にはなるかもしれませんが、オススメするカスタマイズではないような気がします。

やはり、テーマ作者様は、いろいろは条件を上手くデザインに落とし込んで工夫して作られているのだと思います。

リフィトリーさん

毎度ありがとうございます。

現状スニペットは非表示なので大丈夫でした。今後、参考にさせて頂きます。

flexの追記もありがとうございます。

（開発ツールでこれ消しても変わらず、どうなるかよくわからなかりませんでしたが・・・）

ところで私はPC表示の時だけ

@media screen and (min-width: 741px) {}

で2列表示にさせて、スマホ表示部分は一切追記せずに

『エントリーカード（デフォルト）』でCocoon設定仕様の横型1列にしてみたのですが、これに問題はないでしょうか？

誤字は”よくわかりませんでした”ですね

最後もコード化されてしまってすみません。後から編集できないんですね。。

M.J. さん

ところで私はPC表示の時だけ

@media screen and (min-width: 741px) {}

で2列表示にさせて、スマホ表示部分は一切追記せずに

『エントリーカード（デフォルト）』でCocoon設定仕様の横型1列にしてみたのですが、これに問題はないでしょうか？

繰り返しになってしまいますが、Cocoonのデフォルトの表示から、かなり変えた状態となりますので、どのような不都合が起こるかわかりません。

ですので、このカスタマイズは、私はオススメいたしません。

問題があるかどうかは、ご自身でご判断いただくしかありません。

また、フォーラムにカスタマイズのご相談を書きこまれる場合は、フォーラムの冒頭にもありますとおり、実際のURLをご提示いただければと思いす。

回答側で、同様のテスト環境を都度用意するのは、負担が大きすぎるためです。

M.J. さん

ヒントとなりそうなことは、かなり書き込ませていただきましたので、あとは、ご自身で工夫なさってみてください。

M.J. さん

もうひとつだけ書くとすれば、カスタマイズで改変したところは、必要な時以外は、「Cocoonのデフォルトに戻す」ということかと思います。（つまり、まず、デフォルトの状態を詳しく調べないといけない訳です）

変えたままの状態では、他に影響を及ぼす可能性が増えてしまいます。

なので、カスタマイズの影響を必要最小限にとどめる方向に努める方が良いのではないかと思います。

M.J. さん

今、一番最初のご質問を読み返してみると・・

Cocoon設定→インデックスタブのカードタイプの設定について

「縦型カード2列」の設定ですとPC表示の場合、私的にサムネイルが大きく、1画面に表示できる記事数も少ないかなと思っております。

なので「エントリーカード（デフォルト）」のような横型の形のまま、幅を半分弱にして2列で表示したいのですがどのように設定すればよろしいでしょうか？

※スマホ向けには「縦型カード2列」の見た目のままが希望です。

「縦型カード３列」が、最も合致しているような気もします。

リフィトリーさん

沢山投稿して頂き、ありがとうございます。

あとはそれをヒントに自分で時間かけて調整していきたいと思います。

URL提示できず負担かけてしまって申し訳ないです。次回はトピックたてる時はURL・環境等も併記します。

M.J.さん

ちょっと、コードが雑で、お粗末さまでした。