Disha Sharmaについて
Disha Sharmaは、デジタルマーケティング担当者からフリーランスのライターです。 彼女はSEO、電子メールとコンテンツのマーケティング、リードの世代について書いています。
Squarespace 素晴らしいの一つです ウェブサイトビルダー。 It's ideal if you're using for your website without wanting to worry about the setup and maintenance hassles of CMSes like次のようなCMSのセットアップとメンテナンスの煩わしさを心配せずに、Webサイトに使用している場合に理想的です。 WordPress.
ゴージャスなウェブサイトをすばやく簡単にまとめることができることに驚くでしょう。 ドメイン名 およびSquarespaceサブスクリプション。
この初心者向けSquarespaceガイドでは、作成するために必要な正確な手順を見ていきます。 最初のウェブサイトを立ち上げる.
次のSquarespaceコンポーネントについて説明します。
これらのコンポーネントを理解すると、プラットフォームを使用してあらゆる種類のWebサイトを構築できるようになります。
Squarespaceを使用してWebサイトを構築する前に、いくつかのことが必要になります。
ウェブサイトの設定手順のXNUMXつとして、ドメイン名をSquarespaceアカウントにリンクします。
So, you will need a domain name.したがって、ドメイン名が必要になります。 If you haven't purchased a domain name yet, purchase one now.ドメイン名をまだ購入していない場合は、今すぐ購入してください。
Squarespaceからも購入できますが、お勧めしません。
ホスティングプロバイダー間のドメイン転送または ウェブサイトビルダー または、ドメインがに登録されている場合、CMSは常に簡単です。 サードパーティのドメインレジストラ.
NameCheap SquarespaceWebサイトのドメイン名を購入するにはチェックしてください。
注:ヘルプが必要な場合 ドメイン名の登録 あなたのウェブサイトのために、これら ドメイン名ジェネレータ 役立つかもしれません。
Knowing your site's navigation structure (or its main menu items) before starting to build it makes the process faster.サイトの構築を開始する前に、サイトのナビゲーション構造(またはそのメインメニュー項目)を知っていると、プロセスが速くなります。 So take a paper and draw how your site menu will look like.だから、紙を取り、あなたのサイトメニューがどのように見えるかを描いてください。 This exercise will help in finalizing the different pages you'll be adding to your site.この演習は、サイトに追加するさまざまなページを完成させるのに役立ちます。
たとえば、次のページのいくつかをサイトに追加できます。
The last thing you'll need before you begin creating your site is content.あなたがあなたのサイトを作り始める前にあなたが必要とする最後のものはコンテンツです。 So write rough drafts of all the pages that you're going to add.したがって、追加するすべてのページのドラフトを作成します。
また、Squarespace の Web サイトを構築するために必要なすべての画像 (またはビデオ) を積み上げます。 必要な場合 ストック画像、そちらもアレンジ。 適切な画像を持つことで、 大きな影響を与える 変換について。
すべてのコンテンツとメディアを手元に置いておくと、かなり時間がかかります。
それでは、サイトの構築から始めましょう。
(Squarespaceトライアルに既にサインアップしている場合は、ガイドの最初の部分にジャンプしてください。)
All Squarespace plans begin with a free trial.すべてのSquarespaceプランは、無料トライアルから始まります。 To sign up for a free trial, visit無料トライアルにサインアップするには、次のWebサイトにアクセスしてください。 Squarespace 'へのオプションを選択しますサイトを作成する':
次に、テンプレートを選択します。
この手順を簡単にするために、Squarespaceはテーマを次のカテゴリにグループ化します。
Squarespaceのテーマで見つけることができるデザインの数は次のとおりです。 Click on the following thumbnails to have a clearer view.次のサムネイルをクリックすると、見やすくなります。
このウォークスルーの目的のために、Squarespaceアカウントを使用してセットアップしました。
私はビジネスカテゴリに行き、テンプレート、モントークを選択しています。
テンプレートを選択すると、Squarespaceは短いサインアップフォームを表示します。
サインアップが完了すると、4ステップのSquarespaceサイトコンテンツのパーソナライズプロセスに移動します。
サイトコンテンツのパーソナライズアンケートに回答すると、次の画面が表示されます。
As you can see in the screenshot, on the left, there's a panel with various design settings and preferences.スクリーンショットでわかるように、左側には、さまざまなデザイン設定と設定を備えたパネルがあります。 And on the right, there's a preview of my website.そして右側に、私のウェブサイトのプレビューがあります。
Squarespaceのデザイン設定には10個のアイテムがあります。
これらの各要素を詳しく見ていきましょう。
We've already given our site a name, and so in this step, I'll add a tagline.すでにサイトに名前を付けているので、このステップではキャッチフレーズを追加します。 Let's set the tagline to 'キャッチフレーズを 'に設定しましょうSquarespace初心者向けのリソース.
ボタンをクリックすると、Squarespaceのロゴメーカーツールに移動します。
このロゴメーカーツールを使用すると、次のことができます。
Overall, Squarespace's logo maker tool is pretty intuitive.全体として、Squarespaceのロゴメーカーツールは非常に直感的です。 It has its various design elements or icons on the panel on the left-hand side.左側のパネルにさまざまなデザイン要素またはアイコンがあります。
キーワードを検索したとき 「ウェブサイト」、私はたくさんの素晴らしいアイコンを手に入れました。 I chose the one you can see on your right and made an image logo.右の写真を選び、イメージロゴを作りました。
ロゴの高解像度バージョンをダウンロードしようとしましたが、エディターから、Squarespaceアカウントにサインアップしてダウンロードするように求められました。
But still, a low-resolution version can be downloaded at this point too.それでも、この時点で低解像度バージョンをダウンロードすることもできます。 That will do for now.今のところはそれで十分です。
Squarespaceの試用期間が終了し、プレミアムプランにアップグレードすると、問題なく高解像度バージョンをダウンロードできるようになります。 When you get the high-resolution file, you can upload it to your Squarespace site.高解像度のファイルを入手したら、Squarespaceサイトにアップロードできます。
The next two options under this design item are setting the favicon and the social sharing logo.このデザインアイテムの次のXNUMXつのオプションは、ファビコンとソーシャル共有ロゴの設定です。 If you have these, great.あなたがこれらを持っているなら、素晴らしい。 Otherwise, move on to the next setting.それ以外の場合は、次の設定に進みます。
これまでに行った変更を保存するには、「」をクリックします。保存する' パネル上部のボタン。
注:ウェブサイトにすばらしいファビコンを作成したい場合は、無料のリストをご覧ください。 ファビコンジェネレータ あなたは一見することができます。
世界 'テンプレート'セクションには、Squarespaceサイト内にダウンロードされたすべてのテンプレートが表示されます。
ご覧のとおり、現在、私のテンプレートリストにはテンプレートのみが含まれています モントーク これは、トライアルを設定するときにサインアップしたテンプレートだからです。
If you're happy with the template you've chosen, go to the next step.選択したテンプレートに満足している場合は、次の手順に進みます。 Or, you can download more templates.または、さらにテンプレートをダウンロードできます。
先端
気に入ったSquarespaceテンプレートを見つけて、それがどのテーマを使用しているか疑問に思っている場合は、次の方法で確認できます。
私が使用しているテンプレートMontaukは、テンプレートIDを持っています。 50521cf884aeb45fa5cfdb80. やってみて.
テンプレートIDを見つけたら、 Squarespaceテンプレートファミリー Squarespaceの公式デモサイトに移動します。
世界 スタイルエディタ フォント、タイトルの色、ロゴの位置、フッターの内容など、テンプレートの設定をカスタマイズするために使用されます。
各テンプレートは、で異なるカスタマイズオプションを提供します スタイルエディタ.
ただし、Squarespaceテンプレートはすべて完璧に設計されているため、もちろんデザイナーでない限り、このセクションには近づかないことをお勧めします。
世界 チェックアウトページスタイルエディタ helps in customizing the settings of the checkout page.チェックアウトページの設定をカスタマイズするのに役立ちます。 This setting is mostly helpful to Squarespace sites that have stores or are store websites.この設定は、ストアがある、またはストアのWebサイトであるSquarespaceサイトに主に役立ちます。
Squarespaceでは、パスワードを使用してページをロックできます。 All such pages don't display the contents but show a lock screen.このようなページはすべてコンテンツを表示しませんが、ロック画面を表示します。
カスタマイズしない場合 画面のロック まったく、これがどのように見えるかです。
世界 アナウンスバー lets you add a sticky notification on the top of your site.サイトの上部にスティッキー通知を追加できます。 This is an excellent feature to draw your readers' attention to some of your important content.これは、重要なコンテンツのいくつかに読者の注意を引くための優れた機能です。
有効にしたら アナウンスバー、メッセージとユーザーがクリックする必要のあるリンクを追加できます。
上のスクリーンショットでわかるように、リンクを新しいウィンドウで開くことができます。
名前が示すように、 モバイル情報バー モバイルユーザーの前に表示され、電子メール、電話番号、場所、および営業時間を表示するために使用できます。
Squarespaceはこの情報を 'ビジネス情報' セクション。これについては後で説明します。
Squarespaceは、Squarespaceを使用して構築されたすべてのWebサイトにブランド(バッジ)を追加します。
世界 Squarespaceバッジ 設定により、Squarespaceバッジを有効または無効にしたり、その位置を調整したり、表示設定を微調整したりできます。
フォント、色、その他のデフォルトのカスタマイズオプションを超えてテンプレートをカスタマイズする場合は、次の機能を利用する必要があります。 カスタムCSS.
追加することを忘れないでください カスタムCSS テンプレートのデザインを壊す可能性があります—お勧めしません。
世界 高機能 オプションを使用すると、フォントを追加できます Typekitから SquarespaceのWebサイトに。 Theザ・ 高機能 設定には、高度なテンプレート設定もあります。
これで、Squarespaceサイトのデザイン部分は終わりです。
次に、Squarespaceページと、それらを使用して新しくデザインしたサイトにコンテンツをアップロードする方法について説明します。
テンプレートを選択してカスタマイズし、サイトのタイトルとロゴを追加したら、コンテンツの追加を開始します。
メインメニューから始めましょう。
初めてページ設定にアクセスすると、 'トップナビゲーション」 は、デモのメニュー項目を示しています。
今のところ、デモのページを忘れて、独自のページを追加してください。
Squarespaceは、サイトが通常必要とするページごとに、事前に作成されたテンプレートを提供しています。
たとえば、About、Features、Store、Contactなどのページの場合、サイトにロードするだけですぐに使用できるページレイアウトがすでに用意されています。
事前に作成されたテンプレートにページを追加する方法を見てみましょう。
次のスクリーンショットでわかるように、サイトにページを追加するためにクリックできるXNUMXつの「+」記号があります。
最初のオプションをクリックすると、ページを追加するだけでなく、Webサイトのメインメニューにも追加します。
そして、XNUMX番目のオプションをクリックすると、ページを追加するだけです。
XNUMX番目のオプションでページの追加を開始することをお勧めします。 After you're done with creating the pages, delete all the demo pages, and drag all your freshly generated pages and drop them under theページの作成が完了したら、すべてのデモページを削除し、新しく生成したすべてのページをドラッグして、 トップナビゲーション.
「About」ページを追加しましょう。 アイテムをクリックしたら 'ページ'、左側のパネルに次のオプションが表示されます。
'をクリックしたら編集を開始します」、選択した自己紹介ページレイアウトがSquarespaceのページエディタに読み込まれます。 ページ要素を編集するには、ページの上部(ナビゲーションのすぐ下)にカーソルを合わせると、次のオプションパネルが開きます。
クリック '編集」.
この時点で、ページコンテンツの編集を開始するか、「」をクリックすることができます。+'ページの上部に署名して、デザイン要素を追加します。
サイトに要素を追加すると、単純なドラッグアンドドロップ機能でその位置を簡単に再配置できます。
注意:
デフォルトのレイアウトをカスタマイズし、スペーサー要素を含むさまざまな要素を追加すると、モバイルプレビューがおかしくなることがあります。さらに、さまざまな要素間の間隔が少しずれて見える場合があります。
(ただし、デフォルトのレイアウトは美しくレンダリングされます。)
他のページを追加することは、aboutページを追加することに似ています。
今のところ、サイトを超高速で稼働させたい場合は、デフォルトのレイアウトを使用するのが最善です。
このステップの最後に、サイトのすべてのページをメインメニューに移動する準備ができているはずです。
ただし、移動する前に、デモページを削除してください。
次に、新しく作成したページを 'にドラッグアンドドロップしますトップナビゲーション」.
ナビゲーションをクリーンアップしたら、次はページで作業します。
コンテンツを追加するには(またはページのデザインをカスタマイズするには)、ページの名前をクリックするだけです。
クリックすると、ページエディタが読み込まれ、テンプレートのコンテンツを準備手順で作成したコンテンツに置き換えることができます。
高レベルのページ設定は、ページの次のことに役立ちます。
ページに上位レベルの変更を加えたり、ページを削除したりするには、ページ名の横にある設定アイコンをクリックします。
また、ページをホームページとして設定するには、選択したページのこれらの設定を開いて、「」を選択する必要があります。ホームページとして設定」 オプションを選択します。
Squarespaceでブログを単純なページとして追加することはできますが、いくつかの追加設定が必要になる場合があります。
投稿を追加するには、ブログメニュー項目オプションの「+」記号をクリックします。
投稿エディタは非常に直感的です。
下部に、投稿にカテゴリとタグを追加するための設定が表示されます。
世界 オプション 設定により:
うまくいけば、上記のセクションで、あなたのコンテンツやブログさえも備えた見栄えの良いウェブサイトができあがります。
Squarespaceの設定を見てみましょう。
Squarespaceの設定を使用するのは簡単です。 They are grouped into 3 categories:それらはXNUMXつのカテゴリに分類されます。
これらのうち、 '一般」 カテゴリを使用すると、会社名、住所、納税者番号などのビジネス情報を追加できます。
そしてその 'コマース」 設定は、オンラインストアを運営したり、サイトにストアを追加したりする人に関連しています。
これらのカテゴリのうち、 'ウェブサイト」 カテゴリは私が話したいものです。
'ウェブサイト」 設定は次のとおりです。
それでおしまい。
このガイドの指示に従っている場合は、これで最初の機能的な(完璧ではないにしても)SquarespaceWebサイトの準備ができているはずです。
新しいウェブサイトを立ち上げたら、最初のタスクはそれをグーグルでインデックスに登録することです。
インデックス作成プロセスを高速化するには、サイトマップをGoogle SearchConsoleに送信する必要があります。
SquarespaceのWebサイトのサイトマップは次の場所にあります。
http://www.yourdomain.com/sitemap.xml
したがって、WebサイトのサイトマップURLをコピーして、 検索コンソール.
Squarespace Webサイトを作成し、それを完全に調整およびカスタマイズするのにXNUMX週間以上かかることはありません。 Squarespaceがあなたのウェブサイトを管理します。
このガイドで、最初のSquarespaceサイトの大まかなバージョンを10時間以内に構築できるようになることを願っています(ドメインの購入などの時間を考慮に入れて)。
注:代替プラットフォームをお探しの場合は、次のリストをご覧ください。 あなた自身のウェブサイトを構築するためのプラットフォーム.