swellでボタンを横並びする方法！2カラム？リッチカラム？左右の余白についても
WordPress専門特化、生成AI機能が買えるECサイト『ちょい足しAI』チームです！
「SWELLでボタンを横並びにするにはどうしたら良いの？」
このような質問を寄せられることが多いので、
Swellでボタンを以下のように横並びで表示する方法をまとめてみました！
結論から言うと、カラムブロックを使ってボタンの横並びを実現します。
すっごい簡単なので以下の説明を参考にしていただけますと幸いです。
- スマホでも横並びにする方法
- 左右の余白を調整する方法
もご紹介しています。
【知ってれば簡単なだけ】swellでボタンを横並びに設定する方法！
3STEPでswellでボタンを横並びにできます。
1.カラムブロックを選ぶ！ボタンを横並びにするために必須
＋ > カラム を選択します。
2.50:50(2カラム)を選択する！これでボタンが横並びになる
50:50と書いてあるカラムを選んでください。
3.swellボタンを両方に入れて横並びにする
あとはそれぞれにswellボタンを入れるだけです。
2つのカラムの枠の上にPCカーソルを被せるとボタンなどを入れられます。
スマホでも横並びするためにSWELLで設定すること
ボックス全体を選んで、右側のメニューパネル "モバイルでは縦に並べる"をOFFにすればOKです。
"モバイルでは縦に並べる"がなぜか、表示されない問題
「私のswellだと出てこない」そんなお声もありました。
以下の画像の左上(一番端)のボタン？を3回ほど連続でタップするとカラムブロック全体が選択されて、
"モバイルでは縦に並べる"を選べる画像が出てきます。
左右の余白を調整するには？SWELLで追加CSSを設定
見え方的にボタンの左右の余白を調整したい人もいますよね。
その場合は、追加CSSをおすすめいたします。
<style>
wp-block-columns.is-not-stacked-on-mobile {
max-width: 80%;/*この%をいじる*/
margin: 20px auto; /*ここはいじらない*/
}
/***以下はスマホでの表示デザイン***/
@media (max-width: 768px) {
wp-block-columns.is-not-stacked-on-mobile {
max-width: 100% !important;/*ここはいじらない*/
margin: 20px auto; /*ここはいじらない*/
}
}
</style>
- %を増えせば幅が大きくなります
- %を狭めると幅が小さくなります。
カスタムhtmlを実際に入れてみたときの画像
ボタンの下にカスタムhtmlで追加CSSを入れてください。(上記を完全コピペ)
※%は好きなように調整ください。
【注意点】SWELLのボタンを横並びにする際にリッチカラムは不必要
カラムなの？リッチカラムなの？
どう違うの？
SWELLでボタンを横並びにするなら、リッチカラムは不要です。
それぞれの違いは、リッチかどうかなだけです。
リッチカラムだと横スクロール機能があったりしますね。
つまり、
- カラム = 通常
- リッチカラム = 通常＋独自の機能(横スクロールなど)
ですね。
- 孫悟空 = カラム
- スーパーサイヤ人 = リッチカラム
です。笑
進化系がリッチカラムみたいな感じです。
【マーケ視点】ボタンを横並びにするとCVは上がるのか。
以下はWordPress専門特化、生成AI機能が買えるECサイト『ちょい足しAI』チームの個人の感想です。
ボタンの横並びにすると、公式サイトはこちら 詳細はこちら と分けられます。
そのため、自分の理解度によって次の行動を選べるのでCVは結果的に上がると思います。
1番の効果は、多少の手間がかかるから大きなオリジナリティになる
SWELLでボタンを横並びにするには、多少の設定が必須です。
そのため、ただサイト運営をする人や企業は絶対に実施しません。
つまり、多少の手間 = めんどくさい = やれば差別化になります。
Discussion