前略、chikako さん

私もテスト環境でテストしてみたのですが、余白のチェックを入れても、スマホでは、くっついちゃう仕様みたいです。

リフィトリー様

テストして頂いたんですね。

わざわざありがとうございます。

そうなんですね。

不具合でなくて良かったです。

ありがとうございます。

@chikako さん

試しに、以下のようなCSSのコードを書いてみたら、中央にも、余白ができました。

media screen and (max-width:834px) {
    .recommended.rcs-card-margin a:nth-of-type(2n+1) {
        margin-right: 2.5%;
    }
}

あまり詳しく検証していないので、間違っているかもしれません。

@chikako さん

ちなみに、PC表示のオススメカードのサイズが揃わないのは、ちょっと私には原因がよくわからないです。

わいひらさんなら、たぶん、わかるのでは、と思います。（昨日も同じ質問があったようですが・・）

@chikako さん

先ほどのコードのメディアクエリに@が抜けていました。

訂正します。

@media screen and (max-width:834px) {
    .recommended.rcs-card-margin a:nth-of-type(2n+1) {
        margin-right: 2.5%;
    }
}

@chikako さん

私のテスト環境では、くっついていたので、仕様かと思ったのですが、Cocoonのマニュアルページを見てみたら、くっついていないみたいですね。すみません。

もしかしたら、何らかの不具合があるのかもしれません。

サムネイルのサイズが揃わないのも、ちょっと気になりますし・・

わいひらさんの、回答をお待ちになった方が良いかと思います。

リフィトリー様

凄い！！

色々検証していただき感謝です！！

ありがとうございます。

私もマニュアルと、カスタマイズを記載してくれてるサイトさんのでは余白ができていたので？？？

となっていました。

わいひら様の回答待ってみようと思います。

ありがとうございます。

@chikako さん

フォーラムにメンバー登録すると、トピックが購読できるようになります。

購読したトピックに誰かが何か書きこむと、その都度、登録時のメールアドレスにメールが届きます。

返信を見逃しにくくなりますし、タイムリーに返信を読むことができます。

リフィトリー様

すみません。

職場から休憩中にスマホで投稿していてログインし忘れてました。

今戻ってきて調整していますが

PCでのサイズのばらつきは画像のサイズがバラバラだったからのようです。

こちらも昨日作成してから、画像だけ変更加えて再アップした3つだけ

違うサイズに変換していたせいでした。

お騒がせしました。

リフィトリー様

度々失礼します。

スマホでの余白の方も教えていただいたコードで無事できました。

重ね重ね　ありがとうございます。

@chikako さん

もし、わいひらさんが、テーマの方で修正？くださったときは、先ほどのコードは、削除してください。

リフィトリー様

そうですね。

　了解いたしました。

おすすめカードをウィジェットで入れているのであれば、余白を設定できるかと思います。

@yhira さん

投稿者:: @chikako

Cocoon設定でも、ウィジェットの表示設定でも余白のチェックをしていますが、上下の余白はあるのですがスマホ表示で２個ずつでくっついてしまっています。

chikako さんは、チェックを入れてらしたみたいな感じです。

@yhira さん

テスト環境の親テーマをバージョン：2.2.1.8にしてみたのですが、やはり、くっついてしまうみたいです。

横方向のマージンは0の指定になっているようです。

わいひら様

いつもお世話になっております。

ちなみに人気記事のウィジェットで表示設定が選べないという事象もあったので

全てのプラグインを無効にしたら表示されました。

なのでそういうったことかな？と再度リフィトリー様に教えていただいたコードを消して

試してみましたが、やはりくっついてしまいました。

どうやら不具合みたいですね。
修正したものを以下にアップしておきました。

------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

@yhira さん

早速、「バージョン：2.2.1.11」をダウンロードして、ローカルサイトで試してみたのですが、今度は、左右方向は、PC表示では、余白が保たれているものの、上下のカードがくっついてしまいます。

また、スマホ表示では、プレイクポイントが480px？のため、１列表示になり、やはり上下のカードがくっついてしまいます。

今一度、ご確認をお願いいたします。

僕の環境だとこのように表示されます。

@yhira さん

そうなのですね。

では、後ほど、今一度、確認させていただきます。

デベロッパーツールのaタグ部分のCSSはどのようになっていますか？

@yhira さん

すみません。他のトピックのナビカードウィジェットの横並びのために書いたCSSが干渉してしまっていたようです。

再度確認してみたところ、余白が表示されました。

実際に画像を入れていないので、テストがまだ、不十分なのですが、再度確認してみたところ、２列表示のときに上の段と下の段の横位置がずれてしまうようです。

親テーマに変えてみたのですが、同様の症状です。

もしかしたら、導入当初は、float で横並びにされていたのでしょうか？「余白を有効にする」にチェックを入れて、横に４つ並んだときのマージンの付け方が複雑で、左の３つと右端の最後のカードはマージンの付け方が異なっていますね。

