WordPressの編集（未完成）

WordPressでは、コンテンツ更新からデザイン変更まで、複数の方法でサイトを編集できます。

ブロックテーマ（フルサイト編集）ノーコードでのWebサイト制作

WordPress6.7では新しいデフォルトテーマ「Twenty Twenty-Five」

おすすめブロックテーマ

クラシックテーマ

フルサイトエディター（FSE）で編集

フルサイト編集とは、Webサイトを構成するヘッダー、フッター、コンテンツエリアといった全ての要素を、「ブロック」と呼ばれる部品の組み合わせだけで、視覚的に構築できる。

手順

1. 管理画面で「外観 » エディター」を開く（ブロックテーマ使用時）。
2. 編集したいテンプレートやパーツ（ヘッダー・フッター等）を選択。
3. ブロックを追加・削除し、スタイルや色を調整。
4. 「保存」をクリックして変更を反映。

Gutenbergブロックエディターでページ・投稿編集

手順

1. 「固定ページ」または「投稿」から編集対象を選択。
2. 左上の「＋」ボタンで**ブロック（テキスト・画像・動画等）を追加。
3. サイドバーでブロックの余白・色・配置などを設定。
4. プレビューで確認後、「更新」または「公開」。

※クイック編集機能でタイトルやURLスラッグなども即時変更可能。

WordPress ブロックエディター

各段落、画像、動画はコンテンツの個別の「ブロック」として表示されます。

各ブロックには、色、幅、配置などを変更するための独自のコントロールが付属しています。

ブロックエディタで編集できるのは、各ページに共通する部分（ヘッダー・フッター・サイドバー）を除いた、メインコンテンツの部分
これらは、ブロックを選択すると自動的に表示または非表示になります。

利用可能なブロックはすべてブロックライブラリにあります。

アイコンが表示されていれば、そこからアクセスできます。

各ブロックには、色、幅、配置などを変更するための独自のコントロールが付属しています。

これらは、ブロックを選択すると自動的に表示または非表示になります。

ブロックパターンの作成方法

WordPress 6.3以降は、自分でパターンを作成できるようになりました。

1. パターンに変えたいブロックを選びます。
2. 追加設定を開く3点メニューをクリックしてください。
3. 「パターン/再利用可能なブロックを作成」をクリックしてください。
4. ここでパターンの名前が登場します。
5. パターンを同期するには、同期オプションをオンにしてください。パターンを編集すると、使用された場所で更新されます。
6. 「作成」をクリックします。

その後、Block Inserterの「Patterns -> My Pattern」または「Synced Patterns(重なり合う菱形アイコン)」で作成したパターンを見つけることができます。

左側のサイドバー

左側のサイドバーには次のオプションがあります。

• ナビゲーション: サイトのナビゲーションメニューを管理します。
• スタイル: サイトの色、フォント、その他のデザインの側面をカスタマイズします。
• ページ: サイトの個々のページのコンテンツを編集します。
• テンプレート: サイトのコンテンツの構造レイアウトを編集します。
• パターン: テンプレートの小さな部分 (ヘッダーやフッターなど) と作成したパターンを編集します。

ホームページはこれらのオプションの右側に表示されます。このエリアの任意の場所をクリックすると左側のサイドバーが閉じ、エディターにホームページが開きます。

以下のガイドでは、ヘッダー内のコンテンツのレイアウトを編集する方法、新しいコンテンツを追加する方法、特定のページやテンプレートに特定のヘッダーを使用する方法について説明します。ヘッダーナビゲーションの作り方（Gutenberg / ブロックテーマ）

サイトエディター

サイトエディターでは、ブロックを使用して、ヘッダーからフッターまでサイトのあらゆる要素をデザインできます。このガイドではこのエディターについて説明します。

サイトエディターにアクセスするには、次の手順に従います。

1. サイトのダッシュボードから開始します。
2. 左側の「外観」を見つけます。
3. 「エディター」をクリックします。

ヘッダーを編集する

　ヘッダーは、ホームページにおいて非常に重要な役割を果たしており、デザインや配置に特に配慮が必要です。
　ユーザーの利便性を考慮し、わかりやすく魅力的なヘッダーを作成することで、サイト全体の印象を向上させることができます。
　メニューに階層構造を入れる場合、メニューの項目をクリックまたはマウスオーバーするとメガメニューが表示されて下層ページへのリンクが展開される仕様が効果的です。
　メガメニューがあることで、常に表示されるメニューはシンプルでありながら、ユーザーが知りたい情報にすぐにたどり着けるようにサポートできます。

ヘッダーをカスタマイズするには、ヘッダーのテンプレートパーツを編集します。このテンプレートパーツを編集すると、このヘッダーが表示されているサイトのすべてのページに変更が適用されます。

ヘッダーのテンプレートパーツにアクセスするには、次の手順に従います。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動し、「サイトエディター」を開きます。
3. 右側のホームページのプレビューをクリックするか、「パターン」タブを選択して特定のテンプレートパーツをカスタマイズします。
4. エディターの左上隅にある「リストビュー」ボタンをクリックします。3本の横線が上下に並んでいる形のアイコンです。
5. リストビューでヘッダーのテンプレートパーツを選択します。
6. ヘッダー内のコンテンツを追加、削除、整列できるほか、ヘッダーパターンから開始することもできます。

• WordPress管理画面 → 外観 → エディター（サイトエディター）
• 左側のテンプレートパーツから 「ヘッダー」 を選択

2. ヘッダー内にブロックを配置

よく使うブロック：

• サイトロゴ
• サイトタイトル
• ナビゲーション（Navigation）
• グループ（Group）
• 行（Row）

ヘッダーは通常、 Row（横並び） → 左にロゴ、右にナビゲーション という構成が多い。

ナビゲーションブロックの設定

● メニューを追加

1. 「ナビゲーション」ブロックを追加
2. 「メニューを作成」または既存メニューを選択
3. メニュー項目（固定ページ・カスタムリンクなど）を追加

● ドロップダウン（サブメニュー）

• メニュー項目を選択 → 「サブメニューを追加」
• 階層構造を作ることでドロップダウンが自動生成されます

● スタイル調整

• 文字色・背景色
• ホバー時の色
• メニューの配置（左・中央・右）
• モバイル時のハンバーガーメニュー表示

ブロックテーマでのヘッダー編集のポイント

グループ（Group）で背景色や余白をまとめて管理

Row（行）で横並びレイアウトを簡単に構築

Navigationブロックはレスポンシブ対応済み

ヘッダーパターンを使用する

あらかじめ作成されたヘッダーブロックパターンを選択すると、プロがデザインした美しいヘッダーレイアウトをすばやく挿入できます。ヘッダーをヘッダーパターンに置き換える方法については、次の手順を参照してください。

1. 「外観」→「エディター」の順に移動します。
2. 右側のホームページのプレビューをクリックするか、「パターン」タブを選択して特定のテンプレートパーツをカスタマイズします。
3. エディターの左上隅にある「リストビュー」ボタンをクリックします。3本の横線が上下に並んでいる形のアイコンです。
4. リストビューでヘッダーのテンプレートパーツを選択します。
5. ブロック設定サイドバーで、さまざまな「デザイン」オプションを参照します。
6. デザインをクリックしてヘッダーに適用します (変更を取り消すことも、別のヘッダーデザインを選択することもできます)。
7. 「保存」ボタンをクリックして変更を保存します。