バージョン7.1でブログ ページのスタイルを設定する

サイトのブログ ペ⁠ージを書式設定とレイアウトでカスタマイズします⁠。

最終更新日 2024年9月09日

ブログ ペ⁠ージは⁠、訪問者を個⁠々のブログ投稿にリンクするランデ⁠ィング ペ⁠ージです⁠。ブランドやスタイルに合わせてブログ ペ⁠ージをカスタマイズできます⁠。このガイドを使用して⁠、ブログ ペ⁠ージとその個⁠々の投稿のスタイル オプシ⁠ョンを見つけてください⁠。ブログ ペ⁠ージを作成して投稿を追加する方法については⁠、「⁠Squarespaceでブログを運営する⁠」を参照してください⁠。

この機能へのアクセス

このガイドでは⁠、バ⁠ージ⁠ョン7⁠.1ブログ ペ⁠ージを対象にしています⁠。バ⁠ージ⁠ョン7⁠.0では⁠、各テンプレ⁠ートに独自のブログ レイアウトとスタイル オプシ⁠ョンがあります⁠。詳細については⁠、「⁠バ⁠ージ⁠ョン7⁠.0のブログ ペ⁠ージ⁠」を参照してください⁠。

スタイル オプシ⁠ョンを開く

ブログ ペ⁠ージは⁠、訪問者がクリ⁠ックすると投稿が開く投稿プレビ⁠ュ⁠ーのレイアウトを作成するブログ ランデ⁠ィング ペ⁠ージと⁠、ブログのコンテンツを追加する個⁠々の投稿の2つの部分に分かれています⁠。

ブログ ペ⁠ージとブログ投稿のスタイルは⁠、主に次の2つの場所で設定します⁠。

ブログ ペ⁠ージのレイアウト

ブログのランデ⁠ィング ペ⁠ージはブログ セクシ⁠ョンでもあります⁠。投稿のプレビ⁠ュ⁠ーが表示され⁠、訪問者がクリ⁠ックすると個⁠々の投稿が開きます⁠。

