【SWELL】ヘッダーメニューの一部をボタン化する方法

WEB制作しているHISASHIです。

今回は、コーポーレートサイトでもよく使われている「ヘッダーの一部をボタン化する」というカスタマイズをご紹介したいと思います。

どのようなものかは以下をご覧ください。

デフォルト状態

ボタンカスタマイズ化

なお今回のカスタマイズ方法では、どの位置のメニューであっても簡単に変更することができます。

ボタン化する位置を変更

もちろん、色をメインカラーや任意の色に変更したり、大きさを自由に変更することも可能です。

また今回のカスタマイズは、すでに作られているヘッダーメニューをそのまま使うことができるため、別途何か設定する必要もありません。

初心者でも簡単に実装できます。

環境

バージョン情報

SWELL: 2.8.1（2023.11.14日時点最新）

利用確認できているバージョンです。
ヘッダーに大きな構造変更がない限りは、アップデートによる影響はありません。

カスタマイズ方法