カスタムCSSを適用して、Squarespaceの組み込みオプションにはないフォント、色、背景のスタイル設定を行います。

お客様がコーディングの知識をお持ちで、組み込みのスタイル設定オプションにはない内容にサイトをカスタマイズしたい場合は、CSSエディターを使ってCSSコードを追加できます。

CSSは、フォント、色、背景を変更する場合にのみ使用してください。 それ以外の目的でCSSを変更すると、サイトに問題が生じる場合があります。

動画を見る

制限事項

• 「カスタム コード のよくある質問」で、CSSで変更すべき内容と変更すべきでない内容に関する推奨事項を確認してください。
• バージョン 7.0 では、テンプレートを切り替えてもカスタムCSSは転送されません。 以前のテンプレートに戻した場合も、追加したCSSはそのまま残ります。
• SquarespaceのCSSエディター構文チェック システムは、様々なブラウザーでのシステムの動作をテストするパーサーです。 CSSバリデーターでコードに対してエラーが返されなくても、特定の行が意図したとおりに動作しない可能性があると判断が下された場合、パーサーはそのコードにフラグを立てます。 構文エラーが表示された場合は、CSSを修正して、正しい構文と形式が適用され、欠落している部分がないことを確認してください。

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

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

CSSコードを追加する

CSSコードを追加する方法は以下の通りです。

1. カスタムCSSパネルを開きます。
2. 拡張可能なウィンドウでエディターを開くには、[新しいウィンドウで開く] をクリックします。 カスタムCSSパネルから移動すると、ウィンドウは閉じます。
3. コードを追加します。
4. 作業が完了したら、[保存] をクリックして変更を公開します。

左側に表示される行番号は、コード部分を参照するのに役立ちます。 構文エラーは下部に赤で表示されます。

ファイルをアップロードする (任意)

ファイルのアップロード領域に、カスタム画像またはフォントのファイル アセットをアップロードします。

1. [CSSエディター] の下の [カスタム ファイル] または [カスタム ファイルを管理] をクリックします。
2. [画像またはフォントを追加] をクリックするか、同じエリアにファイルをドラッグし、ファイルをアップロードします。

ヒント：ファイルのアップロード領域が開かない場合は、ブラウザーのポップアップを有効設定にしてください。

利用可能なファイルの種類

[カスタム ファイル] 領域で有効なものとして受け入れられる画像ファイルとフォント ファイルは以下の通りです。

• .jpg
• .png
• .gif
• .ttf
• .otf
• .woff

このフィールドは、.svg ファイルを受け付けません。

カスタム ファイルを使用する

カスタム ファイルを使用する方法は以下の通りです。

1. 参照するファイルの URL が必要なところまでコードを記述します。
2. コード内の URL を配置する場所にカーソルを合わせます。
3. ファイルをクリックします。

そのファイルの直接 URL がCSSエディターにより自動的に貼り付けられるので、コード内でそのファイルを参照できます。

カスタム ファイルと SSL

ファイルの URL は、SSL が有効になっているかどうかに応じ、安全または安全でないものとして識別されます。サイトの SSL 設定を変更する場合は、それに合わせてファイルの URL を更新することをおすすめします。 たとえば、SSL を有効にした場合は以下に従ってください。

1. CSSエディターを開きます。
2. [カスタム ファイルを管理] をクリックします。
3. ファイルをクリックします。
4. URL を https で始まるものに変更します。
5. [保存] をクリックします。