高度なコーディング スキルを活用してサイトのスタイルや外観を向上させましょう。

コーディングやデザインの専門知識がない方でも、Squarespaceでは Webサイトを構築できます。ブロックを追加することにより、自分でコードを書かずにHTMLをサイトに追加できます。同様に、スタイルを変更すると、サイトのCSSが変更されます。Squarespaceは強力かつ柔軟なプラットフォームであり、組み込みのスタイル オプションを使用することでデザインに関連する課題の多くを解決できます。

サイトをさらにカスタマイズするには、カスタム コードを使用します。 カスタム コードを追加する前にコーディングの知識を習得しておくことを強くおすすめします。コード変更の内容によってはサイトの基礎となるコードと競合する場合があるため、これらの変更のスタイル設定に問題が生じる可能性があります。

サイトへのコードの追加は高度な変更であり、Squarespace サポートの範囲外であることに注意してください。コーディングの知識をお持ちで、さらにサポートが必要なお客様は、Squarespace Forum にアクセスしてください。 アクティブなサイトをこれまでに 3 件構築しているお客様は、より技術的な質問への回答への対応力が高く、クリエイティブな専門家のコミュニティである Squarespace Circle に参加することもできます。 コーディングの知識をお持ちでなく、サイトへのカスタム コードの追加を希望するお客様は、 Squarespace Expertを雇うことを検討してください。

動画を見る

カスタム コードを追加する方法

Squarespace は、クライアント側コードのサイトへの追加をサポートしています。 そのオプションはご利用のプランに応じて異なります。試用期間中でも、以下の通りすべてのオプションをご利用になれます。

Squarespace は、PHP、Ruby、Ruby on Rails、SQL などのサーバー側コードをサポートしていません。

コード ブロックと埋め込みブロックの比較

埋め込みブロックは、oEmbed Standard を使用する外部サイトやサービスからコンテンツを取得します。 埋め込みブロックを使用すると、Facebookの投稿や、Squarespaceがサポートしていないホストからの動画など、基本的なサードパーティー コンテンツをサイトに表示できます。

より高度でカスタマイズ可能なコードをお持ちの場合は、コード ブロックが最適な選択です。 コード ブロックは用途の範囲が広く、HTMLとマークダウンでコードをレンダリングできます。 コード スニペットを表示するためにも使用できます。以下のようなコードベースのカスタマイズには、コード ブロックを使用するのが一般的です。

• Issuu などのサービスを通じてドキュメントを埋め込む
• Wufoo などのサービスを通じてサポートされていないフォームを追加する
• MLS 検索を追加する

HTML、JavaScript、CSS

サイトに追加できるカスタム コードの一般的な種類について、詳しくはこちらをご覧ください。

HTML

Webページにコンテンツを追加するために使用されるコードです。ブロックを追加すると、サイトにHTMLが追加されます。

JavaScript

Webページにインタラクティブな機能を持たせるために使用されるコードです。 JavaScript は、スライドショー、スライダー、ライトボックスなどの動作を舞台裏で支えます。

CSS

CSSは、HTMLで書かれた Webページにスタイルやデザインを適用する目的で使用されるコーディング言語です。 すべてのSquarespaceテンプレートにはCSSが組み込まれており、これらすべてのテンプレートに微調整オプションとスタイル オプションがあります。サイト スタイルに変更を加えると、サイトのCSSが変更されます。 カスタムCSSをサイトに適用する場合は、慎重に使用してください。

CSSエディターを使用して、以下をカスタマイズできます。

• フォント
• 色
• 背景

以下のカスタマイズにCSSを使用することはおすすめしません。

• パディング
• マージン
• フロート
• サイズ (ブロック、画像、バナー)
• 配置

カスタムCSSには 128,000 文字の文字数制限があります。

Squarespace 開発者プラットフォーム (バージョン 7.0 のみ)

バージョン7.0の上級ユーザーは、Squarespace開発者プラットフォームを使用して、サイトのテンプレートの基礎となるコードにアクセスできます。このプラットフォームは、開発者やデザイン代理店がSquarespaceの既存のテンプレートを変更したり、テンプレートをゼロから構築したりできるように設計されています。

カスタム コードを貼り付けられない場合

コードの貼り付けで問題が発生した場合は、キーボード ショートカットをお試しください。 貼り付ける先の領域をクリックして、以下を押します。

カスタム コードが表示されない場合

カスタム コードが表示されない場合はブラウザーを更新してください。 それでも問題が解決しない場合、以下が原因として考えられます。

• ログインした状態になっている - セキュリティ対策として、コード ブロック内のコードで訪問者に表示されるものが、ログインした状態のサイト管理者には表示されない場合があります。これは、安全な接続 (https://) 経由で埋め込み JavaScript を表示しようとすると発生するエラーです。 これをテストするには、シークレット ブラウザーでサイトにアクセスしてください。
• コードがインデックス ページにある - インデックス内のページにコードを追加すると、コードがレンダリングされない場合があります。これをテストするには、[ページ] パネル内のインデックスからページを削除し、シークレット ブラウザーでサイトにアクセスします。

それでもコードが正常に動作しない場合は、コードの提供元に問い合わせてください。コードとその標準動作には、提供元が最も精通しているはずです。サードパーティーのコードはSquarespaceサポートの範囲外であるため、これに関してのトラブルシューティングをお手伝いすることはできません。

CORS エラーが発生した場合

ブラウザーからのリクエストに JavaScript を使用すると、CORS (クロス オリジン リソース共有) エラーが発生します。 すべてのリクエストは、必ずサーバー側のアプリケーションから発信する必要があります。 CORS リクエストは、当社のサポートの範囲外です。

コーディングのリソース

ここでは、チュートリアル、トラブルシューティング、参照ガイドとして推奨される Webサイトのうち、人気が高く信頼性のあるサイトをいくつか紹介します。

• W3Schools
• Codecademy
• Mozilla Developer Network
• Stack Overflow
• Shay Howe
• SitePoint
• Treehouse

注: カスタム コードは、サポートの範囲外です。つまり、セットアップやトラブルシューティングに関し、これ以上は当社よりサポートを提供することができません。さらに、コードベースのソリューションに関しては、その機能性や Squarespace との完全な互換性は保証できません。これには、Squarespaceのレスポンシブ デザインにおける当該ソリューションの機能性 (特にモバイル デバイス上での外観)や、すべてのテンプレートでソリューションが機能するかどうかが含まれます。CSSのカスタマイズは、当社プラットフォームの今後の更新時に、表示に関連する問題を引き起こす可能性もあります。当社はこれ以上サポートを提供できかねますが、次のように、お客様が問題解決のために参照できるリソースが多数あります。

• カスタム コードを追加するためのベスト プラクティスについて学びましょう。
• 「コードベースのカスタマイズに関する基本ガイド」をお読みください。
• 当社のお客様と開発者のフォーラムである Squarespace Forum をご覧ください。
• Squarespace Expertを雇い、ご自分のサイト用のカスタム コードの作成を依頼しましょう。
• ビジネス向けにさらにカスタマイズされたソリューションを構築するには、プレミアム機能を備えたエンタープライズ向けのプランをご覧ください。