テキストの書式設定

テキスト ツ⁠ールバ⁠ーを使用して⁠、テキストの書式を設定します⁠。

最終更新日 2024年10月25日

テキスト ブロ⁠ックや画像ブロ⁠ックのキ⁠ャプシ⁠ョンのように⁠、テキストの追加と同じエデ⁠ィタ⁠ーでテキストの書式を設定できます⁠。

このガイドでは⁠、テキストの書式を設定するさまざまな方法について説明します⁠。具体的には⁠、ヘ⁠ッダ⁠ーまたは段落テキストの設定⁠、リストの作成⁠、インデントの追加⁠、太字または斜体の表示などがあります⁠。

ヒント

フ⁠ォント⁠、色⁠、間隔などのテキストのスタイル設定について詳しくは⁠、「⁠テキストのスタイル設定⁠」を参照してください⁠。

テキストの書式を設定する

テキストの編集または追加中に⁠、テキストに書式設定を適用できます⁠。

テキスト ブロ⁠ックや画像ブロ⁠ックのキ⁠ャプシ⁠ョンなどのテキスト領域のテキストの書式を設定するには⁠、以下の手順に従います⁠。

  1. 書式設定するテキストを強調表示します⁠。
  2. ツ⁠ールバ⁠ーのアイコンを使用して⁠、テキストに書式設定を適用します⁠。

テキスト ツ⁠ールバ⁠ーを数回使用すると⁠、縮小バ⁠ージ⁠ョンに折りたたまれることがあります⁠。[⁠⁠] をクリ⁠ックすると展開します⁠。

expand_toolbar.png

パネルやペ⁠ージ設定などにある特定のテキスト領域では⁠、書式設定オプシ⁠ョンが異なることに注意してください⁠。以下に例を示します⁠。

  • 色アイコンは⁠、バ⁠ージ⁠ョン7⁠.1テキスト ブロ⁠ックにのみ表示されます⁠。
  • バ⁠ージ⁠ョン7⁠.0での画像ブロ⁠ックのテキストに使用するツ⁠ールバ⁠ーには⁠、太字⁠、斜体⁠、リンク⁠、プレ⁠ーン テキストとして貼り付け⁠、書式設定のクリアのためのアイコンがあります⁠。他の書式設定オプシ⁠ョンはサポ⁠ートされていません⁠。
  • プレ⁠ーン テキストとして貼り付けるためのクリ⁠ップボ⁠ード アイコンは⁠、自動的に書式が削除される領域には表示されません⁠。

書式設定のタイプごとの具体的な手順を確認するには⁠、この後の各セクシ⁠ョンを参照してください⁠。

配置する

テキスト ツ⁠ールバ⁠ーの段落整列アイコンをクリ⁠ックすると⁠、テキストを左⁠、中央⁠、右⁠、または両端揃えに整列できます⁠。

Text_toolbar_align_text_drop-down_menu.jpg

太字

テキスト ツ⁠ールバ⁠ーで [⁠B⁠] をクリ⁠ックすると⁠、テキストが太字になります⁠。

備考

フ⁠ォント パ⁠ッケ⁠ージに太いフ⁠ォントが含まれていない場合⁠、太字のテキストはブラウザ⁠ーによ⁠って表示が異なる場合があります⁠。さまざまなブラウザ⁠ーで太字テキストの一貫性を保つには⁠、スタイルが多いフ⁠ォントを選択してください⁠。

Bold_icon_Squarespace_text_toolbar_large_letter_B.png

コ⁠ード

コ⁠ードを表示する方法は⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

テキスト ツ⁠⁠ールバ⁠⁠ーはテキストをコ⁠⁠ードとしてフ⁠⁠ォ⁠⁠ーマ⁠⁠ットしません⁠⁠。テキスト内のコ⁠⁠ード例を表示するには⁠⁠、コ⁠⁠ード ブロ⁠⁠ックの [⁠⁠ソ⁠⁠ースを表示⁠⁠] オプシ⁠⁠ョンを使用します⁠⁠。

テキスト ツ⁠⁠ールバ⁠⁠ーで⁠⁠、[⁠⁠形式⁠⁠] ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーを使用して [⁠⁠コ⁠⁠ード⁠⁠]を選択します⁠⁠。これにより⁠⁠、コ⁠⁠ードがテキスト ブロ⁠⁠ックではレンダリングされなくなり⁠⁠、コ⁠⁠ードの例を表示できるようになります⁠⁠。

コ⁠⁠ード ブロ⁠⁠ックは読みやすいように自動的にコ⁠⁠ード スニペ⁠⁠ットを書式設定するので⁠⁠、必要に応じてコ⁠⁠ード ブロ⁠⁠ックの [⁠⁠ソ⁠⁠ースを表示⁠⁠] オプシ⁠⁠ョンを代わりに使用できます⁠⁠。

