SWELLのリッチカラムの使い方｜スマホでも崩れない設定

※本記事はアフィリエイト広告を含む記事へのリンクを含みます。

商品を比べたり、おすすめ記事を並べたりするときに、「横に並べてすっきり見せたい」と思ったことはありませんか。私は以前、WordPress標準の「カラム」ブロックで並べたところ、スマホで文字がぎゅうぎゅうに詰まって読みにくくなってしまいました。

この記事では、SWELLの「リッチカラム」の使い方を初心者向けにわかりやすく解説します。実際に記事で活用してきた体験も交えるので、読みながら進めれば、パソコンでもスマホでも見やすい横並びのレイアウトを作れます。

あわせて読みたい

SWELLの評判は本当？初心者ブロガーが実際に使ってみた正直レビュー 本記事はアフィリエイト広告を含みます。 「SWELLって評判いいけど、17,600円を出す価値が本当にあるの？」と気になっていませんか。 この記事では実際にSWELLを使って...

SWELLのリッチカラムとは

リッチカラムは、画像や文章、ボタンなどを横に並べられるSWELL独自のブロックです。画面の大きさに合わせて列の数を変えられるので、どの端末でも見やすいレイアウトを作れます。

筆者は標準のカラムで苦労したあと、リッチカラムに切り替えてスマホでの見やすさが大きく改善しました。横並びのレイアウトを作るなら、まずリッチカラムを選ぶのがおすすめです。

画面サイズごとに列の数を変えられる

リッチカラムでは、パソコン・タブレット・スマホでそれぞれ列の数を設定できます。パソコンでは3列、スマホでは1列のように端末に合わせて切り替えられるのが大きな魅力です。

WordPress標準の「カラム」との違い

WordPress標準の「カラム」ブロックは、スマホでの表示を細かく調整しにくいのが難点です。リッチカラムなら列の数や余白を端末ごとに設定でき、崩れにくい記事を作れます。

リッチカラムの使い方

リッチカラムは、ブロックを追加して列の数を決め、中身を入れるだけで使えます。操作は普段の記事作成と同じなので、初心者でもすぐに使いこなせます。

筆者はAFFINGER6で横並びを作っていたころ、思いどおりの配置にするのに時間がかかっていました。SWELLのリッチカラムは見たままの状態で編集できるので、作業がとてもスムーズです。

何を並べるか先に決めておく

作り始める前に、商品の比較・おすすめ記事・メリットとデメリットなど、並べる内容を決めておきましょう。同じ種類の情報を並べると、読者が比べやすくなります。

スマホでは列の数を減らす

スマホは画面が狭いため、1列か2列に減らすのが基本です。パソコンと同じ列数のままだと文字や画像が小さくなりすぎるので注意しましょう。

リッチカラムの活用例

リッチカラムは、読者に比べてもらいたい情報や複数の選択肢を見せたいときに特に効果を発揮します。ここでは、実際に使って効果を感じた活用例を紹介します。

筆者は商品を比べる記事で、各カラムの下に「SWELLボタン」を置いて公式サイトへ案内するようにしました。読者が比べたその場で行動しやすくなり、ボタンのクリックも増えたと感じています。

商品やサービスを比較する

2〜3つの商品を並べ、画像・特徴・ボタンを同じ順番で配置すると、ひと目で違いがわかります。見出しと文章の量をそろえるのが、比べやすくするポイントです。

おすすめ記事を並べる

SWELLの「関連記事」ブロックをカラムに入れれば、おすすめ記事をカード形式で並べられます。次に読んでほしい記事をまとめて案内でき、サイト内の回遊につながります。

リッチカラムをきれいに見せるコツ

• 画像は同じ縦横比のものを使う
• 各カラムの文章量をそろえる
• パソコンでも3列までにしておく
• ボタンの文言は同じ形でそろえる

あわせて読みたい

SWELLvsAFFINGER6｜初心者におすすめのWordPressテーマはどっち？ 本記事はアフィリエイト広告を含みます。 「SWELLとAFFINGER6、結局どっちがいいの？」と迷っていませんか。どちらも人気の有料テーマで、調べるほど決められなくなるん...

よくある質問

カラムの幅を個別に変えられますか？

設定パネルからカラムごとの幅を調整できます。画像を小さく、説明を広くしたい場合などに便利です。スマホ表示もあわせて確認しましょう。

標準の「カラム」で作った記事をリッチカラムに変えられますか？

自動で変換する機能はないため、リッチカラムを新しく追加して中身を移す形になります。アクセスの多い記事から順に置き換えていくのがおすすめです。

リッチカラムの中にリッチカラムを入れてもいいですか？

入れることはできますが、構造が複雑になりスマホで崩れやすくなります。初心者のうちは、1段階のリッチカラムで作るほうが安心です。

比較には表とリッチカラムのどちらを使うべきですか？

料金やスペックなど数字を細かく比べるなら表、画像と説明で雰囲気を伝えたいならリッチカラムが向いています。目的に合わせて使い分けましょう。

まとめ

SWELLのリッチカラムは、パソコン・タブレット・スマホで列数を変えられる横並び用のブロックです。WordPress標準の「カラム」より細かく調整できるので、どの端末でも崩れにくいレイアウトを作れます。

スマホ表示で失敗した筆者のおすすめは、パソコン3列・スマホ1列から始めて、文章量と画像サイズをそろえることです。まずは商品比較やおすすめ記事の紹介で、リッチカラムを試してみてください。

あわせて読みたい

おすすめWordPressテーマ3選｜失敗しない選び方を解説 本記事はアフィリエイト広告を含みます。 「WordPressテーマって種類が多すぎて、どれを選べばいいかわからない」と迷っていませんか。テーマ選びはブログの見た目・速...

おすすめ記事