ブログ セクシ⁠ョンのスタイルを開いた後⁠、[⁠[⁠形式⁠] の [⁠レイアウト⁠] ドロ⁠ップダウンをクリ⁠ックしてレイアウトを選択します⁠。ブログ ペ⁠ージ レイアウトは⁠、投稿のプレビ⁠ュ⁠ーが複数の行と列に表示されるグリ⁠ッドと⁠、投稿が1列に積み重ねられるスタ⁠ック形式のどちらかを選択できます⁠。

  • ブログ (⁠基本グリ⁠ッド⁠) - アイキ⁠ャ⁠ッチ画像の縦横比が固定され⁠、同じ列と行のセ⁠ットが並ぶグリ⁠ッド レイアウトです⁠。
  • ブログ (⁠メ⁠ーソンリ⁠ー⁠) - アイキ⁠ャ⁠ッチ画像の縦横比がトリミングされないグリ⁠ッド レイアウトで⁠、行と列がモザイクのように並びます⁠。お使いのデバイスによ⁠っては⁠、最適な表示になるようにアイキ⁠ャ⁠ッチ画像が時系列からずれて表示される場合があります⁠。
  • シングル カラムのブログ - アイキ⁠ャ⁠ッチ画像が投稿タイトルやその他のメタデ⁠ータの上に一列で表示される積み重ねレイアウトです⁠。
  • ブログ (⁠横並び⁠) - アイキ⁠ャ⁠ッチ画像が投稿タイトルやその他のメタデ⁠ータの横に固定で表示される積み重ねレイアウトです⁠。
  • ブログ (⁠交互に横並び⁠) - 投稿タイトルやその他のメタデ⁠ータの横にアイキ⁠ャ⁠ッチ画像が交互に表示される積み重ねレイアウトです⁠。

各レイアウトには独自のスタイル オプシ⁠ョンがあります⁠。これらの設定は⁠、サイト上で同じレイアウトを使用するすべてのブログ ペ⁠ージに適用されます⁠。

以下の点に留意してください⁠。

  • これらの変更は⁠、同じレイアウトを使用するすべてのブログ ペ⁠ージに影響します⁠。
  • レイアウトに加えた変更は⁠、新しいレイアウトに変更すると保存されます⁠。前のレイアウトに戻⁠っても⁠、他のブログ ペ⁠ージでそのレイアウトを編集していない限り⁠、設定は元に戻ります⁠。
  • ほとんどのレイアウトでは⁠、ブログのランデ⁠ィング ペ⁠ージにブログ投稿全体は表示されません⁠。すべての投稿のコンテンツを表示するには⁠、[⁠シングル カラム⁠] レイアウトを使用し⁠、[⁠コンテンツ表示⁠]を [⁠投稿全体⁠] に設定します⁠。

書式設定オプシ⁠ョン

レイアウトを選択したら⁠、[⁠形式⁠] タブで以下のオプシ⁠ョンを設定します⁠。選択したレイアウトによ⁠っては⁠、一部のオプシ⁠ョンが表示されない場合があります⁠。たとえば⁠、列設定があるのは [⁠基本グリ⁠ッド⁠] レイアウトと [⁠メ⁠ーソンリ⁠ー⁠] レイアウトのみです⁠。

  • - コンテンツがセクシ⁠ョンの幅い⁠っぱいになるようにするには [⁠フル⁠] を選択し⁠、コンテンツの左右のパデ⁠ィングを増やすには [⁠はめ込み⁠] を選択します⁠。
  • - [⁠基本グリ⁠ッド⁠] または [⁠メ⁠ーソンリ⁠ー⁠] レイアウトを2列⁠、3列⁠、または4列に設定します⁠。
  • 左右の間隔 - [⁠基本グリ⁠ッド⁠] と [⁠メ⁠ーソンリ⁠ー⁠] レイアウトで使用できます⁠。
  • 上下の間隔
  • 画像の配置 - アイキ⁠ャ⁠ッチ画像を投稿タイトルとメタデ⁠ータの [⁠上側⁠] または [⁠下側⁠] に表示するように設定します⁠。
  • 縦横比 - アイキ⁠ャ⁠ッチ画像の標準の図形を設定します⁠。
  • 画像の間隔
  • テキストの配置 - テキストを [⁠⁠]⁠、[⁠中央⁠]⁠、または [⁠⁠] に揃えます⁠。
  • 画像テキストの配置 - [⁠横並び⁠] レイアウトのアイキ⁠ャ⁠ッチ画像の [⁠上部⁠]⁠、[⁠中央⁠]⁠、または [⁠下部⁠] にテキストを揃えます⁠。
  • 抜粋 - 抜粋を [⁠表示⁠] または [⁠非表示⁠] に設定します⁠。各投稿の設定に抜粋を追加します⁠。
  • 他のリンクを読む - 抜粋以外にもコンテンツがあることを訪問者に知らせます⁠。
  • タイトルの間隔 - 投稿タイトルと抜粋のの間隔を設定します⁠。
  • テキスト コンテンツの幅 - [⁠基本グリ⁠ッド⁠] レイアウトと [⁠メ⁠ーソンリ⁠ー⁠] レイアウトのテキスト コンテンツの幅を設定します⁠。
  • [⁠続きを読む⁠] の間隔 - 抜粋と [⁠続きを読む⁠] リンクの間隔を設定します⁠。
  • メタの位置 - メタデ⁠ータをテキスト コンテンツの [⁠上部⁠]または [⁠抜粋の下⁠] に表示するように設定します⁠。
  • プライマリ メタデ⁠ータ - どのメタデ⁠ータを最初に表示するかを設定します⁠。[⁠カテゴリ⁠ー⁠]⁠、[⁠日付⁠]⁠、[⁠投稿者⁠]⁠、または [⁠なし⁠] を選択できます⁠。日付は⁠、[⁠サイト用言語⁠] に応じて⁠、[⁠MM/DD/YY⁠] または [⁠ DD/MM/YY⁠] で表示されます⁠。
  • セカンダリ メタデ⁠ータ - 2番目に表示するメタデ⁠ータを設定します⁠。オプシ⁠ョンはプライマリ メタデ⁠ータと同じです⁠。
  • メタの間隔 - メタデ⁠ータと投稿タイトルの間隔を設定します⁠。
  • 区切り文字 - プライマリ メタデ⁠ータとセカンダリ メタデ⁠ータを分割する方法を選択します⁠。詳細については⁠、「⁠区切り文字⁠」を参照してください⁠。
  • コンテンツ表示 - [⁠シングル カラム⁠] レイアウトの場合⁠、投稿とともに表示するテキスト コンテンツを設定します⁠。[⁠タイトルのみ⁠]⁠、[⁠抜粋⁠]⁠、または [⁠投稿全体⁠] を選択します⁠。各投稿の設定に抜粋を追加します⁠。

その他のブログ ペ⁠ージのエレメント

メインのブログ ペ⁠ージの次のエレメントは⁠、他のエリアで設定されます⁠。

  • ペ⁠ージごとの投稿数 - ブログ ペ⁠ージ設定で⁠、ブログ ペ⁠ージに表示される投稿数を120の範囲で設定します⁠。1ペ⁠ージに表示されている投稿の数よりも多くの投稿がある場合⁠、古い投稿と新しい投稿のペ⁠ージ分割のリンクがブログ ペ⁠ージの下部に表示されます⁠。テキスト自体を変更することはできませんが⁠、フ⁠ォントのスタイルを変更することはできます⁠。無限スクロ⁠ールはバ⁠ージ⁠ョン7⁠.1ではサポ⁠ートされていません⁠。
  • アイキ⁠ャ⁠ッチ画像 - 各ブログ投稿の設定で⁠、各投稿のランデ⁠ィング ペ⁠ージに表示されるアイキ⁠ャ⁠ッチ画像を追加します⁠。
  • フ⁠ォント - サイト スタイルのブログ投稿のタイトル⁠、抜粋⁠、メタデ⁠ータ⁠、[⁠続きを読む⁠] リンク⁠、およびペ⁠ージ分割のリンクのフ⁠ォントを設定します⁠。詳細については⁠、「⁠ブログ ペ⁠ージのフ⁠ォント⁠」を参照してください⁠。

ブログ投稿

ブログ投稿では⁠、クラシ⁠ック エデ⁠ィタ⁠ーでブロ⁠ックを追加したり配置したりできます⁠。

ブログ投稿スタイル オプシ⁠ョンを開いて⁠、次の設定を変更できます⁠。

  • 形式 - 間隔とメタデ⁠ータの表示を設定します⁠。サイト上のすべてのブログ投稿は⁠、異なるブログ ペ⁠ージであ⁠っても⁠、これらの設定を共有します⁠。以下の微調整オプシ⁠ョンの全リストを確認してください⁠。
  • - サイトの色を設定するか⁠、ブログのセクシ⁠ョン テ⁠ーマを変更します⁠。詳細については⁠、「⁠ブログ ペ⁠ージの色⁠」を参照してください⁠。

ブログ投稿の書式設定オプシ⁠ョン

サイト上のすべての投稿は⁠、異なるブログ ペ⁠ージであ⁠っても⁠、これらの設定を共有します⁠。1つの投稿に変更を加えた場合⁠、他のすべての投稿に適用されます⁠。

  • コンテンツの幅 - 投稿コンテンツの幅を [⁠ナロ⁠ー⁠]⁠、[⁠標準⁠]⁠、[⁠ワイド⁠] に設定するか⁠、[⁠カスタム⁠] で幅を設定します⁠。
  • テキスト配置 - テキストを [⁠⁠] または [⁠中央⁠] に揃えます⁠。
  • メタの位置 - メタデ⁠ータを [⁠タイトルの上⁠] または [⁠タイトルの下⁠] に表示するように設定します⁠。
  • カテゴリ⁠ーを表示 - 投稿に追加されたカテゴリ⁠ーを表示できるようにします⁠。
  • 日付を表示 - 投稿の公開日を表示します⁠。個⁠々の投稿には⁠、月と日のみが表示されます⁠。投稿に年を表示することはできませんが⁠、メインのブログ ペ⁠ージに日付が表示される場合には年が表示されます⁠。
  • 投稿者名を表示 - 投稿者を表示します⁠。
  • 投稿者プロフ⁠ィ⁠ールを表示 - 投稿コンテンツの下に投稿者のプロフ⁠ィ⁠ールを表示できるようにします⁠。
  • 区切り文字のスタイル - メタデ⁠ータの分割方法を選択します⁠。詳細については⁠、「⁠区切り文字⁠」を参照してください⁠。
  • ヘ⁠ッダ⁠ーの間隔

区切り文字

ブログに日付⁠、投稿者名⁠、カテゴリ⁠ーなどのメタデ⁠ータを表示する場合⁠、「⁠区切り文字⁠」や句読点を追加して⁠、メタデ⁠ータを視覚的に区切ることができます⁠。

区切り文字を選択または非表示にする方法は以下の通りです⁠。

  1. ブログ ペ⁠ージまたは投稿の [⁠編集⁠] をクリ⁠ックします⁠。
  2. ブログ セクシ⁠ョンまたは投稿にカ⁠ーソルを合わせ⁠、鉛筆アイコンをクリ⁠ックします⁠。
  3. [⁠形式⁠] タブの [⁠区切り文字⁠] をクリ⁠ックします⁠。
  4. いずれかのオプシ⁠ョンを選択するか⁠、[⁠なし⁠] (⁠ブログ ペ⁠ージの場合⁠) または [⁠スペ⁠ース⁠] (⁠ブログ投稿の場合⁠) を選択して非表示にします⁠。
  5. [⁠保存⁠] をクリ⁠ックして変更を保存し⁠、そのまま編集を続けるか⁠、[⁠終了⁠] をクリ⁠ックしてから [⁠保存⁠] をクリ⁠ックしてエデ⁠ィタ⁠ーを閉じます⁠。

ブログ ペ⁠ージのフ⁠ォント

ブログ ペ⁠ージとブログ投稿のフ⁠ォントは⁠、サイト全体のフ⁠ォント設定に従います⁠。変更するには⁠、ブログ ペ⁠ージまたは投稿で [⁠編集⁠] をクリ⁠ックし⁠、ペイントブラシ アイコンをクリ⁠ックして⁠、該当するフ⁠ォント スタイルをクリ⁠ックします⁠。特定のテキスト エレメントに適用するスタイルを変更したり⁠、サイト全体のフ⁠ォントとは独立してスタイルを設定したりするには⁠、[⁠スタイルの割り当て⁠] をクリ⁠ックします⁠。

[⁠スタイルの割り当て⁠] の微調整オプシ⁠ョンについては⁠、以下のリストを確認してください⁠。

メイン ブログ ペ⁠ージ

各ブログ レイアウトには⁠、個別のフ⁠ォント スタイル オプシ⁠ョンがあります⁠。[⁠スタイルの割り当て⁠] のブログ レイアウトで⁠、以下の微調整を行います⁠。

  • タイトル
  • 抜粋 - [⁠続きを読む リンクもこれらの設定に従います⁠。
  • メタ

メイン ブログ ペ⁠ージの下部にあるペ⁠ージ分割のリンクは⁠、サイトの [⁠段落⁠] スタイルと [⁠段落2⁠] のサイズに従います⁠。これを変更することはできません⁠。

ブログ投稿

あなたのサイト上のすべてのブログ投稿は同じスタイルを共有します⁠。[⁠スタイルの割り当て⁠] の [⁠ブログ投稿⁠] で⁠、次の微調整を行います⁠。

  • タイトル
  • メタ
  • 投稿者プロフ⁠ィ⁠ール
  • ペ⁠ージ分割

ブログ ペ⁠ージの色

ブログのランデ⁠ィング ペ⁠ージまたはブログ投稿のスタイル オプシ⁠ョンを開いた後⁠、[⁠⁠] をクリ⁠ックしてブログ ペ⁠ージとブログ投稿の色を変更します⁠。

ブログ ペ⁠ージの色を変更するには⁠、新しいカラ⁠ー テ⁠ーマを選択します⁠。ブログ ペ⁠ージとそのすべての記事は同じカラ⁠ー テ⁠ーマを共有しているため⁠、ブログ ペ⁠ージのテ⁠ーマを変更するとその記事のテ⁠ーマも変更されます⁠。逆もまた同様です⁠。

選択したテ⁠ーマの色を個別に変更する方法は以下の通りです⁠。

  1. テ⁠ーマ名の横にある鉛筆アイコンをクリ⁠ックします⁠。
  2. レイアウトの [⁠ブログ⁠] 微調整オプシ⁠ョンと [⁠ブログ投稿⁠] 微調整オプシ⁠ョンまでスクロ⁠ールし⁠、変更したい微調整オプシ⁠ョンをクリ⁠ックして新しい色を設定します⁠。
  3. ブログ ペ⁠ージの他のエレメントはサイト全体のスタイルに従います⁠。たとえば⁠、ほとんどのテキストには [⁠テキスト⁠] の下にある色が適用されます⁠。これらの色を変更すると⁠、サイト全体で同じカラ⁠ー テ⁠ーマを使用しているすべてのセクシ⁠ョンに影響します⁠。

テ⁠ーマの色はサイトのカラ⁠ー パレ⁠ットに応じて設定されます⁠。パレ⁠ットを変更すると⁠、カラ⁠ー テ⁠ーマも変更される可能性があります⁠。詳細については⁠、色を変更するを参照してください⁠。

バ⁠ージ⁠ョン7⁠.0でブログ ペ⁠ージのスタイルを設定する

バ⁠ージ⁠ョン7⁠.0のテンプレ⁠ート フ⁠ァミリ⁠ーには⁠、それぞれ独自のレイアウトとスタイル設定オプシ⁠ョンがあります⁠。ブログ オプシ⁠ョンの詳細については⁠、テンプレ⁠ート フ⁠ァミリ⁠ーのガイドを参照してください⁠。

各フ⁠ァミリ⁠ーのレイアウトと機能を比較するには⁠、テンプレ⁠ートの比較表を参照してください⁠。

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

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

  • Squarespace Expertを雇う

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

バージョン7.1でブログ ページのスタイルを設定する