Studioでヘッダーを作成する手順｜固定する方法も解説！
「Studioの〇〇の使い方を知りたい」などご要望がありましたら、
いいねを押した後にメッセージ欄を設けていますので、お気軽にご連絡ください！
送信中です
今回は、Studioで固定ヘッダーを作る方法について解説します。
完成イメージは、下記の通りです。
Studioを初めて触るという方でも、問題なく作れます。ぜひこの機会に、固定ヘッダーを作ってみましょう。
「Studioの使い方がまだイマイチわかっていない、、、」という方は、以下のマニュアルも参考にしてみてください。
Service
【最安18万円〜】
集客に強い・SEO特化のホームページ制作サービス
「デザインは良いのに問い合わせが来ない」それはSEO対策がしっかりできていないことが原因かもしれません。 月間10万PVメディアを運営する現役SEOコンサルが設計するから、 GoogleにもAI（ChatGPT等）にも選ばれるホームページが作れます。
- AI×人間の分業でSEO対策が圧倒的に低価格
- 公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（テンプレート不使用）
- Studio制作で自社更新もカンタン
- ホームページ制作実績、累計50サイト以上
今なら制作費30,000円OFF（毎月3組限定）。ご相談・お見積りは無料です。
Studioのヘッダーの作り方とは
ヘッダーをイチから自作するのは面倒です。なので今回は、ヘッダーのテンプレを利用してヘッダーを作成していきます。
- ヘッダーのテンプレを配置する
- 「ロゴ・サイト名」の部分を変更する
- メニューをカスタマイズする
- スマホ・タブレット用メニューを作成する
それぞれ具体的に説明します。
①：ヘッダーのテンプレを配置する
プロジェクトを新規で立ち上げると、下記のような白紙状態から始まります。
ヘッダーを1から自作するのは面倒なので、テンプレを選択します。
まず、ナビゲーションにある「追加」アイコンをクリックします。
「セクション」をクリックします。するとヘッダーが出てきたはずです。
好きなナビゲーションを選択して、キャンパス上にドラッグ&ドロップしましょう。
ドラッグ&ドロップができれば、下記のようになります。
Kajiヘッダーの50%が完成！あとは文字の変更などです！
②：「ロゴ・サイト名」の部分を変更する
次は、「ロゴ・サイト名」の部分をカスタマイズしていきます。
Kaji今回はロゴ画像に変更していきますが、ロゴ画像がまだないという方は一旦文字だけでも変更しておきましょう！「ロゴ・サイト名」→「〇〇株式会社」のように！
まずは画像を選択後、右パネルのアイコンをクリックします。
画像を選択して、任意の画像に変更しましょう。
サイトロゴに設定したい画像をアップロードしたら、ロゴ画像を選択しましょう。
すると、ロゴ画像が反映されるはずです。
ロゴ画像はクリックされると、基本的にトップページへ遷移されるようになっています。なのでリンク設定だけ行っておきましょう。
ロゴ画像を選択しながら、右パネルアイコンをクリックします。
リンク部分を「HOME」に設定します。これでロゴ画像をクリックすれば、トップページに遷移する設定は完了です。
③：メニューをカスタマイズする
次に、メニューをカスタマイズしていきます。
まずはテキストを全て変更していきます。今回は「サービス内容」・「料金プラン」・「会社概要」・「お問い合わせ」に変更します。
次に、メニューがクリックされたら別ページへ飛ぶように設定していきます。
ナビゲーションの「ページ」アイコンをクリックします。
「追加」→「ページ」をクリックして新規ページを作成します。
「サービス内容」・「料金プラン」・「会社概要」・「お問い合わせ」の各ページを作成して、かつパスもそれぞれ変更しておきましょう。
・サービス内容 → 「/service」
・料金プラン → 「/plan」
・会社概要 → 「/company」
・お問い合わせ → 「/contact」
新規ページを作成できたら、「HOME」に戻ります。そして各メニューと各ページを紐づけていきます。
「メニュー」を選択しながら、右パネルのアイコンをクリックします。
リンク部分をそれぞれのページのリンクに変更します。これで「メニュー」がクリックされたら、「/〇〇」の別ページへ飛ぶように設定できました。
続いて「お問い合わせ」のリンクを設定していきます。
「お問い合わせ」を選択します。
右上のリンクのアイコンをクリックし、「お問い合わせ」を選択し、「/contact」の別ページへ飛ぶように設定できました。
④：スマホ・タブレット用メニューを作成する
これでパソコン用のヘッダーは完成しました。問題なのは「スマホ」や「タブレット」で閲覧した時のヘッダーです。
今回はヘッダーをテンプレで作成しているので、タブレットやスマホになった時に自動的にハンバーガーアイコンが適用されるようになっています。
ですが初期設定だとハンバーガーアイコンをクリックしても、何もアクションが起こりません。
ハンバーガーアイコンの設定に関しては、下記の動画で詳しく説明されていますので、必ずセットで設定しておきましょう。
Studioでヘッダーを固定する方法
初期設定だと、下記のようにヘッダーが固定されてない仕様になっています。
なので次は、下記のような固定されているヘッダーを作ります。
◼︎固定されたヘッダーを作成する手順
①ヘッダーを選択し、右パネルを開きます。
②右パネルにあるポジションの「位置」を選択し、「固定」をクリックします。
これでヘッダーの固定は完了です！
ヘッダーを固定すると、いくつかのトラブルが発生するケースがあります。なので「Studioでヘッダーを固定する時の注意点2選」も必ず目を通しておきましょう。
Studioでヘッダーを固定する時の注意点2選
最後に、Studioでヘッダーを固定する時の注意点2選について紹介します。
- 「重ね順」は大きめに設定する
- メインビジュアルはヘッダーの高さ分だけ下に移動させる
それぞれ具体的に説明します。
「重ね順」は大きめに設定する
Studioではコンテンツの重なり順を設定できます。
Kaji「マイナス」が下層になり、「プラス」が上層になります！
つまり、ヘッダーが常に埋もれないようにするには「重ね順 ＝ 5（以上）」に設定しておくと安心です！
例えば、他のコンテンツの重ね順が2~3だった場合、初期設定の「重ね順 ＝ 0」のヘッダーだと、コンテンツ同士が重なり合った時にヘッダーが隠れてしまいます。
なので、基本的にヘッダーは「重ね順 ＝ 5（以上）」で設定しておくようにしましょう。
メインビジュアルはヘッダーの高さ分だけ下に移動させる
ヘッダーを固定すると、メインビジュアルがヘッダーの下に潜り込む形になります。
メインビジュアルが一部隠れてしまうと、意図したデザインにならない可能性が高いです。
なのでヘッダーの高さ分だけ、メインビジュアルの上方に余白を空けるのがおすすめです。
下記の例だと、ヘッダーの高さは80pxとなっています。
なので、メインビジュアルには「マージン上部：80px」を設定します。これでヘッダーの高さ分だけ、メインビジュアルを下にスライドすることができました。
Studioのサイト制作は「Terace」にお任せ！
当メディアを運営する私達は、Studioの制作代行サービスを運営しています。
サービスの強みを一言で表すなら、「集客に強いホームページが作れる」ということです。
- AI×人間の分業でSEO対策が圧倒的に安い
- SEO専門家による細部まで徹底したSEO対策（基本〜本格）
- はじめてのSEOガイド・公開後3ヶ月のSEO改善レポート付き
- 完全オリジナルデザイン（Webデザイナー専属）
- Studio製だから自社で簡単に更新できる
- ホームページ制作実績、累計50サイト以上
最安18万円〜とお手軽な価格ですが、徹底的にSEO対策されたホームページが作れます。なぜ安く作れるのか、その理由はシンプルで「人間が得意なことは人間、AIが得意なこと（リサーチなど）はAI」が担当しているためです。
オリジナルデザイン、かつ本格的に集客できるホームページがほしい方は、ぜひお気軽にご相談ください。
個人事業主や中小企業からよく選ばれています。サービス利用者の声を聞きたい方は、ぜひ以下のインタビュー記事をご覧ください。
今だけ、毎月3組まで制作費用が3万円割引になるキャンペーンを行っています。
先着順で締め切るので、気になる方はぜひお早めにお問い合わせください！
送信中です
※コメントは最大500文字、5回まで送信できます
ebook
【無料のお役立ち資料】
初ホームページ制作のよくある質問集
ホームページ制作に関するよくある質問14選にすべて答えています。
「自作するべきなのか」か「Web制作会社に任せるべきか」など、これまでホームページ制作をやっていく中で1番よく受けた質問を厳選しています。
無料でダウンロードできるので、これからホームページを作成する予定の方はぜひ参考にしてみてください！
※コメントは最大500文字、5回まで送信できます