前略、めもら さん

https://memorize410s.com/model

こちらのページのことでしょうか？

３列→２列→１列でしたら、Cocoonブロックではなく、WordPressの「カラム」ブロックの３カラムが使えそうな気もします（実際にやってみないとわかりませんが）が、４列→２列の場合は、適当なブロックがなさそうなので、自前でCSSで実装するぐらいしか、いまのところ思いつかないです。

CSSのイメージが沸かないときは、以下も検討に入るかもしれません。

Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】

もっと良い方法を、どなたか書きこんでくださるかもしれません。

やはりCSSの実装が必要ですよね。

リンクまでありがとうございます！
こちらも視野に入れ、もう少し自分で頑張ってみます。

@めもら さん

WordPressのブロックには、class が付けられる仕様だったと思います。

あとは、今時なら、Flexboxでしょうか。

Flexboxであれば、カラム分けする必要はないかと思います。

https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

こういったことが嫌いでなければ、ご自身でイケそうな気もします。

何度も参考サイトまでご提示いただいて、ありがとうございます！

ご提示いただいたページも見てはいたんですが、
cocoonでのカラムを入れ子として使っているからなのか、なかなかうまく動かせず…

WordPressのブロックエディタで操作できて、設定はCSSだけで済むようなものを探していることろです。

負けずに頑張ろうと思います。

@めもら さん

画像ブロックをshiftキーを押しながら複数選択して、グループブロックで囲むやり方でちょっとテストしてみました。

画像ブロックには、「cutom-flex-item」という名前のクラスを付け、グループブロックには、「custom-flex-container」の名前のクラスを付けて、以下のようなHTMLの構造になるようにして・・

以下のようなCSSを書いてみると・・

.custom-flex-container .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}

.wp-block-image.size-large.cutom-flex-item {
    width: 25%;
    text-align: center;
}


@media screen and (max-width:834px) { 
    .wp-block-image.size-large.cutom-flex-item {
        width: 33%;
    }
}

@media screen and (max-width:480px) { 
    .wp-block-image.size-large.cutom-flex-item {
        width: 50%;
    }
}

以下の動画のような感じになったのですが、実際やってみると、けっこうメンドクサイような気もします。

画像ブロックの幅を固定値しても似たような動作になるのですが、旧iphone SE あたりだと、１列になっちゃうみたいです。

.custom-flex-container .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}

.wp-block-image.size-large.cutom-flex-item {
    width: 165px;
    text-align: center;
}

この方法ですと、新しい画像ブロックを足していくのが、ちょっとメンドクサイので、参考程度ということにしておいてください。

＠リフィトリーさん

うわー！すごいです！わざわざありがとうございます！

今、wordpressのカラム機能で2カラム作って、その中にcocoonの2カラムを入れる。
という謎手法だと、ちょっとしたCSSでできたので、それで行こうかと思っていました。
ただ、wordpressのカラムにcocoonのカラムを入れると、カラムの下に1段落入って空白ができる、という事象が発生していて…

無知で申し訳ないのですが、ご提示いただいた方法だと、画像を追加するたびにグループブロックを更新する必要がありますか？

あ、新しい画像ブロックは足していく必要があるのですね。

テストまでしていただいて、本当にありがとうございます！

@めもら さん

投稿者:: @めもら

ご提示いただいた方法だと、画像を追加するたびにグループブロックを更新する必要がありますか？

私もグループブロックというものを、今回初めて使ってみた次第なので、ちょっと扱いに手間取っています。

エディターをコードエディターの方に切り替えて、divタグの位置を変えればいいんじゃない？とか考えてしまうのは、おそらく古い考え方なのだろうと思います。

ブロックエディターの使い方に精通している方なら、もっと良い方法をご存じかもしれません。

もちろん、めもらさんが、手間のかからないやり方を見つける、というのも十分あり得ることです。

