SWELLのリンクリストを横並びにすると左揃えになる問題の解決方法

SWELLでフッターメニューを作るとき、「リンクリスト」ブロックを使って横並びにすると…なぜか左揃えになりますよね。

「いや、中央に寄せたいんだけど…」って思いながら、いろいろ触ってみたけど、うまくいかない。そんな経験ある方、多いと思います。

SWELLって基本は縦並びのフッターメニューが多いんですが、コーポレートサイトなんかは横並びにすると一気にスッキリして、見た目もいい感じになりますよね。だからこそ、「横並び＋中央揃え」にしたい人は結構多いはずです。

ということで今回は、CSSを使わずにSWELLだけで中央揃えを再現する方法を紹介します。

最後に、サクッと解決できるCSSも載せておくので、状況に合わせて使ってみてください。

リンクリストを横並びにすると左揃えになる

リンクリストを横並びに設定すると、きれいに並ぶのはいいんですが、なぜか左揃えのままになります。

これ、実際にやってみると「なんか惜しいな…」ってなりますよね。

せっかく横並びにしたのに、左に寄ってるだけでちょっと野暮ったく見えるというか。

本当は中央に寄せて、バランスよくスッキリ見せたいところなんですが、SWELLのブロック設定だけではここを調整することができません。

いろいろ設定を触ってみても変わらず、「あれ？これ無理じゃない？」ってなるポイントだったりします。

CSSなしで中央寄せを再現する方法

「じゃあどうするの？」という話なんですが、実はCSSを使わなくても、それっぽく中央揃えを再現することはできます。

少し工夫は必要ですが、SWELLのブロックだけで対応できるので、ノーコードでやりたい方にはおすすめの方法です。

箇条書きでメニューを作る

まずは、フルワイドを作ってその中に「箇条書き」でメニューを作ります。

それぞれのテキストにリンクを設定していけば、フッターメニューとして使える形になります。

見た目はシンプルですが、自由度が高いのがこの方法のポイントです。

リンクカラーを調整する

リンクを設定すると、文字色がリンクカラーに変わってしまいます。

フッターのデザインと合わせるために、テキストカラーを調整しておきましょう。

テキストカラーの変更は「SWELL装飾」→「テキスト色」で変更することができます。

ここを整えておくことで、あとで横並びにしたときも違和感なく仕上がります。

横並び設定で中央寄せにする

最後に、作成した箇条書きをすべて選択して「横並び」を設定します。

すると要素が横並びになりますので、次は「項目の揃え位置を変更」→「中央揃え」にすることで、フッターメニューっぽい見た目が完成します。

リンクリストではできなかった「中央揃えの横並びメニュー」を、ノーコードで再現することができます。

補足ですが、右サイドバーに表示されている「レイアウト」の項目内の「複数行に折り返す」はONにしておきましょう。

スマホ表示でダサくなる問題

ここまでで、CSSなしでも中央揃えのフッターメニューは作れるんですが、実はひとつ問題があります。

それが、スマホで見たときです。

PCではいい感じに見えていた中央揃えも、スマホになるとちょっと違和感が出てきます。というのも、横幅が狭い中で中央に寄っていると、視線の流れが分断されて見づらく感じることがあるんですよね。

特にメニュー数が多い場合、折り返されたときに配置がバラバラに見えてしまい、「なんかダサい…」という状態になりがちです。

このあたりはデザインというより、どちらかというとUX（使いやすさ）の問題で、スマホでは左揃えの方が自然に見えるケースが多いです。

つまり、PCでは中央揃えがキレイ、スマホでは左揃えの方が見やすいという状態になりやすいんですね。

PCとスマホで表示を分ける方法

スマホで見たときの違和感が気になる場合は、PC用とスマホ用でフッターメニューを分けてしまうのが一番わかりやすいです。

少し手間はかかりますが、それぞれの画面サイズに合った見せ方ができるので、見た目もかなり整いやすくなります。

フルワイドを複製する

