SWELLでコーポレートサイトを作ってみた！【ヘッダー編】

こんにちは、ゆうじ（＠yuji_sgs_prog）です。

前回に引き続き、SWELLでのコーポレートサイト（カフェ風デモサイト）の作り方を解説していきます。

まだ、このシリーズにおける最初の記事を見てない方は、先にご覧ください。

＼ 　最初の記事はこちら　／

あわせて読みたい

SWELLでコーポレートサイトを作ってみた！【デザインカンプあり】 本記事では配布するデザインカンプを基に、SWELLでのコーポレートサイトの作り方について解説しています。SWELLのコーポレートサイト制作は素晴らしいので、興味ある方は是非ご覧ください。

本記事では、ヘッダーを作成していきます。

SWELLのヘッダーにおけるカスタマイズが知りたいだけの方でも、参考になると思うので、ぜひ最後まで見ていってください。

＼ 　SWELL公式サイトはこちら　／

ヘッダーのカスタマイズ方法

ヘッダーのカスタマイズ方法を３ステップで解説していきます。

順番に解説していきます。

各セクションのid指定

前回作成したフルワイドセクションに「HTMLアンカー」の欄で名前をつけていきます。

これを各セクションごとにやっていきましょう。

デモサイトでは、

という風にid指定しています。

グローバルメニューの作成

グローバルメニューを作成していきます。

ダッシュボードから「外観」→「メニュー」をクリック。

すると、このような画面に移るので、「グローバルメニュー」を作成していきましょう。

「グローバルメニュー」を作成したら、「カスタムリンク」から、各セクションごとの内部リンクを作っていきます。

↓↓このように作っていけばOKです！

次に、右上にある「表示オプション」をクリックして、「説明」にチェックを追加しましょう。

すると「説明」を入力できる項目が追加されるので、各セクションごとの説明を追加。

一通り終わったら、最後に「メニューを保存」をクリックして、トップページに戻ってみましょう。

こんな感じのヘッダーになってたらOKです！

デザインをカスタマイズ

最後にデザインをカスタマイズしていきましょう。

「外観」→「カスタマイズ」をクリック。

「ヘッダー」を選択して、カスタマイズしていきましょう。

各項目の設定を下のようにしていきます。

後は微妙な余白が生まれてくると思うので、追加CSSで調整していきます。

.l-header__inner {
  padding-top: 0px !important;
}

.l-header__logo {
  padding: 0px 0px !important;
}

@media screen and (max-width: 959px) {
  .l-header__logo {
    padding-left: 15px !important;
  }
}

これを追加CSSに記述して完了です(＊｀･ω･)ゞ

それでは今回は以上とします。最後まで読んでいただきありがとうございました。

残すはフッター・プラグイン編のみです！

＼ 　次回の記事はこちら　／

あわせて読みたい

SWELLでコーポレートサイトを作ってみた！【フッター・プラグイン編】 SWELLでコーポレートサイトを作ってみた！のフッター・プラグイン編です。SWELLにおけるフッターのカスタマイズ方法や、プラグインによるアニメーションの追加に関して興味がある方は是非参考にしてください。