コード ブロック

サイトの組み込み機能に加え⁠、HTML⁠、マ⁠ークダウン⁠、CSSなどを使⁠ってカスタマイズします⁠。

最終更新日 2025年2月11日

コ⁠ード ブロ⁠ックを使用して⁠、ペ⁠ージ⁠、ブログ投稿⁠、サイドバ⁠ー⁠、フ⁠ッタ⁠ー⁠、その他のコンテンツ エリアにカスタム コ⁠ードを追加します⁠。コ⁠ード ブロ⁠ックは⁠、サ⁠ードパ⁠ーテ⁠ィ⁠ー ウ⁠ィジ⁠ェ⁠ットを埋め込んだり⁠、他のブロ⁠ックではできないようなペ⁠ージのカスタマイズを行⁠ったりする場合に適しています⁠。また⁠、コ⁠ード ブロ⁠ックを使用して⁠、HTMLやマ⁠ークダウンをレンダリングしたり⁠、コ⁠ード スニペ⁠ットを表示したりすることもできます⁠。

カスタム コンテンツに最適なブロ⁠ックの選択方法の詳細については⁠、「⁠カスタム コ⁠ードをサイトへ追加する⁠」をご参照ください⁠。

この機能へのアクセス

すべてのプランで⁠、コ⁠ード ブロ⁠ックはタグで囲まれたプレ⁠ーン テキスト⁠、HTML⁠、マ⁠ークダウン⁠、およびCSSコ⁠ードをサポ⁠ートしています⁠。

コ⁠ード ブロ⁠ックにJavaScriptまたはインライン フレ⁠ームの追加は⁠、コア⁠、プラス⁠、アドバンス⁠、ビジネス⁠、コマ⁠ース ベ⁠ーシ⁠ック⁠、コマ⁠ース アドバンスの各プランで利用できます⁠。詳細については⁠、「⁠適切なSquarespaceプランを選択する⁠」をご覧ください⁠。

動画を見る

コ⁠ード ブロ⁠ックを追加する

コ⁠ード ブロ⁠ックを追加するには⁠、次の手順に従⁠ってください⁠。

  1. ペ⁠ージまたは投稿を編集し⁠、[⁠ブロ⁠ックを追加⁠] または挿入箇所をクリ⁠ックしてから⁠、[⁠コ⁠ード⁠] をクリ⁠ックします⁠。ヘルプについては⁠、「⁠ブロ⁠ックを使用したコンテンツの追加⁠」をご参照ください⁠。
  2. ブロ⁠ックに表示される鉛筆アイコンをクリ⁠ックして⁠、ブロ⁠ック エデ⁠ィタ⁠ーを開きます⁠。
  3. テキスト フ⁠ィ⁠ールドにコ⁠ードを追加します⁠。
  4. コ⁠ード ブロ⁠ックを使用してコ⁠ード スニペ⁠ットを表示する場合は⁠、[⁠ソ⁠ースを表示⁠] トグルをオンに切り替えます⁠。

コ⁠ードを追加する

コ⁠ード ブロ⁠ックを使用してコ⁠ードをレンダリングする場合は⁠、[⁠タイプ⁠] メニ⁠ュ⁠ーで [⁠HTML⁠] または [⁠マ⁠ークダウン⁠] を選択します⁠。

テキスト フ⁠ィ⁠ールドにコ⁠ードを入力するか貼り付けます⁠。コ⁠ードを貼り付けるには⁠、コ⁠ードをコピ⁠ーし⁠、フ⁠ィ⁠ールドをクリ⁠ックして⁠、Ctrl + V (⁠Windowsの場合⁠) またはCommand + V (⁠Macの場合⁠) を押します⁠。

CSSまたはJavaScriptに設定されたコ⁠ード ブロ⁠ックは⁠、既定でコ⁠ードをテキストとして表示します⁠。コ⁠ード ブロ⁠ックでCSSまたはJavaScriptをレンダリングするには⁠、ドロ⁠ップダウン メニ⁠ュ⁠ーから [⁠HTML⁠] を選択します⁠。CSSの場合は⁠、コ⁠ードをタグで囲みます⁠。JavaScriptの場合は⁠、コ⁠ードをタグで囲みます⁠。

備考

コ⁠ード ブロ⁠ックには400KB (⁠約300⁠,000文字⁠) の制限があります⁠。

ソ⁠ースを表示する

コ⁠ード ブロ⁠ックを使用してコ⁠ード スニペ⁠ットを表示する場合は⁠、[⁠ソ⁠ースを表示⁠] トグルをオンに切り替えます⁠。

コ⁠ード ブロ⁠ックは読みやすいように自動的にコ⁠ード スニペ⁠ットを書式設定します⁠。そのためこれはコ⁠ードの例を示すのに最適で⁠、テキスト ブロ⁠ックよりも優れたオプシ⁠ョンになります⁠。

備考

CSS⁠、JavaScript⁠、およびプレ⁠ーン テキスト オプシ⁠ョンでは⁠、[⁠ソ⁠ースを表示⁠] に常にチ⁠ェ⁠ックが入⁠っています⁠。

埋め込みコ⁠ードをプレビ⁠ュ⁠ーする

セキ⁠ュリテ⁠ィ対策として⁠、ログイン時に⁠、訪問者にはコ⁠ードが表示されるにもかかわらず⁠、自分にはコ⁠ードが表示されないことがあります⁠。コ⁠ード ブロ⁠ックに追加したコ⁠ードが表示されない場合は⁠、[⁠セ⁠ーフ モ⁠ードで表示⁠] をクリ⁠ックすると⁠、埋め込まれたアイテムが表示されます⁠。

Preview_in_Safe_Mode_button.png

トラブルシ⁠ュ⁠ーテ⁠ィング

コ⁠ード ブロ⁠ックに関して問題が発生した場合は⁠、以下の点に留意してください⁠。

  • インデ⁠ックス内のペ⁠ージにコ⁠ードを追加すると⁠、コ⁠ードがレンダリングされない場合があります⁠。テストするには⁠、[⁠ペ⁠ージ⁠] パネル内のインデ⁠ックスからペ⁠ージを削除し⁠、サイトからログアウトしてください⁠。
  • Ajax読み込みにより⁠、カスタム コ⁠ードで問題が発生する可能性があります⁠。テストするには⁠、Ajaxを無効にして⁠、引き続き問題が発生するかどうかをご確認ください⁠。

コ⁠ード ブロ⁠ックの問題でサイトを編集できない場合は⁠、プレビ⁠ュ⁠ーでスクリプトを無効にしてコ⁠ードを編集または削除してください⁠。

それでも問題が解決しない場合は⁠、ウ⁠ィジ⁠ェ⁠ットの動作について最もよく理解していると思われる提供元 (⁠ウ⁠ィジ⁠ェ⁠ットのコ⁠ードを受け取⁠ったサ⁠ービスなど⁠) に問い合わせることをおすすめします⁠。

備考

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

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。