スマホ表示で2列表示になったときにも、この影響を受けてしまうようです。

現在は、float ではなく、flexboxにされていらっしゃるようですので、カードのマージンは最初から全部同じでもいいのではないかと、あまり深く考えもせずに思ったりしています。

私は、勘違いや間違いも多いので、また、間違っているかもしれません。

834px以下の画面幅の指定が以下のようになっているので・・

.recommended.rcs-card-margin a:last-child {
    margin-right: 0;
}

この 0 を１%にすれば良いかとは思うのですが、そもそも、横１列のときに複雑なマージンが必要なのかは、私には、わかりません。

おそらくですが、カードが奇数の場合は、最後のカードが中央にくるので、上の段と下の段は、ずれないので、気づきにくいのではないかと思われます。

.recommended.rcs-card-margin a:last-childの処理を削除するの忘れていました。
書かれた通り、カードが奇数だったから動作確認に気づかなかったようです。
修正したものを以下にアップしておきました。
------------------------------------------------
https://github.com/yhira/cocoon
最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

FTPでのアップデート方法はこちら。
https://wp-cocoon.com/ftp-update/
------------------------------------------------

わいひら様

リフィトリー様

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

早速試してみます。

@yhira さん

次のWordPressのアップデートへのご対応で、お忙しいところ恐縮です。

早速、新しいファイルをダウンロードして試してみました。

スマホ表示のときは、「余白を有効にする」にチェックをいれても綺麗に揃うようになったのですが、PC表示のときは、右側のマージンがないため、全体が右に寄ってしまうようです。

@yhira さん

あまり詳しくテストした訳ではないのですが、

.recommended.rcs-card-margin a {
    margin: 1em;
    margin-right: 0;
}

というのは、やめて、

「余白を有効にする」のときのCSSの指定は、PC表示のときも、最初から、

.recommended.rcs-card-margin a {
    margin: 1%;
}

としてしまう、というのでは、何か不都合がありますでしょうか？

投稿者:: @leafytree

「余白を有効にする」のときのCSSの指定は、PC表示のときも、最初から、

.recommended.rcs-card-margin a {
    margin: 1%;
}

としてしまう、というのでは、何か不都合がありますでしょうか？

これを行うと、例えば1個目と2個目の間が2％になって間が空きすぎるのが気になって、そのようにしています。
モバイルだと2列になるので、あまり気にならないのでそんな感じにしました。

一応修正したものをアップしておきました。
https://github.com/yhira/cocoon

@yhira さん

早速、ダウンロードして試してみたところ、問題なく表示されています。

お忙しいところ、早々のご対応、ありがとうございます。

@yhira さん

投稿者:: @leafytree

早速、ダウンロードして試してみたところ、問題なく表示されています

と、思ったのですが、IEで画面幅をやや狭くしたときに、右端のカードだけ、少し小さくなってしまうみたいです。

他のブラウザは、問題ないかと思うのですが・・

そのページは、公開ページとかにはないですよね？
というのも、なぜか僕のローカル環境をIEで開くとエラーになってしまって…。

ローカルサイトのアドレスをIE11のローカルイントラネットに登録すると、見れるようになるかと思います。

ありがとうございます。使えました。
以前まで表示できてたのに、いつの間にこんな設定が必要になったんだろう。

一応修正してみました。
なぜか、最後の:last-childのマージンが大きさに反映してしまうのです。
今回の修正で多分改善されたと思うのですが、なぜ今回は大丈夫なのかがよくわかりません。

@yhira さん

投稿者:: @yhira

今回の修正で多分改善されたと思うのですが、なぜ今回は大丈夫なのかがよくわかりません。

なぜIEだけ横のマージンの値が、本体の高さに影響してしまうのかは、謎ですが、実際、影響してしまうようです。

今回の修正で完全に改善されたのかと思いきや、左端と右端は、やはり画面幅を小さくしたときに高さが、微妙に小さくなっているようです。

IEだけのことですし、殆んど目立たないので、それほど、こだわるところでも無いような気もします。

しかし、メインカラムの背景色の中にあるアイテムなので、左端と右端のマージンは、各カード間の隙間と同じでははくても、そちらも目立たないような気もします。

なので、「first-child」「first-child」は使わず、PC表示時は、0.5％ か 0.6％とかで、834px以下は1％という具合にシンプルに切り替えるだけでもいいのではないかと、思ったりもします。

また、しかしですが、そこは、テーマ作者様のこだわりや、考え方もお有りかと思いますので、そちらを尊重したいと思います。

投稿者:: @leafytree

なので、「first-child」「first-child」は使わず、PC表示時は、0.5％ か 0.6％とかで、834px以下は1％という具合にシンプルに切り替えるだけでもいいのではないかと、思ったりもします。

これにすると、どうもパソコンのとき左右の狭さが気になってしまうんですよね^^;
とりあえずWindows10以降のOSでIEは標準ブラウザでないので、この程度のIEの問題ならスルーしておこうと思います。