「投稿リスト」ブロックを「4列」表示にする

「投稿リスト」ブロックを「4列」表示にする
目次

「投稿リスト」ブロックを「4列」表示にする

トップページなどで「投稿リスト」ブロックを使っている方も多いと思います。

当ブログのトップページでも多用していますが、「投稿リスト」「カード型」「サムネイル型」

最大カラム数は「3列」表示までです。

通常の「投稿リスト」カード型 ※3列表示

※スマホは2列表示設定

デザインによっては、パソコン表示の時だけ「4列」にしたい時ありませんか?

そんなときのカスタマイズです。

まずは完成形をご覧ください。

「投稿リスト」サムネイル型を4列表示

※スマホは2列表示設定

カスタマイズ方法

カスタマイズ方法は、コピペで完了です。

STEP
「投稿リスト」ブロックの設定

「投稿リスト」ブロックでは、「カード型」と「サムネイル型」のみが「最大カラム数」を設定できます。

  • レイアウトを選択: カード型またはサムネイル型
  • 最大カラム数: 3列
STEP
「投稿リスト」ブロックにクラス名を設定

「投稿リスト」ブロックを選択し、 「高度な設定>追加CSSクラス」 に、以下のクラス名を入力します。

  • クラス名: -col4
STEP
CSSをコピペ

以下のCSSを、当該ページの「カスタムCSS&JS>CSS」にコピペします。

/* 投稿リストブロックのカード型とサムネイル型を4列表示にする */
@media (min-width: 960px) {
  .-col4 .-type-card.-pc-col3 .p-postList__item, .-col4 .-type-thumb.-pc-col3 .p-postList__item{
    width: calc(100% / 4);
  }
}
  • 2行目min-width: 960px
    画面幅が960px以上の時に4列表示するようブレイクポイントを設定します。
  • 4行目:width: calc(100% / 4)
    カラムの幅を1/4(25%)に設定します。
STEP
完成

サポートフォーム

このカスタマイズに関するお問い合わせや、
その他リクエストなど、お気軽にどうぞ。

5
4
3
2
1
個人情報の取り扱いについて

POINT-OF-VIEW.BLOG(以下「当サイト」)では、以下のとおり個人情報保護方針を定め、個人情報の保護を推進致します。

# 個人情報の利用目的

当サイトでは、お問い合わせの際、名前やメールアドレス等の個人情報を入力いただきます。取得した個人情報は、お問い合わせに対する回答や必要な情報を電子メールなどでご連絡する場合に利用させていただくものであり、これらの目的以外では利用いたしません。

# 広告について

当サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net等のアフィリエイトサービス)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。
クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。

Cookieを無効にする方法やGoogleアドセンスに関する詳細は「広告 ポリシーと規約 Google」をご確認ください。

# アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。このGoogleアナリティクスはトラフィックデータの収集のためにクッキー(Cookie)を使用しております。トラフィックデータは匿名で収集されており、個人を特定するものではありません。

くれぐれもカスタマイズは
「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ(←本来の意味での)をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです!
(カスタマイズ沼にハマらないようご注意ください^^;)

\ ご支援ありがとうございます! /

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、のDMからどうぞ。
まずはで仲良くしてください ^^

WordPressテーマ「SWELL」

17,600円(税込)

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。
ブロックエディター完全対応!

目次