まずは、フッターメニューを入れているフルワイドブロックを複製します。

まだフルワイドの中に入れていない場合は、先にフルワイドの中へ入れておくのがおすすめです。

このあと表示条件を分けるので、フルワイドごと複製しておいた方が管理しやすくなります。

ひとつはPC用、もうひとつはスマホ用として使います。

ちなみに、フルワイドの上下パディングはPC・SPともに「20」に設定しています。

PCのみ表示・スマホのみ表示の設定

PC表示の設定

複製した上側のフルワイドは、PCサイズでのみ表示する設定にします。

やり方としては、「デバイスコントロール」→「PCサイズでのみ表示する」でできます。

こちらには、中央揃えにした横並びのメニューを入れておきます。

スマホ表示の設定

次に、複製したもうひとつのフルワイドは、スマホサイズのみ表示する設定にします。

やり方はさっきと同じように、「デバイスコントロール」→「スマホサイズでのみ表示する」にします。

そして、横並びブロックを選択した状態で、「項目の揃え位置を変更」→「左揃え」にすることで、スマホでも見やすくなります。

この方法なら、PCではスッキリした中央揃え、スマホでは自然な左揃えという形で使い分けることができます。

ここまでするなら複数行に折り返すはOFFでもいいかもですが、ここら辺はお好みで！

注意点

わざわざフルワイドに入れる必要があるのか、という疑問に対してですが２つの理由があります。

１つは、パディングが少しはないと窮屈に見えること。

フルワイドでは上下パディングを設定できるので、デザイン的に見栄えがよくなります。

2つ目は、フルワイドに入れないと配置設定がうまくいかないこと。

こちらはSWELLのアップデートで改善されるかもしれませんが、メニューを横並びにした状態で左揃えにする反映されなかったんですよね。

そのため、切り替えるときはメニュー単体ではなく、フルワイドごと複製して表示条件を分ける方が安定しやすいです。

少し遠回りに見えますが、結果的にはこのやり方の方がきれいに仕上がります。

CSSを使えば一発で解決できる

ここまで、CSSを使わずに中央揃えを再現する方法を紹介してきましたが、正直なところ…

CSSを使えば一発で解決します。

ここまでの手間はなんだったんだ、と思うくらいシンプルです。

以下のコードを追加するだけで、リンクリストを横並びにしたときでも、「PC・タブレットでは中央揃え、スマホでは左揃えのまま」にすることができます。

@media (min-width: 768px) {
  .swell-block-linkList.-flex {
    justify-content: center !important;
    gap: 24px;
  }
}

これだけでOKです。

挿入する場所は「外観」→「カスタマイズ」→「追加CSS」の箇所でOKです。

反映されればリンクリストのまま、デザインも崩さず、サクッと中央揃えが実現できます。

とはいえ、「できるだけノーコードでやりたい」という方もいると思うので、今回紹介した方法も状況に応じて使い分けてみてください。

結論：ノーコードで頑張るか、CSSで一瞬で終わらせるか

今回紹介したように、SWELLだけでもフッターメニューを中央揃えっぽく見せることはできます。

実際、CSSなしで工夫しながら再現していくのも、やり方としては十分アリです。

「できるだけコードを書かずにサイトを作りたい」という方にとっては、その考え方の方がしっくりくるはずです。

ただ、今回のようにCSSを少し追加するだけで一瞬で解決するケースがあるのも事実です。

なので大事なのは、「絶対にCSSを使わない」と決めることではなく、どこまでを自力でやるか、どこからを少しだけコードに頼るかをうまく見極めることだと思っています。

ノーコードでもできる。
でも、CSSを使えばもっと早い。
そんなふうに、状況に合わせてちょうどいい方法を選べばOKです。

KATADORIでも、基本は「コードを書かなくても作れる」ことを大切にしています。

そのうえで、今回のようにほんの少しCSSを使うともっと整う場面もあるので、必要なときだけ取り入れていくくらいの感覚がちょうどいいと思います。