【Webサイト作成サービス】Squarespaceでのナビゲーションメニューとアイキャッチの作り方

2021年10月21日- Squarespace,③ おうち時間Squarespace

squarespaceの画像

Squarespaceの始め方は分かったけど次はいったい何をすればいいの?

この記事ではSquarespaceを使って下記について解説していきます。

この記事の内容

① Squarespaceでのナビゲーションメニューとアイキャッチの作り方
② まとめ

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

Squarespaceでのナビゲーションメニューとアイキャッチの作り方

それではさっそく作っていきましょう!

Squarespaceへログインして、編集画面へいく

(1)まずはSquarespaceへアクセスします。

(2)登録したアカウント、もしくはメールアドレス・パスワードでログインします。

(3)「WEBSITE」をクリックします。

(4)「Pages」をクリックします。このほとんどの編集をこの「Pages」で行うことになります。

ナビゲーションメニューを作る

(1)この「MAIN NAVIGATION」にあるものがナビゲーションメニューになっていきます。

メニューにいらないものは「NOT LINKED」にドラッグ&ドロップで移動させるとメニューからも消えます。
必要なものは「MAIN NAVIGAITION」に移動させると、メニューに追加されます。

ヘッダーのデザインを決める、サイトタイトルを変更する

(1)左上にある「EDIT」をクリックするか、編集したいところ、ここではヘッダーをダブルクリックして、編集モードにする。

(2)ヘッダー部分をクリックすると、メニューが出てくるので、「Header Layout」をクリックします。

(3)いくつかヘッダーデザインがあるので、好みのデザインを選びます。

(4)「Site Title & Logo」をクリックします。

(5)「SITE TITLE」欄に好きなサイトタイトルを入力する。「BACK」をクリックして戻ります。

(6)「Elements」をクリックするとメニューが出てくるので、ヘッダーの右端に表示させるものを選びます。
ここではカートはOFFにし、Social Linksをオンにしました。

アイキャッチを作る

(1)不要なブロックは、クリックしてゴミ箱マークをクリックすると削除できます。

「本当に削除しますか?」と聞かれるので、「REMOVE」をクリックします。

(2)アイキャッチのテキストをクリックして、好きな言葉に変えます。

(3)アイキャッチのあたりをクリックすると、下記のメニューが出てくるのでEDITマークをクリックします。

(4)「Background」をクリックします。

(5)「REPLACE」をクリックして、「SELECT FROM LIBRAR」をクリックします。既に画像をお持ちの場合は「UPLOAD FILE」からアップロードできます。

(6)「Free Images」をクリックして好みの画像を検索していきます。「My Library」は前に使ったことのある画像が表示されます。「Premium Images」は有料の画像です。

(7)ピンクっぽい画像にしたかったので、「pink」で検索してみました。

(8)好みの画像が決まったら、その画像をクリックして、「ADD IMAGE」をクリックします。

(9)ナビゲーションメニューとアイキャッチの編集が終わったので、左上にある「DONE」から「SAVE」をクリックして保存します。

メニュー名を変える

(1)変えたいメニューの歯車マークをクリックします。

(2)「PAGE TITLE」「NAVIGATION TITLE」「URL SLUG」を変えて、左上の「SAVE」をクリックして保存します。

モバイル画面をチェックする

(1)ここまででヘッダーとアイキャッチの編集が終わったので、モバイル画面での表示に問題がないか確認します。右上のスマホマークをクリックするとスマホ画面での表示に切り替わります。

(2)スマホ画面ではナビゲーションメニューがアコーディオンメニューになるので(テンプレートによりますが)、クリックするとアコーディオンメニューの動きや表示が確認できます。

これでヘッダーとアイキャッチができました!
画像もおしゃれなものが多くて、いっきにおしゃれ感が増します。

まとめ

このようにサクッとテンプレートの文字を変えたり、画像を変えたりするだけでそれなりのWebサイトができてしまいます。
とは言え、最初は慣れるまでに少し時間はかかるかもしれません。
が、慣れてしまうと、難しいことを考えなくてもいろいろ試しながらデザインを決めていけて、
しかもそのままWebサイトとして反映してくれるので楽しいですよ♪

モバイル用のデザインも自動的に作られるので便利ですね。

これからもSquarespaceの使い方についてご紹介していきたいと思います。
どなたかの参考になったら嬉しいです♪