ガイド/サイトのレイアウト/サイトのヘッダーにコンテンツを追加する

サイトのヘッダーにコンテンツを追加する

このガイドでは、ロゴ、ナビゲーションメニュー、検索ボックス、ソーシャルメディアアイコンなど、サイトのヘッダーに一般的な要素を追加する方法について説明します。ヘッダーに他の要素を追加する場合も、同じ手順を使用できます。

要件

このガイドの手順に従うには、サイトエディターをサポートしているテーマが必要です。サイトでサイトエディターを使用しているかどうかを簡単に確認するには、サイトのダッシュボード「外観」「エディター」で確認します。

要素を追加するには、ヘッダーテンプレートパーツにアクセスする必要があります。この操作を行ったことがない場合は、「ヘッダーをカスタマイズする」ガイドの手順に従ってください。

ヘッダーテンプレートパーツにロゴを追加するには、次の手順に従います。

  1. ヘッダーテンプレートパーツの編集中に、「+」ブロック挿入ツールボタンをクリックします。
  2. 「サイトロゴ」ブロックを検索します。
  3. 「サイトロゴ」ブロックをクリックして挿入します。
  4. 表示されるツールバーから「AI で生成」「ロゴを選択」をクリックしてロゴを選択します。
  5. ロゴの周りに表示されるハンドル (小さな円) をクリックしてドラッグし、大きくしたり小さくしたりします。
  6. ロゴを追加してから、「保存」ボタンをクリックして変更を保存します。

サイトロゴをアップロードすると、「サイトロゴ」ブロックを使用してさまざまな場所やテンプレートで再利用できます。

ナビゲーションメニューを追加する

ヘッダーにメニューを追加するには、次の手順に従います。

  1. ヘッダーテンプレートパーツの編集中に、「+」ブロック挿入ツールボタンをクリックします。
  2. 「ナビゲーション」ブロックを検索します。
  3. 「ナビゲーション」ブロックアイコンをクリックして挿入します。
  4. メニューの編集が完了したら、「保存」ボタンをクリックして変更を保存します。

ヘッダーにナビゲーションブロックを追加したら、ナビゲーションブロックの使用に関する詳細なガイドに従ってカスタマイズできます。リンクの追加、サブメニューの作成、リンク設定の変更などの方法を学ぶことができます。

ヘッダーに検索バーを追加するには、次の手順に従います。

  1. ヘッダーテンプレートパーツの編集中に、「+」ブロック挿入ツールボタンをクリックします。
  2. 「検索」ブロックを検索します。
  3. 「検索」ブロックアイコンをクリックしてヘッダーに挿入します。
  4. 完了したら、「保存」ボタンをクリックして変更を保存します。

検索ブロックの使い方については、こちらを参照してください。検索ボタンのテキストの変更、フォントと色の変更、検索ボックスの幅の調整などの方法を学ぶことができます。

ソーシャルメディアアイコンを追加する

ヘッダーにソーシャルアイコンを追加するには、次の手順に従います。

  1. ヘッダーテンプレートパーツの編集中に、「+」ブロック挿入ツールボタンをクリックします。
  2. 「ソーシャルアイコン」ブロックを検索します。
  3. 「ソーシャルアイコン」ブロックアイコンをクリックしてヘッダーに挿入します。
  4. 完了したら、「保存」ボタンをクリックして変更を保存します。

ソーシャルアイコンブロックの使い方については、こちらを参照してください。ソーシャルプロフィールの追加、アイコンの種類の変更、アイコンのスタイル設定や削除などの方法を学ぶことができます。

ヘッダーコンテンツを並べ替える

ヘッダーに複数の要素を追加したら、それらの配置を調整して視覚的に魅力的なレイアウトを作成しましょう。ヘッダーのコンテンツの配置調整について詳しくはこちらを参照してください。

Copied to clipboard!