あるいは、発想を全く変えて、モデルさんの個別ページがあるのであれば、アイキャッチ画像を利用してサムネイルを正方形にする（Cocoon設定で可能です）などして、インデックスページで自動的に表示するとかの方が、効率が良いのかもしれません。

これも、ちょっとやってみないと、何ともいえませんが、発想は、やわらかく、広く持った方が楽しいです。

@リフィトリーさん

沢山のアドバイス、ありがとうございます！

恥ずかしい話ですが、コードにあまり詳しくなく、初心者だとわかりやすいブロックエディタでなんとかしたいと思っていました。

サムネイルを正方形にして自動生成なんてことが出来るのですね！

そっちも調べてみます！

お忙しい中、本当にありがとうございます！

@めもら さん

話が少し戻るのですが・・

新しい画像ブロックを既存のグループブロックの中に簡単に作成する方法がありました。

最後の画像ブロックが８つ目だとすると、８つ目の後に新しい画像ブロックを作成すると、グループの外になってしまうので、７つ目の画像ブロックの下の方を選択して、９つ目の画像ブロックを作成すれば、グループの中に入ってくれるようです。

ただ、そのままだと、７→９→８の順番になっちゃうので、作成した後に９を下に移動すればいいみたいです。

ブロックエディターは、順番を入れ替えるのは、簡単なので、これなら、新しい画像ブロックを足すのも、あまり手間がかからないかもしれません。

投稿者:: @leafytree

ただ、そのままだと、７→９→８の順番になっちゃうので、作成した後に９を下に移動すればいいみたいです。

ちょっと、違ったみたいです。

作成したあとに９を下に移動するのではなく、８を上に移動するとグループの中での移動になるみたいです。（慣れないとちょっとヤヤこしいですが・・）

でも、このブロックエディターの「グループ」という考え方は、HTMLがわからない方にも理解しやすく、面白い概念だと思います。

画像ブロックをグループ化する。

既存のグループに新しい画像ブロックを追加する。

@リフィトリーさん

もうなんとお礼を言えばいいのか！
本当にありがとうございます！

教えていただいた方法で、自分でできた方法だと諦めてた部分も解決できるし、
なにより動画付きで無知な私でもすぐできました！

探していた理想の形です！

ほんとに！ほんとうに！ありがとうございます！

@めもら さん

画像ブロックの方にclass が設定されていないようですが、もともとメインカラムの幅が５つは、並ばない幅みたいなのでちょうど４つになっているのでしょう。

まあ、それでも、それっぽい表示になっているようなので、これでもいいのかな的な・・

やり方自体は、こんな感じということで・・

@めもら さん

サイドバーがちょうど消えるぐらいの幅だと６つぐらい並んじゃうので、やはり、画像ブロックのひとつひとつに、class を設定しないとこれは回避できないかもしれません。

画像ブロックにクラスを設定するやり方は、

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

の動画の追加のときと同じ要領です。

画像ブロックの数だけやらないといけないので、ちょっと面倒ですけどね。

画像ブロックひとつずつに、同じ追加クラスを設定。

@めもら さん

画像ブロックのひとつずつに追加クラスを設定するのは面倒なので、グループに設定した追加クラスだけで済むように、子孫セレクタで指定してみました。

たぶん、これなら、いちいち画像ブロックを追加する度に追加クラスを指定しなくてもイケそうな気がします。

画面幅の切り替え数値等も若干変更しました。

.custom-flex-container .wp-block-group__inner-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}

.custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
    width: 24%;
    text-align: center;
}


@media screen and (max-width:834px) { 
    .custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
        width: 33%;
    }
}

@media screen and (max-width:520px) { 
    .custom-flex-container .wp-block-group__inner-container figure.wp-block-image {
        width: 49%;
    }
}

@リフィトリーさん

至らない点から改善策まで、本当にありがとうございます！

新しくご提示いただいた方法で、サイドバーを消しても4つ並びで表示されました！

