WordPressのSwellテーマで、フルブロック内に上段3項目・下段2項目のバナーリンクを揃え、2段目を中央に配置するリッチカラムの作り方は少し工夫が必要です。この記事では、Swell標準機能と追加CSSを組み合わせて整列させる手順を解説します。
リッチカラムブロックの基本設定
Swellでは「リッチカラムブロック」を使って複数のバナーやリンクを配置できます。まずは、フルブロックを作成し、上段用の3カラム、下段用の2カラムをそれぞれ作成します。
上段・下段それぞれにバナーを配置したら、各カラムの幅や余白を統一して見た目を揃えることが大切です。
カラム幅と中央揃えの調整
下段の2カラムを中央揃えにするには、リッチカラムの「カラム設定」で幅を固定するか、親ブロックにflexboxを適用します。Swellの追加CSSで以下のように指定すると中央揃えが可能です。
.rich-column-row:last-child { display: flex; justify-content: center; gap: 20px; }これにより、下段の2カラムが自動的に中央に配置され、上段3カラムとバランスが取れます。
バナーサイズを揃える方法
バナーリンクのサイズを揃えるには、各バナー画像の幅と高さを統一するか、CSSでmax-widthやheightを指定します。例えば、すべてのバナーに共通のクラスを付与し、次のように指定します。
.banner-item img { width: 200px; height: 100px; object-fit: cover; }これにより、画像の比率に関係なく均等なサイズで表示されます。
レスポンシブ対応のポイント
フルブロックのリッチカラムはPCだけでなくスマホ表示にも対応させる必要があります。メディアクエリを使って、画面幅に応じてカラム数や幅を調整すると、スマホでも中央揃えが維持できます。
例として、下記CSSで画面幅600px以下では1カラムに変換することが可能です。
@media (max-width: 600px) { .rich-column-row { flex-direction: column; align-items: center; } }まとめ
Swellテーマで上段3項目・下段2項目のリッチカラムを作るには、リッチカラムブロックを使い、下段はflexboxで中央揃え、バナー画像のサイズを統一することがポイントです。追加CSSを組み合わせることで、見た目を揃えた2段構成のフルブロックが完成します。
レスポンシブ対応も考慮すると、PC・スマホ両方で美しく表示できるリッチカラムを作成可能です。
コメント