[localab]

【お使いの Snow Monkey のバージョン】バージョン: 10.5.2
【お使いのブラウザ】クローム

My Snow Monkeyでカスタム投稿を追加しました。
※トピック：カスタム投稿タイプをウィジェット「最近の投稿」に表示させたい、を参考にしました

固定ページで、トップページレイアウトを作成中です。

ウィジットの「最近の投稿」でカスタム投稿を選択できるようになりましたが、PC版で横4列のレイアウトにしたいです。

「最新の記事」では表示項目数の他にカラム数も変更できるようですが、カスタム投稿を利用してトップページで横列のカラム数を変更するにはどうしたらよいでしょうか？

複数パターンのカスタムフィールドを利用するため、カスタム投稿の記事が多いものを移行するため、「投稿」ではなく「カスタム投稿」が利用したいのですが。何か解決策はないでしょうか？
よろしくお願いいたします。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

こんな感じでどうでしょう？ カスタマイザー → 追加 CSS に追加してみてください。

@media (min-width: 64em) {
  .widget_snow_monkey_recent_posts_widget .snow-monkey-recent-posts .c-entries--rich-media .c-entries__item,
  .widget_snow_monkey_recent_posts_widget .snow-monkey-recent-posts .c-entries--panel .c-entries__item {
    flex: 0 1 25%;
    max-width: 25%;
  }
}

♥ 1

いいねをした人: 居ません

[localab]

ありがとうございます。トップページのカスタム投稿一覧が4列になりました！

これと類似で、アーカイブを4列にしたくて、参考にCSSさわってみたけどうまく動きません。
アーカイブ一覧の4列表示も教えていただけないでしょうか？

♥ 0

いいねをした人: 居ません

[localab]

上記自己解決しました。書き方が間違っていました。

以下、.p-archive が入ればアーカイブと考えてもよいでしょうか？

/* アーカイブページ一覧を4列に */
@media (min-width: 64em) {
  .p-archive .c-entries .c-entries__item {
    flex: 0 1 25%;
    max-width: 25%;
  }
}

♥ 0

いいねをした人: 居ません

[localab]

最初に回答いただいたもの、固定ページではなく、カスタマイザーから追加したらOKでした。
でも、固定ページにブロックで追加する際には

.widget_snow_monkey_recent_posts_widget

を削除する必要がありました。
参考までに追記しました。

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

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

以下、.p-archive が入ればアーカイブと考えてもよいでしょうか？

です！

最初に回答いただいたもの、固定ページではなく、カスタマイザーから追加したらOKでした。
でも、固定ページにブロックで追加する際には〜

僕が書いた CSS はウィジェット用になります。ブロックには効きません。 .widget_snow_monkey_recent_posts_widget を消して書くとウィジェット・ブロック両方に効きますが、詳細度の問題で状況によっては効かない場合があるかもしれません。

こんな感じにすると詳細度が強めにあたって良いかもしれません。

@media (min-width: 64em) {
  .widget_snow_monkey_recent_posts_widget .snow-monkey-recent-posts .c-entries--rich-media .c-entries__item,
  .widget_snow_monkey_recent_posts_widget .snow-monkey-recent-posts .c-entries--panel .c-entries__item,
  .smb-recent-posts .snow-monkey-recent-posts .c-entries--rich-media .c-entries__item,
  .smb-recent-posts .snow-monkey-recent-posts .c-entries--panel .c-entries__item {
    flex: 0 1 25%;
    max-width: 25%;
  }
}

解決済みということでトピック閉じます！

♥ 1

いいねをした人: 居ません

[投稿者]

投稿