WordPressテーマSANGOの質問

アバター
taka

質問させていただきます。

[catpost catid="カテゴリーID" num="出力する記事数"]

このショートコードを使うと、特定のページに「指定したカテゴリーIDの記事を好きな数だけ出力」できますが、スマホは横長1列、パソコンだとやや左寄りに1列ずつ表示されてしまいます。パソコンでは2列で表示したいです。type=”card”を使うと2列にはなりますが、これは大きすぎます。

小さめの横長タイプの記事一覧で、トップページの記事一覧のようにスマホは1列のまま、パソコンでは2列ずつ表示するにはどうしたらいいでしょうか?

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2021/01/30

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

小さめの横長タイプの記事一覧で、トップページの記事一覧のようにスマホは1列のまま、パソコンでは2列ずつ表示するにはPHPやCSSなどの調整が必要そうです。
次のSANGOのアップデートで、こういった記事も表示できる様にショートコードにオプションを追加しますので少々お待ちいただけますでしょうか?

ご不便をおかけしますがよろしくお願いします。

アバター
taka
2021/01/31

もちろん待ちますよ。
わがままなお願いをしてしまい、お手数をおかけしてすみません。
アップデートを楽しみにしています!

サルワカくん
サルワカくん
2021/01/31

お世話になっております。
お待たせしました。

先ほど、新しいバージョン2.1.1をリリースしました。
以下の様にtypeにcard3を指定していただくことで横長のカードがPC幅の際に2カラム表示されます。

[catpost catid="カテゴリーID" num="出力する記事数" type="card3"]

よろしくお願いします。

アバター
taka
2021/02/02

card3のご対応ありがとうございます!

現状はこのようになっています。
card=(PC版は大型カード2列、スマホ版は大型カード1列)
card2=(PC版は横長タイプ1列、スマホ版は大型カード1列)
card3=(PC版は横長タイプ2列、スマホ版は横長タイプ1列)

次回のバージョンアップで構いませんが、card2のPC版はそのままでスマホ版をcard3と同様に横長タイプ1列にしていただけないでしょうか?

その方がPC版とデザインが統一されるので分かりやすいと思います。現在はcard2はパソコンだと横長なのにスマホでは大型カードタイプになっています。

サルワカくん
サルワカくん
2021/02/03

お世話になっております。

card2に関してはだいぶ昔から実装しているショートコードになります。いまそのデザインを変更すると他のサイトで使ってくださっているお客様にも影響が出てしまいそうなので
そのままにさせていただけないでしょうか?

もし、card2のスマホ時のスタイルを調整したいのであれば、子テーマから、CSSでPCの際のデザインと同じ様に調整することになると思います。
よろしくお願いします。

アバター
taka
2021/02/03

確かに急に変えると今使っている方に影響が出てしまいますからね。
そのままで構いませんよ。申し訳ありません。
card2でスマホの表示だけ横長カードタイプにするには子テーマCSSにどのように追記すればいいのでしょうか?

サルワカくん
サルワカくん
2021/02/03

以下のCSSを子テーマで追加していただくとスマホ時にもおなじレイアウトで表示されます。
よろしくお願いします!


.c_linkto.longc_linkto {
  max-width: 100%;
  display: table;
}
.longc_img,
.c_linkto.longc_linkto .longc_content {
  display: table-cell;
  vertical-align: middle;
}

.longc_img {
  width: 40%;
}