STUDIOでヘッダーを作成する手順｜固定する方法も解説！

今回は、STUDIOで固定ヘッダーを作る方法について解説します。

完成イメージは、下記の通りです。

STUDIOを初めて触るという方でも、問題なく作れます。ぜひこの機会に、固定ヘッダーを作ってみましょう。

STUDIOのヘッダーの作り方とは

ヘッダーをイチから自作するのは面倒です。なので今回は、ヘッダーのテンプレを利用してヘッダーを作成していきます。

それぞれ具体的に説明します。

①：ヘッダーのテンプレを配置する

プロジェクトを新規で立ち上げると、下記のような白紙状態から始まります。

ヘッダーを1から自作するのは面倒なので、テンプレを選択します。

まず、左下のメニュー欄にある「ページ」マークをクリックします。

「追加」→「セクション」をクリックします。するとナビゲーションが2種類出てきたはずです。

好きなナビゲーションを選択して、キャンパス上にドラッグ&ドロップしましょう。

ドラッグ&ドロップができれば、下記のようになります。

②：「ロゴ・サイト名」の部分を変更する

次は、「ロゴ・サイト名」の部分をカスタマイズしていきます。

まずは、左側のメニュー欄にある「画像」マークをクリックします。

初期設定だと画像サイズが大きく、ヘッダー内に埋め込むことができません。なので画像の横幅・縦幅を調整していきます。

画像を選択して、上メニューの横幅・縦幅の値を変更しましょう。

画像のサイズ変更ができたら、「ロゴ・サイト名」の右横に画像を配置します。

「ロゴ・サイト名」は不要なので削除します。すると下記のように、画像が左側にスライドされるはずです。

次に、画像を変更していきます。画像部分をダブルクリックして、「アップロード」を選択します。

サイトロゴに設定したい画像をアップロードしたら、ロゴ画像を選択しましょう。

すると、ロゴ画像が反映されるはずです。

ロゴ画像はクリックされると、基本的にトップページへ遷移されるようになっています。なのでリンク設定だけ行っておきましょう。

ロゴ画像を選択しながら、画面右側にある左矢印ボタンをクリックします。

リンク部分を「HOME」に設定します。これでロゴ画像をクリックすれば、トップページに遷移する設定は完了です。

③：メニューをカスタマイズする

次に、メニューをカスタマイズしていきます。

まずはテキストを全て変更していきます。今回は「サービス内容」・「料金プラン」・「会社概要」・「お問い合わせ」に変更します。

次に、メニューがクリックされたら別ページへ飛ぶように設定していきます。

画面左下の「ページ」マークをクリックします。

「追加」→「ページ」をクリックして新規ページを作成します。

「サービス内容」・「料金プラン」・「会社概要」・「お問い合わせ」の各ページを作成して、かつパスもそれぞれ変更しておきましょう。

・サービス内容 → 「/service」
・料金プラン → 「/plan」
・会社概要 → 「/company」
・お問い合わせ → 「/contact」

新規ページを作成できたら、「HOME」に戻ります。そして各メニューと各ページを紐づけていきます。

「サービス内容」を選択しながら、右側にある左矢印ボタンをクリックします。

リンク部分を「サービス内容」に変更します。これで「サービス内容」がクリックされたら、「/service」の別ページへ飛ぶように設定できました。

④：スマホ・タブレット用メニューを作成する

これでパソコン用のヘッダーは完成しました。問題なのは「スマホ」や「タブレット」で閲覧した時のヘッダーです。

今回はヘッダーをテンプレで作成しているので、タブレットやスマホになった時に自動的にハンバーガーアイコンが適用されるようになっています。

ですが初期設定だとハンバーガーアイコンをクリックしても、何もアクションが起こりません。

ハンバーガーアイコンの設定に関しては、下記の動画で詳しく説明されていますので、必ずセットで設定しておきましょう。

STUDIOでヘッダーを固定する方法

初期設定だと、下記のようにヘッダーが固定されてない仕様になっています。

なので次は、下記のような固定されているヘッダーを作ります。

◼︎固定されたヘッダーを作成する手順

①ヘッダーを選択します。

②左上のメニューにある「配置」部分にカーソルを持っていき、「固定」をクリックします。

③ヘッダーが埋もれてしまった場合は、「ヘッダーに背景色」を付けたら埋もれなくなるはずです。

これでヘッダーの固定は完了です！

ヘッダーを固定すると、いくつかのトラブルが発生するケースがあります。なので「STUDIOでヘッダーを固定する時の注意点2選」も必ず目を通しておきましょう。

STUDIOでヘッダーを固定する時の注意点2選

最後に、STUDIOでヘッダーを固定する時の注意点2選について紹介します。

それぞれ具体的に説明します。

「重ね順」は大きめに設定する

STUDIOではコンテンツの重なり順を設定できます。

つまり、ヘッダーが常に埋もれないようにするには「重ね順 ＝ 5」に設定しておかなければなりません。

例えば、他のコンテンツの重ね順が2~3だった場合、初期設定の「重ね順 ＝ 0」のヘッダーだと、コンテンツ同士が重なり合った時にヘッダーが隠れてしまいます。

なので、基本的にヘッダーは「重ね順 ＝ 5」で設定しておくようにしましょう。

メインビジュアルはヘッダーの高さ分だけ下に移動させる

ヘッダーを固定すると、メインビジュアルがヘッダーの下に潜り込む形になります。

メインビジュアルが一部隠れてしまうと、意図したデザインにならない可能性が高いです。

なのでヘッダーの高さ分だけ、メインビジュアルの上方に余白を空けるのがおすすめです。

下記の例だと、ヘッダーの高さは80pxとなっています。

なので、メインビジュアルには「マージン上部：80px」を設定します。これでヘッダーの高さ分だけ、メインビジュアルを下にスライドすることができました。

STUDIOのサイト制作は「Terace」にお任せ！