Gutenberg完全対応のSANGO Gutenberg について

記事一覧ブロックで記事を横3列表示する方法

この記事はSANGO Gutenbergをインストール済みの方が対象です

SANGO Gutenbergをインストールされていない方は以下の記事をご参照ください

SANGO gutenberg抜群の使い心地!SANGO Gutenbergを使おう!

記事一覧ブロックを画面幅が十分に大きい際は横3列で表示したいという質問をよくいただきます。以下のように記事一覧ブロックは少しのカスタマイズで横3列表示することができます。

まずはSANGO 記事一覧ブロックを通常通り呼び出します。SANGO 記事一覧ブロックを使ったことがない方は以下の動画をご覧いただければと思います。

ブロックが無事追加できたら記事一覧ブロックの設定項目よりカスタムCSS設定を開いて以下の図のように入力します。

以下のCSSをカスタムCSSに貼り付けてください。

CSS
@media only screen and (min-width: 1030px) {
  .catpost-cards .c_linkto {
    width: 31%;
  }
}

これで無事に記事一覧が横3列になりました。

記事一覧で横3列の設定をよく使うのであればカスタムプリセットとして以下のようにブロックの設定を保存しておくと良いでしょう。

カスタムプリセット機能についてご存知ない方は以下のリンクをご参照ください

SANGO gutenbergSANGO Gutenbergで一度作ったブロックの設定を使い回す方法

コメントを残す

* は入力必須項目です。
コメント投稿ガイドラインを読んでから投稿してください。
メールアドレスは公開されませんが、名前は公開されます。

HTMLやPHPのコードを掲載するときはHTMLエスケープツールで特殊文字を変換してから貼り付けてください。