code.png

見出し

テキスト ツ⁠ールバ⁠ーで [⁠形式⁠] ドロ⁠ップダウン メニ⁠ュ⁠ーを使用して見出しを作成します⁠。見出しのオプシ⁠ョンは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

Headings_drop-down_Squarespace_text_toolbar.png

見出しのレベルを次の4つから選択します⁠⁠。

  • 見出し1 (⁠⁠h1⁠⁠)
  • 見出し2 (⁠⁠h2⁠⁠)
  • 見出し3 (⁠⁠h3⁠⁠)
  • 見出し4 (⁠⁠h4⁠⁠)

見出しのレベルを次の3つから選択します⁠⁠。

  • 見出し1 (⁠⁠h1⁠⁠)
  • 見出し2 (⁠⁠h2⁠⁠)
  • 見出し3 (⁠⁠h3⁠⁠)

ヒント

見出しスタイルを組み合わせて⁠、あるテキストブロ⁠ックを別のテキスト ブロ⁠ックで囲むことで⁠、プル クオ⁠ートを作成できます⁠。

強調

この機能へのアクセス

テキストの強調表示は⁠、バ⁠ージ⁠ョン7⁠.1サイトのテキスト ブロ⁠ックでのみサポ⁠ートされます⁠。

テキスト ツ⁠ールバ⁠ーの [⁠テキストのハイライト⁠] ツ⁠ールを使用して⁠、テキストを強調します⁠。ドロ⁠ップダウン メニ⁠ュ⁠ーで⁠、テキストのハイライト オプシ⁠ョンを選択します⁠。

  • 下線
  • フリ⁠ーハンド
  • 取り消し線
  • 二重
  • ギザギザ
  • 落書き
  • 上線と下線
  • 対角線
  • 取り消し線

次のスタイル オプシ⁠ョンを使用して⁠、テキストのハイライトをカスタマイズします⁠。

  • アニメ⁠ーシ⁠ョン - アニメ⁠ーシ⁠ョンのスタイル (⁠描画⁠、フ⁠ェ⁠ード⁠、フ⁠ェ⁠ードとスケ⁠ール⁠) を選択します⁠。[⁠期間⁠] スライダ⁠ーを使用して⁠、アニメ⁠ーシ⁠ョンの時間の長さを設定します⁠。描画アニメ⁠ーシ⁠ョンを選択した場合は⁠、[⁠方向⁠] でアニメ⁠ーシ⁠ョンを左から右に動かすか⁠、右から左に動かすかを選択します⁠。
  • 前面に移動 - テキストの前にハイライトを表示できるようにします⁠。無効にすると⁠、テキストの背後にハイライトが表示されます⁠。
  • - サイトのパレ⁠ットから色を選択するか⁠、カスタム色を選択します⁠。スライダ⁠ーを使用して不透明度を調整します⁠。
  • 線の先端 - ハイライトの端に正方形または円形を設定します⁠。
  • 太さ - ハイライトの太さを調整します⁠。
Text_highlit_icon_in_the_Squarespace_text_toolbar_letter_a_with_a_squiggle_under_it.png

インデント

テキスト ツ⁠ールバ⁠ーで⁠、[⁠インデントを増やす⁠] アイコンまたは [⁠インデントを減らす⁠] アイコンをクリ⁠ックして⁠、テキストを左または右にインデントします⁠。インデントすると⁠、必ず段落全体がインデントされます⁠。1行だけをインデントすることはできません⁠。

Indent_icon_Squarespace_text_toolbar.png

イタリ⁠ック体

テキスト ツ⁠ールバ⁠ーで [⁠I⁠] をクリ⁠ックすると⁠、テキストが斜体になります⁠。

Italic_icon_Squarespace_text_toolbar.png

リンク

テキスト ツ⁠ールバ⁠ーで⁠、[⁠リンク⁠] アイコンをクリ⁠ックします⁠。以下のリンク先を指定できます⁠。

  • 外部ペ⁠ージ
  • 内部ペ⁠ージ
  • フ⁠ァイル
  • メ⁠ールアドレス
  • 電話番号

詳細な手順については⁠、「⁠サイトにリンクを追加する⁠」を参照してください⁠。

Link_icon_Squarespace_text_toolbar.png

リスト

テキスト ツ⁠ールバ⁠ーで⁠、番号付きリスト箇条書きリストのアイコンをクリ⁠ックして⁠、リストを作成します⁠。

List_icons_Squarespace_text_toolbar.png

