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

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

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

まだ、このシリーズにおける最初の記事を読んでいない方は、先にそちらをご覧ください。

\  最初の記事はこちら /

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

SWELLのヘッダーにおけるカスタマイズが知りたいだけの方でも参考になると思うので、ぜひ最後まで読んでいただければと思います。

\  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をコピーしました!

おすすめのWordPressテーマ

楽しく、簡単に、おしゃれなブログを作れるWordPressテーマ
コーポレートサイト制作にも使える神テーマです

プロモーション

目次