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

こんにちは、ゆうじです。

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

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

\  最初の記事はこちら /

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

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

本記事を書いている人
  • 22歳国立理系大学生(機械学習をテーマに研究)
  • Web系のプログラミング言語を勉強→ITベンチャーで長期インターン
  • Twitterのフォロワー数は1500名ほど
  • 現在は法人のWebマーケティングの仕事を受けています

\  SWELL公式サイトはこちら /

目次

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

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

STEP
各セクションのid指定

前回作成した各セクションごとに、名前みたいなものをつけていきます。

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

名前をつけたら、その名前ごとの内部リンクを設置していきます。

STEP
デザインをカスタマイズ

ヘッダーのデザインを整えて完了です。

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

各セクションのid指定

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

SWELLでHTMLアンカーの付与

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

デモサイトでは、

  • コラム → column
  • カフェサンプルについて → about
  • メニュー → menu
  • ギャラリー → gallery
  • ニュース → news
  • アクセス → access
  • お問い合わせ → contact

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

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

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

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

Wordpressの外観→メニュー

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

SWELLでグローバルメニュー作成

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

SWELLのカスタムリンク作成

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

SWELLのカスタムリンク

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

SWELLのメニューにおける表示オプション
SWELLのグローバルメニューにおける説明

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

SWELLのグローバルメニューにおける説明を付与

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

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

デザインをカスタマイズ

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

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

Wordpressの外観→カスタマイズ

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

SWELLのヘッダーをカスタマイズ
  • ヘッダーロゴの設定
  • レイアウト・デザイン設定
  • ヘッダーの追従設定

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

SWELLのヘッダーロゴ設定
SWELLのレイアウト・デザイン設定
SWELLのヘッダー追従設定

後は微妙な余白が生まれてくると思うので、追加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に記述して完了です(*`・ω・)ゞ

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

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

\  次回の記事はこちら /

Thank you for sharing my post !!
  • URLをコピーしました!
目次