等幅またはコ⁠ード テキスト

等幅テキストでは⁠、各文字の左右に同じだけスペ⁠ースがあります⁠。このテキストをどう呼ぶかは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

テキスト ツ⁠⁠ールバ⁠⁠ーで⁠⁠、[⁠⁠形式⁠⁠] ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックし⁠⁠、[⁠⁠等幅フ⁠⁠ォント⁠⁠]を選択します⁠⁠。

等幅フ⁠⁠ォント テキストのサイズ⁠⁠、フ⁠⁠ォント⁠⁠、色のオプシ⁠⁠ョンについて詳しくは⁠⁠、「⁠⁠テキストのスタイル設定⁠⁠」を参照してください⁠⁠。

Monospace_drop-down_Squarespace_text_toolbar.png

テキスト ツ⁠⁠ールバ⁠⁠ーで⁠⁠、[⁠⁠形式⁠⁠] ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーをクリ⁠⁠ックし⁠⁠、[⁠⁠コ⁠⁠ード⁠⁠]を選択します⁠⁠。

コ⁠⁠ード テキストのサイズと色のオプシ⁠⁠ョンについて詳しくは⁠⁠、「⁠⁠テキストのスタイル設定⁠⁠」を参照してください⁠⁠。フ⁠⁠ォント スタイルを変更することはできません⁠⁠。

code.png

段落または通常のテキスト

テキスト ツ⁠ールバ⁠ーを使用して⁠、サイトの主要な本文テキストの書式を設定します⁠。このテキストをどう呼ぶかは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

テキスト ツ⁠⁠ールバ⁠⁠ーで⁠⁠、ドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーを使用して [⁠⁠段落⁠⁠] オプシ⁠⁠ョンを選択し⁠⁠、通常の本文テキストを追加します⁠⁠。段落テキストのレベルを次の3つの中から選択します⁠⁠。

  • 段落1
  • 段落2
  • 段落3

段落テキストのサイズ⁠⁠、フ⁠⁠ォント⁠⁠、色のオプシ⁠⁠ョンについて詳しくは⁠⁠、「⁠⁠テキストのスタイル設定⁠⁠」を参照してください⁠⁠。

Paragraph_drop-down_Squarespace_text_toolbar.png

テキスト ツ⁠⁠ールバ⁠⁠ーのドロ⁠⁠ップダウン メニ⁠⁠ュ⁠⁠ーから [⁠⁠標準⁠⁠] を選択し⁠⁠、通常の本文テキストを追加します⁠⁠。

本文のフ⁠⁠ォント⁠⁠、サイズ⁠⁠、色を変えるスタイル微調整オプシ⁠⁠ョンについては⁠⁠、「⁠⁠テキストのスタイル設定⁠⁠」を参照してください⁠⁠。

normal.png

プレ⁠ーン テキストとして貼り付ける

外部プログラムからテキストをコピ⁠ーした場合は⁠、テキスト ツ⁠ールバ⁠ーの [⁠クリ⁠ップボ⁠ード⁠] アイコンをクリ⁠ックして⁠、プレ⁠ーン テキストとしてブロ⁠ックに貼り付けます⁠。

Paste_as_plain_text_icon_Squarespace_text_toolbar.png

引用

テキスト ツ⁠ールバ⁠ーで⁠、[⁠引用⁠] アイコンをクリ⁠ックして引用書式を追加します⁠。

Quote_icon_Squarespace_text_toolbar.png

書式設定を削除する

テキスト ツ⁠ールバ⁠ーで⁠、[⁠書式設定を削除⁠] アイコンをクリ⁠ックして⁠、テキストの書式設定を削除します⁠。これは⁠、他のソ⁠ースからテキストを貼り付ける場合⁠、または最初からやり直す場合に便利です⁠。バ⁠ージ⁠ョン7⁠.1のテキスト ブロ⁠ックでは⁠、これによりカスタム テキストの色も削除されます⁠。

Squarespace_text_toolbar_clear_text_formatting_button.jpg

スケ⁠ール

この機能へのアクセス

テキストのスケ⁠ーリングは⁠、一部の7⁠.0テンプレ⁠ート フ⁠ァミリ⁠ーでのみサポ⁠ートされています⁠。また⁠、テキスト ブロ⁠ックはバ⁠ージ⁠ョン7⁠.1のサイトでのみサポ⁠ートされています⁠。

ブラウザ⁠ーのサイズに関係なく⁠、テキスト サイズを改行せずにブロ⁠ックの幅い⁠っぱいに収まるように設定するには⁠、テキスト ツ⁠ールバ⁠ーの [⁠テキストの拡大と縮小⁠] アイコンをクリ⁠ックします⁠。このオプシ⁠ョンは⁠、短いタイトルや見出しに最適です⁠。特にモバイル ブラウザ⁠ーでは⁠、長いテキストは小さく表示される場合があります⁠。

