サポートに戻る サイトをデザインする サイトエディター サイトエディターを使用してサイドバーを追加する

サイトエディターを使用してサイドバーを追加する

多くのサイト、特にブログでは、写真、自己紹介文、他の投稿へのリンク、ソーシャルメディアのプロフィールなど、追加の情報を表示するためのサイドバーが設けられています。

このガイドでは、サイトエディターを使用してサイドバーを追加する方法について説明します。このガイドで説明する方法を使用するには、サイトエディターをサポートするテーマを使用する必要があります。

通常サイドバーの要素は、70/30のレイアウトの「カラム」ブロックを使用して追加でき、小さい方のカラムがサイドバーになります。

「外観サイトエディター」に進み、左上にある自分のサイトのアイコンをクリックし、「テンプレート」を選択します。 次に必要に応じて、次の手順を実行します。

空白テンプレートでサイドバーを作成する

  1. 「空白」テンプレートを選択します。
  2. 「+」ブロック挿入ボタンをクリックして「カラム」ブロックを挿入します。
  3. 2カラムのレイアウトを設定し、「70/30」を選択します。
  4. 小さい方のカラムに、サイドバーに表示したいブロックを追加します。
  5. 大きい方のカラムには、「投稿コンテンツ」 ブロックを追加します。これにより、後で空白のテンプレートを適用するページや投稿のコンテンツが動的に表示されます (ステップ7を参照してください)。
  6. 「保存」をクリックします。
  7. サイドバーを表示させるページや投稿を編集します。右側の設定で、「テンプレート」設定を探します。「空白」テンプレートを選択します。

これで、「空白」テンプレートを使用しているページや投稿で、ページや投稿のコンテンツの横にサイドバーが表示されるようになります。

インデックステンプレートやアーカイブテンプレートにサイドバーを追加する

「インデックス」テンプレートは、自分の投稿を表示するものです。「アーカイブ」テンプレートは、特定のカテゴリーやタグを含む投稿を表示します。このどちらかのテンプレートにサイドバーを追加すると、投稿ページや、カテゴリーページやタグページにサイドバーが表示されるようになります。

「外観サイトエディター」に進み、左上にある自分のサイトのアイコンをクリックし、「テンプレート」を選択します。その後、以下の操作を実行します。

  1. 「インデックス」テンプレートを選択します。
  2. 「リスト表示」から「クエリーループ」ブロックを選択し、「カラム」ブロックに変換します。
  3. 「カラム」ブロックの設定で、「カラム」ブロックを2カラムに設定します。
  4. 「リスト表示」で各カラムを選択し、一方を70%、もう一方を30% に設定します。
  5. サイドバーに表示するブロックを小さい方のカラムに追加します。
  6. 「保存」をクリックします。

同様に、「ページ」、「フロントページ」、「個別投稿」、「404」「検索」などの他のテンプレートでもこの手順に従います。

再利用可能な「サイドバー」要素を作成するには、「テンプレートパーツ」ブロックとして保存して使用することをお勧めします。これにより、各テンプレートでゼロからサイドバーを構築するのではなく、完成したサイドバーを後で簡単に追加できるようになります。

Copied to clipboard!