Squarespace

【Squarespace】ヘッダーのデザインを変える方法(ヘッダー固定も簡単にできます)

squarespaceの画像
昔のomochi

Squarespaceってテンプレートを使うみたいだけど、ヘッダーのデザインは変えれないの?

こんな疑問にお答えしていきます。

この記事の内容

① ヘッダーのデザインを変える方法
② ヘッダーを固定する方法

こういった内容を、現在職場でSquarespaceを使ってWebサイトの作成・運用に携わっているomochiが解説していきます。

ヘッダーのデザインを変える方法

それではさっそく、ヘッダーのデザインを変えていきましょう

(1)「EDIT」をクリックして編集モードにします

(2)「EDIT SITE HEADER」をクリック

(3)出てきたメニューの「Colors」をクリック

(4)デフォルトで「Transparent(透明)」がオンになっているので、クリックしてオフにします

(5)複数のデザインのヘッダーが表示されるので、好きなデザインのヘッダーを選びます

(6)「BACK」をクリックすると先程のメニューに戻ります

(7)デザインが決まったら、「DONE」の横の v をクリックして、「Save」をクリック

デザインが反映されてます!

動画で実際の動きを確認できます⬇︎

ヘッダーを固定する方法

メニューを常に表示させるために、ヘッダーを固定させたい時も簡単に設定できます!

(1)「EDIT」をクリックして編集モードにします

(2)「EDIT SITE HEADER」をクリック

(3)「Fixed Position」をクリック

(4)「Basic」と「Scroll Back」から好みのものを選びます。
   「Basic」:常に固定されたヘッダー
   「Scroll Back」:スクロールで上に上がる動作をした時だけ、ヘッダーを表示

(5)デザインが決まったら、「DONE」の横の v をクリックして、「Save」をクリック

これでヘッダーの固定が完了です!

動画で実際の動きを確認できます⬇︎

まとめ

Squarespaceではヘッダーのデザインも簡単に選べるように複数の色の種類が用意されていて、選ぶだけで自分好みのヘッダーを作ることができます。

ヘッダーの固定もコード不要で設定できるのでとても簡単です!

いろいろ試してみてしっくりくるデザインを探していきましょう♪