テキストが拡大縮小されても⁠、他のサイズ設定には影響しません⁠。見出し段落の書式設定を使用して⁠、フ⁠ォントなどの他のスタイルと合わせたり⁠、SEO向けにテキストを最適化したりできます⁠。テキストの拡大縮小時にテキストを太字⁠、斜体⁠、取り消し線付きにしたり⁠、色を変更したりすることはできますが⁠、リストやプル クオ⁠ートなどのオプシ⁠ョンは機能しません⁠。

Scaling_text_icon_Squarespace_text_toolbar.png

取り消し線

テキスト ツ⁠ールバ⁠ーで [⁠取り消し線⁠] アイコンをクリ⁠ックして⁠、取り消し線形式を追加します⁠。

Strikethrough_icon_Squarespace_text_toolbar.png

下線

下線のオプシ⁠ョンは⁠、サイトのバ⁠ージ⁠ョンによ⁠って異なります⁠。

ロ⁠⁠ック画面やプロモ⁠⁠ーシ⁠⁠ョン ポ⁠⁠ップア⁠⁠ップなどの特定の領域には下線オプシ⁠⁠ョンがありますが⁠⁠、テキスト ブロ⁠⁠ックはテキスト ツ⁠⁠ールバ⁠⁠ーによるテキストの下線をサポ⁠⁠ートしていません⁠⁠。

また⁠⁠、テキストを強調表示し⁠⁠、キ⁠⁠ーボ⁠⁠ード シ⁠⁠ョ⁠⁠ートカ⁠⁠ット (⁠⁠Macの場合は+U⁠⁠、Windowsの場合はCtrl+U⁠⁠) を使用して下線を追加することもできます⁠⁠。

訪問者は下線付きのテキストをリンクだと思⁠⁠ってクリ⁠⁠ックしようとすることが多いため⁠⁠、下線の配置は慎重に検討してください⁠⁠。

一部のテンプレ⁠⁠ートには⁠⁠、特定の種類のテキストに下線を引くためのサイト スタイル オプシ⁠⁠ョンがあります⁠⁠。以下の表を使用して⁠⁠、これらのテンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ーで下線を引くことができるテキストの種類を確認してください⁠⁠。

また⁠⁠、テキストを強調表示し⁠⁠、キ⁠⁠ーボ⁠⁠ード シ⁠⁠ョ⁠⁠ートカ⁠⁠ット (⁠⁠Macの場合は+U⁠⁠、Windowsの場合はCtrl+U⁠⁠) を使用して下線を追加することもできます⁠⁠。

訪問者は下線付きのテキストをリンクだと思⁠⁠ってクリ⁠⁠ックしようとすることが多いため⁠⁠、下線の配置は慎重に検討してください⁠⁠。

テンプレ⁠⁠ート フ⁠⁠ァミリ⁠⁠ー

下線を引くことができるテキスト

Adirondack

ペ⁠⁠ージのタイトルとブログ投稿のタイトル

Avenue

本文のリンク

Aviator

なし

Bedford

なし

Brine

検索バ⁠⁠ーのヘ⁠⁠ッダ⁠⁠ー

Farro

検索バ⁠⁠ーのヘ⁠⁠ッダ⁠⁠ー

Five

サイドバ⁠⁠ーのサイトのタイトルとサイドバ⁠⁠ーのH3テキスト

Flatiron

なし

Forte

本文のリンク

Galapagos

なし

Ishimoto

なし

Momentum

本文のリンク

Montauk

なし

Native

本文のリンク

Pacific

なし

Skye

本文のリンク

Supply

なし

Tremont

ナビゲ⁠⁠ーシ⁠⁠ョン リンクとインデ⁠⁠ックス メニ⁠⁠ュ⁠⁠ーのリンク

Wells

なし

Wexley

本文のリンク

York

なし

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

Microsoft WordやGoogle Driveなどのプログラムからコンテンツをコピ⁠ーして貼り付けると⁠、目には見えないスタイル設定がテキストに引き継がれ⁠、Squarespaceの書式設定が妨げられる可能性があります⁠。ペ⁠ーストしたテキストの間隔や見出しに問題がある場合は⁠、「⁠テキストの書式設定を修正する⁠」を参照してください⁠。

サイトのテキストをカスタマイズするために⁠、Squarespace Marketplaceを通じ⁠、独立したデザイナ⁠ーを採用することもご検討ください⁠。

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

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

  • Squarespace Expertを雇う

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