こんにちは、ゆうじ(@yuji_sgs_prog)です。
前回に引き続き、SWELLでのコーポレートサイト(カフェ風デモサイト)の作り方を解説していきます。
まだ、このシリーズにおける最初の記事を見てない方は、先にご覧ください。
\ 最初の記事はこちら /

本記事では、ヘッダーを作成していきます。
SWELLのヘッダーにおけるカスタマイズが知りたいだけの方でも、参考になると思うので、ぜひ最後まで見ていってください。
- 22歳国立理系大学生(機械学習をテーマに研究)
- Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
- SWELL利用歴2年(ブログ運営、コーポレートサイト制作)
- 現在は法人のWebマーケティングの仕事を受けています
\ SWELL公式サイトはこちら /
ヘッダーのカスタマイズ方法

ヘッダーのカスタマイズ方法を3ステップで解説していきます。
前回作成した各セクションごとに、名前みたいなものをつけていきます。
名前をつけたら、その名前ごとの内部リンクを設置していきます。
ヘッダーのデザインを整えて完了です。
順番に解説していきます。
各セクションのid指定
前回作成したフルワイドセクションに「HTMLアンカー」の欄で名前をつけていきます。

これを各セクションごとにやっていきましょう。
デモサイトでは、
- コラム → column
- カフェサンプルについて → about
- メニュー → menu
- ギャラリー → gallery
- ニュース → news
- アクセス → access
- お問い合わせ → contact
という風に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に記述して完了です(*`・ω・)ゞ
それでは今回は以上とします。最後まで読んでいただきありがとうございました。

残すはフッター・プラグイン編のみです!
\ 次回の記事はこちら /

