『SWELL』PCで横並びの画像、スマホだと縦並びになる？

はじめはそういう仕様だと思い諦めていましたが、

実はPCで横並びにした画像を、スマホでも同じように表示させる設定があったので、

今回はその方法をご紹介します。

『SWELL』PCで横並びの画像、スマホだと縦並びになる？

通常の「カラム」ブロックと「リッチカラム」ブロックでは、設定方法が異なります。

当記事では、いろいろと融通がきく「リッチカラム」の使用をおすすめしています。

まず、ゴールとなる設定画面は以下の画像のとおり。

画面右の「ブロック設定」→「設定」内の「列数」をPC・タブレット・スマホともに同じ数にすることで、どの端末で見ても同じ画像の並び順になります。

デフォルトだスマホの数値が「1」となっている場合が多く、それが原因でPCとスマホの表示が崩れるという現象が起きていました。

「列数」の設定画面を開くには少しコツが必要です。

それは、「1つの画像」ではなく「リッチカラムブロック全体」を選択する必要があること。

以下のようにメニューバーが画像の上にある場合には、メニューバーの一番左のボタンを何度か押してみましょう。

すると、メニューバーがブロックの左上に表示されるようになります。

この状態でメニューバーの一番左のボタンを押すと「列数」を指定できる設定画面が開きます。

さいごに

「列数」をPC・タブレット・スマホともに同じ数にしたことで、無事にスマホでもキレイな横並びになりました。

「横並び」と「列数」をうまく使うことで、自分のイメージ通りのサイトデザインをすることができます。

ただし横並びの列数を増やしすぎると、スマホだと画像がとても小さく表示されてしまうので注意が必要です。

ちなみに今回紹介した設定の中には、「横スクロールで表示する」という便利機能もあるので、たくさん横に並べたいときにはぜひ活用してみてください！