感謝が尽きません！本当にありがとうございます！！

@めもら さん

3列から２列に変わるメディアクエリも 480px から 520px に変えています。

@めもら さん

7月9日18時15分現在、一つ目の画像ブロックに figure タグが無く、div タグになってしまっています。（天音さまの画像）

いつも通りの画像ブロックの作り方で、ブロックを作り直せば、CSSが効くと思います。

また、３つ目の画像ブロックに画像が入っていないようです。こちらは、画像ブロックごと作り直すか、画像とリンクを設定すれば、良いような気がします。

画像ブロックの作り方は、いつも同じやり方で作らないとCSSが上手く効いてくれません。

＠リフィトリーさん

なんだか一覧を作っている途中でおかしくなってしまって…

天音の画像は修正したんですが、作成画面で画像が小さく表示されるようになって見づらかったので、間に空白を入れて表示を大きくしていました。

先ほど一覧が終わり空白のブロックも削除しましたが、やはり小さくなりました。

見た感じだと、画像とキャプション合わせてサムネイルサイズになっているのかなと思いますが、表示はされているんでまあいいか、と思っておりました。笑

@めもら さん

エディターの画面表示がおかしい、ということのようですが、ソースコードを見ると、HTMLの構成は間違っていないような気がします。

エディターの表示がおかしいのとは、関係ないかもしれませんが、要らなくなったCSSのコードはコメントアウトするか、削除しておいた方が無難かと思います。

例えば、以下とか・・

/*モデル一覧*/
.page-id-23 .column-wrap{
flex-direction: row ;
}

エディター画面も、HTMLでWebサイトとして表示されているので、ブラウザのスーバーリロード等を試してみるのも有りかと思います。

今回のやり方は、WordPressのグループ機能を利用しているので、グループの構成を壊さないように運用していけば良いのかなと思います。

あと、下記を修正すると、切り替わりが少しスムーズになるかと思います。

投稿者:: @leafytree

@めもら さん

3列から２列に変わるメディアクエリも 480px から 520px に変えています。

今回のやり方は、一例なので、いろいろ試してみて、他にも良い方法を模索してみてください。

＠リフィトリーさん

2日にわたってご指導いただき、本当にありがとうございました！

ご指摘点修正し、気を付けながら運用していきます。

これからも勉強頑張ろうと思います。

ありがとうございました！

@リフィトリーさん

何度も申し訳ありません。

エディター画面がおかしくなるのは、ブロック化した画像ブロックたちの追加CSSクラスに「custom-flex-container」を入力したときに、起こっているようです。

この場合、何かのきっかけで戻るのを期待するしかないのでしょうか？

@めもら さん

エディター画面もHTMLで表示されているはずなので、エディター画面で該当箇所を右クリックして、デベロッパーツールで、調べてみると、何らかのCSS等が効いている等、ヒントが得られるかもしれません。（ログインしているご本人しか調べられませんんが・・）

もしかしたら、同じクラス名がWordPressかテーマか何かで既につかわれていたりする、ということも全くないとは言い切れませんので・・

クラス名がかぶっている場合は、別のクラス名に変更すれば、エディター画面の不具合が解消できるかと思われますが、そうでない場合は、ちょっと私には何ともわかりません。

クラス名を変更した場合は、CSSのコードもそれに応じてクラス名を差し替える必要があります。

@リフィトリーさん

なるほど、エディター画面でディベロッパーツールを使うという発想がありませんでした…

ありがとうございます！

じっくり調べます！

クラス名を変えたら、うまく直りました！

ありがとうございます！

@めもら さん

うっかり、変なクラス名をつけちゃいましたね。

すみません。 ? 

@リフィトリーさん

何から何まで助けていただいて感謝してます！

クラス名つけるとき、気を付けないといけないんだと学べました！笑

沢山お時間いただいて、申し訳ありませんでした。

もう何度も言っていますが、ほんとーに！ありがとうございました！