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

CSSコードを使用して、組み込みのスタイル設定オプションにはないサイトのカスタマイズを行うには、CSSエディターを使用します。CSSは、フォント、色、背景を変更する場合にのみ使用してください。それ以外の目的でCSSを変更すると、サイトに問題が生じる場合があります。「カスタム コードのよくある質問」で、CSSで変更すべき内容と変更すべきでない内容に関する推奨事項をご確認ください。

注:

特にモバイル端末では、カスタム コードによってサイトの外観や動作が損なわれる可能性があります。当社のサポート チームは、お客様のサイトにカスタム コードを追加したり、カスタム コードを使用することで発生する問題のトラブルシューティングをお手伝いしたりすることはできません。詳細なヘルプについては、以下のリソースをご覧になることをおすすめします。

1. Squarespace Forum
2. Squarespace Expert

 

動画を見る

テンプレートを切り替えたら、カスタムCSSは転送されますか？

バージョン7.0のサイトでは、テンプレートを切り替えてもカスタムCSSは転送されません。以前のテンプレートに戻した場合、追加したCSSはそのまま残ります。

CSSエディターで構文エラーが発生しています

SquarespaceのCSSエディター構文チェック システムは、様々なブラウザーでのシステムの動作をテストするパーサーです。CSSバリデーターでコードに対してエラーが返されなくても、特定の行が意図したとおりに動作しない可能性があると判断が下された場合、パーサーはそのコードにフラグを立てます。構文エラーが表示された場合は、CSSを修正して、正しい構文と形式が適用され、欠落している部分がないことをご確認ください。

CSSコードを追加する

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

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

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

CSSエディターでカスタム画像のアセットをアップロードできます。フォントをアップロードする場合は、フォント アップロード ツールの利用をご検討ください。

ファイルをアップロードする手順は以下のとおりです。

1. [カスタム ファイル] をクリックします。(バージョン7.0では、ボタンのテキストは [カスタム ファイルを管理] です)。
2. [画像またはフォントを追加] をクリックするか、同じエリアにファイルをドラッグし、ファイルをアップロードします。

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

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

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

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

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

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

1. 参照するファイルのURLが必要なところまでコードを記述します。
2. コード内のURLを配置する場所にカーソルを合わせます。
3. ファイルをクリックします。
4. そのファイルの直接 URLがCSSエディターにより自動的に貼り付けられるので、コード内でそのファイルを参照できます。

カスタム ファイルとSSL

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

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