SANGOテーマで固定ページをデザインする完全ガイド

WordPressでブログを運営する上で、お問い合わせページやプライバシーポリシー、プロフィールページなど、時系列に左右されない「固定ページ」は非常に重要です。SANGOテーマは、その高いデザイン性と直感的な操作性で、初心者の方でもプロのような固定ページを簡単に作成できます。

SANGOの大きな魅力は、WordPress 5.0以降で標準搭載されたブロックエディター（Gutenberg）への完全対応です。HTMLやCSSの専門知識がなくても、直感的に操作し、洗練されたデザインの固定ページや記事を作成できる点が特徴です。

このガイドでは、SANGOテーマを使って固定ページをデザインし、SEOに強いページに仕上げるための詳細な設定方法までを徹底的に解説します。

1. SANGOのブロックエディターと機能

SANGOは、WordPress 5.0以降で標準搭載されたブロックエディター（Gutenberg）に完全に最適化されており、様々な種類のブロックを提供しています。これにより、文章や画像などの要素を「ブロック」という単位で管理し、直感的に配置やレイアウトを変更できます。

1-1. SANGOの豊富なブロックの種類

SANGOは30種類以上のブロックを用意しており、国内テーマの中でも最多のブロック数を誇ります。これにより、記事執筆の時短と表現の幅を大幅に広げることができます。

【主なブロックと活用例】

• 段落: 通常のテキストを入力します。
• 見出し: 記事の骨格となる見出しを作成します。SANGOには30種類以上のスタイルがあり、アイコンやフォントサイズ、色も設定可能です。H1～H6の6段階があり、通常H1は記事タイトルに、本文中ではH2以降を階層順に使用することが推奨されます。
  • 活用例: 記事内で情報を整理し、読者が読みやすくするために適切な階層の見出しを使い分けましょう。
• 画像: 画像を挿入し、位置や大きさ、代替テキスト（Altテキスト）の設定が可能です。
  • 活用例: 記事の内容を視覚的に補強したり、アイキャッチとして読者の目を引いたりするのに使います。
• リスト（箇条書き）: 情報を整理して見やすく表示します。シンプルなスタイルからカラーバリエーションまで豊富です。
  • 活用例: 手順や箇条書きの情報を分かりやすく伝えたい時に使います。
• テーブル（表）: 情報を整理した表を簡単に挿入できます。SANGOはテーブルのレスポンシブ対応も可能です。
  • 活用例: 比較表や料金表など、複数の情報を整理して見せたい時に便利です。
• 吹き出し: 読者に親しみやすいメッセージを伝える際に役立ちます。画像選定からカラーまで自由に設定できます。
  • 活用例: キャラクターを設定して、会話形式で情報を伝えたり、読者へのアドバイスを分かりやすく表現したりするのに使います。
• ボタン: 特定の行動を促すリンクボタンを追加します。40種類以上のスタイルとカラーバリエーションがあります。ボタンリンクはクリック率が高いので積極的に活用することが推奨されます。
  • 活用例: 「詳しくはこちら」「資料請求はこちら」など、読者に次の行動を促す際に設置します。
• ボックス: 記事内の情報を囲んで強調するブロックです。24種類のスタイルと豊富なカラーが用意されています。
  • 活用例: 注意事項やポイント、補足情報などを目立たせたい時に使います。
• FAQ: よくある質問とその回答をまとめるのに適しています。
  • 活用例: サービス内容に関するQ&Aや、ユーザーからの問い合わせが多い内容をまとめる際に利用します。
• メッセージ: 特定のメッセージを表示するためのブロックです。
  • 活用例: 「この記事は〇〇に関する情報です」「期間限定のお知らせ」など、読者に伝えたいメッセージを目立たせます。
• アコーディオン: クリックで内容の表示/非表示を切り替えられるブロックで、情報が多い場合に役立ちます。
  • 活用例: FAQのように、最初は質問だけを表示して回答はクリックで展開するような場合に使うと、ページがすっきり見えます。
• タブ: 複数の情報をタブ形式で切り替えて表示できます。
  • 活用例: 複数のサービス内容をコンパクトにまとめたり、カテゴリー別に情報を表示させたりするのに便利です。
• プロフィール: 著者情報などを表示するブロックです。
  • 活用例: 記事下やサイドバーに著者情報を表示させる際に使います。
• 条件ブロック: 特定の条件に基づいてブロックの表示/非表示を切り替えることができます。
  • 活用例: 特定のデバイス（PC/スマホ）のみに表示させたいコンテンツや、ログインユーザーにのみ表示させたいコンテンツがある場合に活用します。
• ヒーロー: トップページなどに使う大きな画像やテキストのセクションです。
  • 活用例: サイトの顔となるトップページで、インパクトのあるビジュアルとキャッチコピーを表示させるのに使います。
• 記事一覧ブロック: 特定の条件（カテゴリー、人気順など）で記事の一覧を表示できます。
  • 活用例: 関連記事の表示や、特定のカテゴリーの最新記事をまとめて表示させたい時に活用します。

1-2. SANGO Landの活用

SANGO Landは、デザイン済みのSANGOブロックパターンを簡単にコピーできるギャラリーサイトです。HTMLやCSSの知識がない初心者でも、プロが作ったような洗練されたデザインをすぐに自分のサイトに適用できます。

【SANGO Landの活用方法】

1. SANGO Landにアクセス: https://sango-theme.com/land/
2. デザインの選択: ギャラリーから希望するデザインのブロックパターンを探します。カテゴリーや目的（トップページ、LP、記事内など）で絞り込むことも可能です。
3. コピー: 気に入ったブロックの「コピーボタン」をクリックします。
4. 貼り付け: WordPressの編集画面に戻り、コンテンツを配置したい場所に**貼り付ける（Ctrl+VまたはCommand+V）**だけで、複雑な知識なしに洗練されたデザインを実装できます。
   • トップページやLPの作成: SANGO LandにはトップページやLP（ランディングページ）用のデザインも豊富に用意されており、数クリックでスタイリッシュなページが完成します。
   • 450種類以上のブロック: 非常に多くのパターンが提供されており、初心者でも簡単にブログをカスタマイズできると評価されています。

1-3. カスタマイズを強化するブロック関連機能

SANGOは、ブロックエディターでのカスタマイズをさらに自由にするための機能を豊富に提供しています。

• カスタムプリセット: 一度作成したブロックの設定内容（色、サイズ、スタイルなど）を保存し、次回以降に使い回せる機能です。
  • 活用例: 毎回同じデザインのボタンやボックスを使いたい場合に、プリセットとして保存しておけば、デザインの統一感を保ちつつ、作業時間を大幅に短縮できます。
• コンテンツブロック: エディターで作成したブロックを、サイトの共通パーツ（ヘッダーやフッター、サイドバーなど）として利用できます。SANGO 3.0以降で、ヘッダーやフッターをブロックエディターで編集できるようになりました。
  • 活用例: 全ページ共通のお知らせバーや、サイト下部の定型文などをコンテンツブロックとして作成しておけば、一箇所修正するだけで全ページに反映させることができます。
• カスタムCSS: 特定のブロックにのみ限定的にCSSを適用できる機能です。サイト全体に影響を与えることなく、個別のデザイン調整が可能です。
  • 活用例: 特定のボックスの文字色だけを変えたい、特定の画像の枠線を追加したい、といった場合に活用します。スタイルを適用したいブロックを選択し、右メニューの「設定パネル」からカスタムCSSの項目を見つけ、CSSを記述します。
• カスタム書式機能: テキストやリンクに対する装飾をCSSを使ってカスタマイズできる機能です。
  • 活用例: 特定のキーワードを強調したい場合や、リンクに独自のスタイルを適用したい場合に便利です。
• カスタムカラー: エディターのカラーパレットにユーザー定義の色を追加できます。
  • 活用例: ブランドカラーを設定しておけば、一貫したデザインでサイトを構築できます。
• カスタムJS: 特定のブロックにのみJavaScriptを適用できる機能です。
  • 活用例: 特定の要素にアニメーションを追加したり、インタラクティブな機能を組み込んだりする際に高度なカスタマイズが可能です。

2. 固定ページのデザインと詳細設定チュートリアル

WordPressにおける固定ページは、時系列で更新される投稿記事とは異なり、お問い合わせページやプライバシーポリシー、会社概要など、サイト内で常に表示しておきたい静的なコンテンツに適しています。

2-1. 新しい固定ページの作成

【操作手順】

1. WordPressの管理画面にログインします。*
2. 左メニューの「固定ページ」にカーソルを合わせ、「新規固定ページを追加」をクリックします。
3. 固定ページの編集画面が表示されます。

2-2. ブロックエディターでのコンテンツ作成

【操作手順】

1. タイトルの入力: ページの上部にある入力欄に固定ページのタイトルを入力します（例: 「お問い合わせ」）。このタイトルは、サイトのメニューや検索結果にも表示されます。
2. ブロックの追加: 執筆エリアで「＋」ボタンをクリックし、必要なブロックを選択して追加します。
   • 段落: 通常のテキストを入力します。
   • 画像: 「画像ブロック」を追加し、画像をアップロードまたはメディアライブラリから選択します。**代替テキスト（Altタグ）**の設定を忘れずに行いましょう。これはSEOにも有効です。
   • リスト: 「リストブロック」を追加し、箇条書きや番号付きリストを作成します。
   • テーブル: 「テーブルブロック」を追加し、行と列数を指定して表を作成します。
   • 吹き出し: 「SANGO吹き出しブロック」を使用して、キャラクターの吹き出し形式でテキストを表示します。
   • ボタン: 「SANGOボタンブロック」を使用して、リンク付きのボタンを設置します。様々なデザインから選択できます。
   • YouTube動画の埋め込み: 「埋め込みブロック」を使用し、YouTube動画のURLを貼り付けるだけで簡単に埋め込めます。
   • SANGO Landからのデザイン適用: SANGO Land にアクセスし、希望するデザインのブロックパターンをコピーして、固定ページの編集画面に貼り付けます。これは特にトップページやLPのデザインに役立ちます。
3. 問い合わせフォームの設置（例: Contact Form 7）: ブログ運営に必須とされるお問い合わせフォームは、固定ページに設置することが推奨されます。
   • Contact Form 7のインストールと有効化:
     1. WordPress管理画面の「プラグイン」から「新規プラグインを追加」をクリックします。
     2. 検索窓に「Contact Form 7」と入力し、表示されたプラグインの「今すぐインストール」をクリックし、その後「有効化」をクリックします。
   • Contact Form 7の設定:
     1. WordPress管理画面の左メニューに新しく追加された「お問い合わせ」から「新規追加」をクリックします。
     2. フォーム名（例: 「一般お問い合わせ」）を設定し、「フォーム」「メール」「メッセージ」タブで内容を設定します。特に「メール」タブでの送信先設定は重要です。ご自身のメールアドレスを正確に設定してください。
     3. 設定後、画面上部に表示される緑色のボックス内の「ショートコード」をコピーします。例：[contact-form-7 id="〇〇〇" title="お問い合わせフォーム"]
   • 固定ページへの設置:
     1. 先ほど作成中の固定ページの編集画面に戻ります。
     2. 「＋」ボタンをクリックし、「ショートコード」ブロックを追加します。
     3. コピーしたショートコードをショートコードブロックに貼り付けます。
     4. スパム対策: お問い合わせフォームにはスパムメールが届く可能性があるため、reCAPTCHAなどの設定も強く推奨されます。Contact Form 7とreCAPTCHAを連携させる設定は、Contact Form 7の公式ドキュメント（https://contactform7.com/ja/）や多くの解説サイトで詳しく説明されていますので、そちらもご参照ください。

2-3. プレビューと公開

コンテンツが完成したら、必ず表示を確認しましょう。

【操作手順】

1. 画面右上の「プレビュー」ボタンをクリックし、「新しいタブでプレビュー」を選択して、実際の表示を確認しましょう。
2. パソコンでの表示だけでなく、スマートフォンやタブレットでのレイアウトの崩れがないか、文字の大きさは適切かなどを確認します。
3. 問題がなければ、画面右上の「公開」ボタンを2回クリックしてページを公開します。

3. 詳細部分の設定チュートリアル

固定ページのデザインに加えて、SEO（検索エンジン最適化）やサイトの管理を最適化するために、以下の詳細設定を行うことが重要です。

3-1. パーマリンク (URLスラッグ) の設定

パーマリンクは、WordPressサイトの個々の投稿やページの恒久的なURLです。人間にも検索エンジンにも分かりやすいURL構造を作ることがSEOとユーザーエクスペリエンスの向上に役立ちます。

【操作手順】

1. 固定ページの編集画面で、右側の**「投稿設定」（または「固定ページ」タブ）セクション**にある「URL」をクリックします。
2. URLの一部であるスラッグを編集します。スラッグはURLの一部を指す言葉であり、Webサイト管理者によって自由に定義される文字列です。
   • 例: https://example.com/contact/ の /contact/ 部分がスラッグです。
3. スラッグには、**半角英数字とハイフン（-）**を使用することを強く推奨します。日本語を使用すると、URLがエンコードされて読みにくくなったり、リンク切れの原因になることがあります。

【注意点】

• ページ公開後にパーマリンクを変更すると、Googleの評価がリセットされたり、SNSでのシェア回数がリセットされたり、既存のリンクが無効になったりするなど、SEOに悪影響を及ぼす可能性があります。もし変更が必要な場合は、古いURLから新しいURLへの301リダイレクトの設定を強くお勧めします。301リダイレクトは、レンタルサーバーの機能やWordPressプラグイン（例: Redirection）で設定できます。

3-2. アイキャッチ画像の設定

アイキャッチ画像は、ページの顔となる画像で、SNSシェア時やブログのトップページ、カテゴリー一覧などで魅力的に見せるために重要です。

【操作手順】

1. 固定ページの編集画面の右側にある**「アイキャッチ画像」セクション**で、「アイキャッチ画像を設定」をクリックします。
2. メディアライブラリから画像を選択するか、新しくアップロードします。
3. アップロードまたは選択後、画像の編集画面で「代替テキスト (Altタグ)」を設定しましょう。これは検索エンジンが画像の内容を理解しやすくなり、画像検索での上位表示に繋がり、SEO効果が期待できます。画像の内容を具体的に説明するテキストを入力してください。

3-3. メタディスクリプションの設定

メタディスクリプションは、Google検索結果のタイトル下に表示される説明文です。ユーザーが検索結果をクリックするかどうかを判断する重要な要素となります。

【操作手順】

1. SANGOテーマ自体にメタディスクリプションの入力機能が備わっている場合や、「All in One SEO」や「Yoast SEO」などのSEOプラグインを導入することで設定できます。
   • SANGOテーマの機能を利用する場合: WordPress管理画面の左メニュー「SANGO設定」の中にSEO関連の設定項目がある場合があります。
   • SEOプラグインを利用する場合: プラグインを導入している場合は、固定ページの編集画面下部にSEOプラグインの設定ボックスが表示されます。
2. 記事の内容を要約し、メインキーワードや関連キーワードを含めて70文字〜120文字程度（PC表示で約120文字、モバイルで約70文字）で記述することが推奨されます。読者の興味を引くような魅力的な文章を心がけましょう。

3-4. ヘッダー・フッターのカスタマイズ

SANGOテーマのバージョン3.0以降では、ヘッダーやフッターをブロックエディターで柔軟にカスタマイズできるようになりました。

【操作手順】

1. まず、カスタマイズしたいヘッダーやフッターを「コンテンツブロック」として作成します。
   • WordPress管理画面のサイドメニューから「コンテンツブロック」をクリックし、「新規追加」で新しいコンテンツブロックを作成します。
   • エディター画面で/headerまたは/footerと入力することで、それぞれのブロックを呼び出せます。コンテンツブロックでヘッダーやフッターのデザインを自由に構築し、公開します。SANGO Landにもフッター用のブロックパターンがありますので、そちらも参考にすると良いでしょう。
2. 次に、作成したコンテンツブロックをヘッダーやフッターに割り当てます。
   • WordPress管理画面の「外観」→「カスタマイズ」をクリックします。
   • 左側のメニューから「デザイン・レイアウト」→「コンテンツブロック」に進みます。
   • 「ヘッダー」と「フッター」の項目で、先ほど作成したコンテンツブロックをそれぞれ選択・割り当て、「公開」をクリックして保存します。

3-5. カスタムCSSの活用

SANGOのエディターにはカスタムCSS機能があり、特定のブロックにのみCSSを適用できます。これにより、サイト全体に影響を与えることなく、個別のデザイン調整が可能です。

【操作手順】

1. スタイルを適用したいブロックを選択します。
2. 右メニューの「設定パネル」にある「高度な設定」を展開し、「追加CSSクラス」または「カスタムCSS」の項目を見つけ、ここにCSSを記述します。
   • 例: 特定の段落ブロックに背景色を付けたい場合、そのブロックを選択し、カスタムCSSにbackground-color: #f0f8ff;などと記述します。

4. 初心者向け重要事項と注意点

快適なWordPressブログ運営のために、以下の点に注意しましょう。

• アップデートの習慣化: WordPress本体、SANGOテーマ、および使用しているプラグインは、常に最新の状態に保つことが推奨されます。これはセキュリティの強化、機能の改善、バグ修正に不可欠です。SANGOはアップデート頻度が高いテーマの一つです。WordPress管理画面の「ダッシュボード」＞「更新」から定期的に確認・実行しましょう。
• バックアップの定期的な取得: 万が一のトラブル（改ざんやデータ消失など）に備え、定期的にサイト全体のバックアップを取るようにしましょう。多くのレンタルサーバーが自動バックアップ機能を提供しています。また、「UpdraftPlus – Backup/Restore」のようなWordPressプラグインも非常に便利です。
• プラグインの厳選: プラグインはWordPressの機能を拡張する便利なツールですが、導入しすぎるとサイトの表示速度が低下したり、動作の不具合を引き起こしたりする可能性があります。必要なものだけを厳選し、不要なプラグインは無効化・削除しましょう。SANGO自体には高速化機能が搭載されているため、関連する高速化プラグインは不要な場合があります。
• 子テーマの利用: カスタマイズを行う際は、親テーマのファイルを直接編集するのではなく、**子テーマ（Child Theme）**を利用することをお勧めします。これにより、テーマのアップデートによってご自身で加えたカスタマイズ内容が上書きされることを防げます。SANGOの子テーマは、テーマ購入時にダウンロードしたファイルに含まれています。子テーマをインストールし、有効化してからカスタマイズを行いましょう。

SANGOテーマの固定ページ作成：ブロックエディター左側パネルを徹底解説

WordPressのSANGOテーマで固定ページや投稿記事を作成する際、画面の左側に表示されるパネルには「ブロック」「パターン」「メディア」という3つの重要なタブがあります。これらを効果的に使いこなすことで、より効率的かつ魅力的なコンテンツを作成できます。

ここでは、それぞれのタブが持つ機能と使い方について詳しく解説します。

1. 「ブロック」タブ

「ブロック」タブは、コンテンツを構成する個々の要素を追加するための最も基本的な機能です。文章、画像、見出し、リストなど、WordPressで作成できるあらゆるコンテンツは「ブロック」として扱われます。

1-1. 「ブロック」タブの概要

• 機能: さまざまな種類のブロックを検索し、記事の本文に挿入します。
• 配置: エディター画面の左上にある「＋」ボタンをクリックするか、記事の任意の場所でEnterキーを押して「＋」アイコンをクリックすると、左側に「ブロック」タブを含むパネルが表示されます。
• 特徴: SANGOテーマ独自のブロックが豊富に用意されているため、デザイン性の高い記事を簡単に作成できます。

1-2. 「ブロック」タブでできること

1-2-1. ブロックの検索

• 上部の検索窓にキーワード（例: 「見出し」「画像」「吹き出し」など）を入力すると、関連するブロックが絞り込まれて表示されます。
• 活用例: 使いたいブロックがどこにあるか分からない場合や、特定のブロックを探したい場合に便利です。

1-2-2. よく使うブロック

• 最近使用したブロックや、よく使うブロックが自動的に表示されます。
• 活用例: 毎回検索する手間を省き、効率的に記事を執筆できます。

1-2-3. カテゴリごとのブロック表示

• ブロックは「テキスト」「メディア」「デザイン」「ウィジェット」「テーマ」「埋め込み」「SANGOブロック」など、カテゴリ別に整理されています。
• 「SANGOブロック」カテゴリの重要性:
  • SANGOテーマ独自の便利なブロック（例: 吹き出し、ボタン、ボックス、FAQ、アコーディオンなど）がこのカテゴリにまとまっています。
  • これらのブロックを使うことで、HTMLやCSSの知識がなくても、SANGOならではの「心地よい」デザインや機能を追加できます。
  • 活用例:
    • 吹き出し: 会話形式で情報を伝えたり、キャラクターを使って親しみやすいブログにしたい場合に。
    • ボタン: 読者に特定の行動（例: 外部リンクへの誘導、お問い合わせ）を促したい場合に、デザイン性の高いボタンを設置。
    • ボックス: 記事内の重要なポイントや注意書きを目立たせたい場合に、多彩なデザインの囲み枠を挿入。
    • FAQ: よくある質問とその回答を折りたたみ形式で表示し、ページをすっきり見せる。
    • アコーディオン: 情報量が多いセクションをコンパクトにまとめ、必要な情報だけを展開して読めるようにする。

1-2-4. ブロックの挿入方法

• クリックして挿入: 目的のブロックをクリックすると、現在のカーソル位置にブロックが挿入されます。
• ドラッグ&ドロップ: ブロックを左側パネルからエディター内の好きな場所にドラッグ&ドロップして挿入することもできます。
• ブロックの移動: 挿入後も、ブロックを選択して表示される矢印アイコンやドラッグハンドルを使って、簡単に位置を移動できます。

1-3. SANGOブロックを使いこなすコツ

SANGOテーマを最大限に活用するには、「SANGOブロック」の機能を理解することが不可欠です。これらのブロックは、単なる見た目の装飾だけでなく、読者の読みやすさやサイトの機能性向上に大きく貢献します。

• スタイルオプションの活用: 多くのSANGOブロックには、色、アイコン、表示形式などの多様なスタイルオプションが用意されています。ブロックを選択した際に右側に表示される「ブロック設定」パネルでこれらのオプションを調整し、サイトのデザインに合わせたカスタマイズを行いましょう。
• レスポンシブ対応: SANGOのブロックは基本的にレスポンシブ対応（PC、スマホ、タブレットなど、どのデバイスで見ても最適に表示される）しています。安心して利用できます。

2. 「パターン」タブ

「パターン」タブは、あらかじめデザインされた複数のブロックの組み合わせ（ブロックパターン）を挿入できる機能です。一からブロックを組み立てる手間を省き、統一感のあるセクションを素早く作成できます。

2-1. 「パターン」タブの概要

• 機能: テキスト、画像、ボタンなどがセットになった、デザイン済みの「ブロックの集合体」を挿入します。
• 配置: 「ブロック」タブと同様に、エディター画面の左上にある「＋」ボタンをクリックするか、記事の任意の場所でEnterキーを押して「＋」アイコンをクリックすると、左側に表示されます。
• 特徴: SANGOテーマには、独自の高品質なブロックパターンが多数用意されており、特に「SANGO Land」との連携が強力です。

2-2. 「パターン」タブでできること

2-2-1. パターンの検索とカテゴリ分け

• 上部の検索窓でパターンを検索したり、カテゴリ（例: 「テキスト」「ギャラリー」「列」「SANGOパターン」など）で絞り込んだりできます。
• 「SANGOパターン」カテゴリ: SANGOテーマが独自に提供する、デザイン性の高いセクションやレイアウトがこのカテゴリに表示されます。

2-2-2. SANGO Landとの連携（特におすすめ！）

• SANGO Landは、SANGOテーマの公式が提供する450種類以上のデザイン済みブロックパターンが公開されているギャラリーサイトです。
• 【SANGO Landの活用方法】
  1. SANGO Landにアクセス: https://sango-theme.com/land/
  2. サイト内で気に入ったセクションやパーツを見つけたら、「コピーボタン」をクリックします。
  3. WordPressの固定ページ（または投稿）編集画面に戻り、コンテンツを挿入したい場所で**貼り付ける（Ctrl+VまたはCommand+V）**だけで、複雑なHTMLやCSSの知識なしに洗練されたデザインを実装できます。
  • 活用例:
    • トップページの作成: 「ヒーローセクション」「サービス紹介」「お客様の声」など、トップページを構成する多様なパーツが用意されています。
    • LP（ランディングページ）の作成: 目的達成のための魅力的なCTA（行動喚起）セクションや、商品・サービスの紹介セクションを素早く構築できます。
    • 記事内の装飾: 記事の途中に挿入することで、視覚的な変化を与え、読者の飽きを防ぎます。
• SANGO Landからコピーしたパターンは、WordPressエディターの「パターン」タブには直接表示されません。あくまでコピー＆ペーストで挿入する形になります。

2-2-3. パターンの挿入と編集

• 目的のパターンをクリックすると、エディターにまとめてブロックが挿入されます。
• 挿入されたパターンは、個々のブロックとして編集可能です。テキストや画像を入れ替えたり、一部のブロックを削除・追加したりして、自由にカスタマイズできます。

2-3. 「パターン」タブを使いこなすコツ

• デザインの一貫性: パターンを使うことで、サイト全体や特定のページ内でデザインに一貫性を持たせることができます。
• 作業時間の短縮: 一からブロックを組み立てるよりも圧倒的に早く、プロのようなデザインを実現できます。
• カスタマイズの土台: デザインのアイデアが浮かばない場合でも、パターンを土台として、そこから自分好みにカスタマイズしていくことで、オリジナリティのあるページを作成できます。

3. 「メディア」タブ

「メディア」タブは、WordPressのメディアライブラリに保存されている画像や動画を、直接記事に挿入したり管理したりするための機能です。

3-1. 「メディア」タブの概要

• 機能: WordPressにアップロード済みの画像や動画を閲覧・検索し、記事に挿入できます。また、新たなファイルを直接アップロードすることも可能です。
• 配置: 「ブロック」タブや「パターン」タブと同じパネル内に表示されます。

3-2. 「メディア」タブでできること

3-2-1. メディアライブラリからの挿入

• WordPressにすでにアップロードされている画像や動画が一覧で表示されます。
• 検索窓を使って、ファイル名や代替テキストに含まれるキーワードでメディアを検索できます。
• 活用例: 過去にアップロードした画像を再度利用したい場合に便利です。

3-2-2. 新規ファイルのアップロード

• 「ファイルをアップロード」ボタンをクリックすると、パソコンから直接画像や動画ファイルをアップロードできます。
• 活用例: 新しく作成した画像や、ウェブ上で見つけたフリー素材などを記事に使いたい場合に利用します。

3-2-3. ドラッグ&ドロップによるアップロード

• パソコンのデスクトップやフォルダから、直接この「メディア」タブの領域に画像ファイルをドラッグ&ドロップするだけで、簡単にアップロードと挿入ができます。
• 活用例: 複数の画像をまとめてアップロードしたい場合に非常に効率的です。

3-3. 「メディア」タブを使いこなすコツ

• 代替テキスト（Altテキスト）の設定: 画像をアップロードする際や、メディアライブラリから挿入する際に、必ず「代替テキスト」を設定しましょう。これはSEO対策（画像検索での表示）と、視覚障がいのあるユーザーへのアクセシビリティ向上に重要です。画像の内容を具体的に説明するテキストを簡潔に入力します。
• 画像の軽量化: 画像はサイトの表示速度に大きな影響を与えます。アップロードする前に、画像圧縮ツール（例: TinyPNG, Squooshなど）やWordPressプラグイン（例: EWWW Image Optimizer）で、できるだけファイルサイズを小さくしてからアップロードしましょう。SANGOテーマは表示速度が速いですが、画像の最適化はさらに効果を高めます。
• 著作権の確認: 使用する画像や動画は、必ず著作権フリーのものか、使用許可を得たものかを確認しましょう。

これらの「ブロック」「パターン」「メディア」タブを効果的に組み合わせることで、SANGOテーマの魅力を最大限に引き出し、読者にとって「心地よい」高品質な固定ページを効率的にデザインすることができます。ぜひそれぞれの機能を試して、ご自身のブログに最適な使い方を見つけてみてください。

SANGOテーマの固定ページ作成：右側パネル（ドキュメント・ブロック）を徹底解説

WordPressで固定ページを作成する際、ブロックエディターの右側に表示されるパネルは、まさにデザインと機能設定の司令塔です。このパネルは、現在何を選択しているか（ページ全体の設定か、特定のブロックの設定か）によって表示内容が変化し、主に「ドキュメント」タブと「ブロック」タブの2つのセクションに分かれています。

SANGOテーマは、この標準のブロックエディターに独自の豊富なカスタマイズ機能を加えており、HTMLやCSSの専門知識がない初心者でも、直感的な操作でデザイン性の高い固定ページを作成できるように設計されています。

ここでは、それぞれのタブが持つ機能と使い方について詳しく解説します。

1. 「ドキュメント」タブ (固定ページ全体の設定)

「ドキュメント」タブは、編集中の固定ページ全体の動作や表示に関する設定を行う場所です。このタブで設定する内容は、その固定ページ全体に適用されます。

【「ドキュメント」タブへのアクセス方法】

• 固定ページの編集画面を開くと、デフォルトで右側のパネルに表示されます。
• もし「ブロック」タブが表示されている場合は、パネル上部の「ドキュメント」タブをクリックして切り替えます。

1-1. 公開

ページの公開状態を管理するセクションです。

• 公開状態: 「公開」以外に「非公開」「パスワード保護」を選択できます。
• 公開日: ページを公開する日時を設定できます。未来の日時を設定すれば、予約投稿も可能です。
• 作成者: ページの作成者を変更できます。
• レビュー待ちとして保留: 複数人でブログを運営している場合などに、公開前にレビューを求めるマークをつけられます。

1-2. パーマリンク

固定ページのURL構造を設定します。検索エンジン最適化（SEO）の観点から、分かりやすいURL構造が推奨されます。

• URLスラッグ: 固定ページのURLの末尾部分（例: https://example.com/contact/ の /contact/ 部分）を編集できます。
  • 推奨: 半角英数字とハイフン（-）を使用し、ページの内容がわかるキーワードを含めることを強く推奨します。日本語スラッグはエンコードされて読みにくくなるため避けましょう。
  • 注意点: ページ公開後に変更すると、Googleの評価がリセットされたり、既存のリンクが無効になったりする可能性があるため、開設後の早い段階で設定し、変更は慎重に行いましょう。もし変更が必要な場合は、301リダイレクトの設定が必須です。

1-3. アイキャッチ画像

その固定ページを象徴する画像を登録します。この画像は、ブログの記事一覧ページ、SNSでのシェア時（OGP画像）、関連ページ表示時のサムネイルなどに利用されます。

• 【操作手順】
  1. 「アイキャッチ画像を設定」をクリックします。
  2. メディアライブラリから画像を選択するか、新しく画像をアップロードします。
  3. 設定後、必ず「代替テキスト (Altタグ)」を入力しましょう。これはSEO（画像検索からの流入）と、視覚障がい者向けのアクセシビリティ向上に非常に重要です。画像の内容を具体的に説明するテキストを簡潔に入力します。

1-4. ディスカッション

そのページでのコメント機能やトラックバック・ピンバックの受け入れ設定などを行います。

• コメントを許可: チェックを外すと、その固定ページにはコメントフォームが表示されなくなり、読者はコメントできなくなります。お問い合わせページなど、コメント機能が不要なページでは無効化しておくと良いでしょう。
• このページのトラックバックとピンバックを許可: 外部ブログからのリンク通知機能です。通常はデフォルトのままで問題ありませんが、不要であれば無効化できます。

1-5. ページ属性

固定ページの階層構造やテンプレートを選択する重要なセクションです。

• 親ページ: 固定ページを階層構造にしたい場合に、そのページの親となるページを指定できます。
  • 活用例: 会社概要の中に「沿革」や「アクセス」といったサブページを持たせたい場合、「沿革」や「アクセス」の親ページとして「会社概要」を選択します。これにより、サイトの構成を論理的に整理できます。
• 順序: 同じ階層の固定ページが複数ある場合、メニューや一覧での表示順序を数値で指定できます。数値が小さいほど先に表示されます。
• テンプレート: SANGOテーマが提供する様々な固定ページテンプレートを選択できます。これには、サイドバーの有無やレイアウトなど、ページの全体的なデザインを変更するオプションが含まれることがあります。
  • SANGOテーマのテンプレート例:
    • デフォルトテンプレート: 通常の投稿や固定ページと同じレイアウト。
    • サイドバーなし: サイドバーを非表示にし、コンテンツ領域を広げたい場合に。
    • LP用テンプレート: ヘッダー・フッターを非表示にし、コンバージョンに特化したランディングページを作成したい場合に。
  • 活用例: お問い合わせページやプライバシーポリシーなど、サイドバーが不要なページでは「サイドバーなし」テンプレートを選ぶと、コンテンツに集中させることができます。

2. 「ブロック」タブ (選択中のブロックに関する設定)

「ブロック」タブは、固定ページ内に挿入された個々のブロックを選択した際に表示され、そのブロックの具体的なデザインや機能に関する設定を行います。SANGOはWordPressのブロックエディターに完全に最適化されており、多数のオリジナルブロックを提供しています。

【「ブロック」タブへのアクセス方法】

• エディター内で任意のブロック（例: 段落、画像、SANGOの見出しなど）をクリックして選択すると、右側のパネルが「ブロック」タブに切り替わります。

2-1. SANGOオリジナルブロックの設定

SANGOには、記事を魅力的に見せるための30種類以上のオリジナルブロックが用意されており、それぞれ独自のカスタマイズオプションが右側パネルに表示されます。

• SANGO見出し:
  • 特徴: 30種類以上の豊富なデザインから選択でき、テーマカスタマイザーで設定したメインカラーやアクセントカラーが自動的に反映されるものもあります。
  • 設定項目例: 見出しの種類（H2〜H6）、デザインスタイル、アイコンの有無と種類、文字サイズ、文字色、背景色など。
• ボックス・ブロック:
  • 特徴: 多彩なデザインの囲み枠を簡単に挿入し、種類を切り替えることができます。
  • 設定項目例: ボックスの種類（例: 注意、メモ、引用など）、背景色、枠線色、タイトル、アイコンなど。
• アコーディオン・ブロック:
  • 特徴: クリックすると内容が開閉するアコーディオン機能を、専門知識なしで設置できます。
  • 設定項目例: タイトル、アイコン、開閉状態の初期設定など。
• タイムライン・ブロック:
  • 特徴: 手順やイベントの流れなどを視覚的に魅力的に表示するタイムラインを作成できます。
  • 設定項目例: アイコン、日付、説明文など。項目の追加・削除も可能です。
• 吹き出しブロック:
  • 特徴: 会話形式のコンテンツを簡単に作成し、左右の配置や色などを調整できます。
  • 設定項目例: アイコン画像、アイコンの左右配置、吹き出しの背景色、名前など。
• 記事一覧ブロック:
  • 特徴: カテゴリーやタグで記事を絞り込み、リアルタイムで表示結果を確認しながら記事一覧をページ内に挿入できます。
  • 設定項目例: 表示する記事の数、表示形式（リスト、カードなど）、カテゴリーやタグでの絞り込み、並び順（新着順、人気順など）など。
• タブブロック:
  • 特徴: 複数のコンテンツをタブ形式で切り替えて表示するためのブロックです。
  • 設定項目例: タブのタイトル、タブコンテンツなど。
• レビューボックスブロック:
  • 特徴: 商品やサービスの評価を星評価や数値で示すテーブルを簡単に作成できます。
  • 設定項目例: 評価項目、星の数、数値、説明文など。
• その他ブロック: 参考ブロック、関連ブロック、メッセージブロック、ボタンブロック、リストブロック、線ブロックなど、様々な用途に対応したブロックがあり、それぞれ詳細な設定が可能です。
  • ボタンブロックの例: 全18種類のスタイルがあり、アフィリエイト計測タグの入力欄も用意されているため、アフィリエイトリンクの管理にも便利です。

2-2. SANGO Landとの連携

「SANGO Land」は、SANGOユーザーが投稿したデザイン済みブロックのギャラリーサイトです。

• 【活用方法】
  • SANGO Landで気に入ったブロックパターン（複数のブロックの組み合わせ）を「コピー」ボタンでコピーします。
  • 固定ページの編集画面で貼り付けると、そのブロック群がページに挿入されます。
  • 挿入されたブロックは、この右側パネルの「ブロック」タブで、個々のブロックごとにさらに細かくカスタマイズできます。

2-3. カスタム書式とカスタムバリエーション

SANGOは、より高度なカスタマイズを可能にする機能も提供しています。

• カスタム書式: 自分でCSSを記述してオリジナルの文字装飾を設定できる機能です。
  • 【設定方法】 エディター画面右上の「SANGO Settings」（歯車アイコンの横のSANGOアイコン）から設定し、テキストを選択した際に表示されるブロックツールバーの「SANGOカスタム書式」から利用できます。
  • 活用例: 特定のキーワードに常に同じ色や太字の装飾を適用したい場合に便利です。
• カスタムバリエーション: よく使う、自分好みにカスタマイズしたブロックをブロック一覧に登録する機能も利用できます。（これはWordPress標準機能の「再利用ブロック」に近いです。）
  • 活用例: 毎回同じ設定で使うボタンやボックスなどがあれば、一度カスタマイズしたものを登録しておくことで、呼び出すだけで同じデザインを適用できます。

2-4. デフォルトブロックへのSANGOスタイル適用

WordPress標準で提供されている「ボタン」や「画像」、「表」などのブロックにも、SANGOテーマ独自のスタイルバリエーションが追加されており、統一感のあるデザインを保ちつつカスタマイズが可能です。

• ブロックを選択した際に右側パネルの「ブロック」タブに表示される「スタイル」オプションから、SANGO独自のスタイルを選択できます。

2-5. 追加CSSクラス (高度な設定)

各ブロックの「高度な設定」にある「追加CSSクラス」を利用すると、ブロックに独自のCSSクラスを適用し、さらなる詳細なデザイン調整が可能です。

• 【活用方法】
  1. CSSを適用したいブロックを選択します。
  2. 右側パネルの「ブロック」タブで、一番下にある「高度な設定」をクリックして展開します。
  3. 「追加CSSクラス」の入力欄に任意のクラス名（例: my-custom-box）を入力します。
  4. WordPress管理画面の「外観」→「カスタマイズ」→「追加CSS」で、入力したクラス名に対するCSSを記述します。
     • 例:CSS.my-custom-box { font-size: 1.2em; padding: 20px; border: 1px solid #ccc; }
• 活用例: 特定の段落の文字サイズを小さくしたい場合（font-small）、特定の画像の周囲に特別な影を付けたい場合など、より細かいデザイン調整を行いたい場合に役立ちます。

この右側のパネルを使いこなすことで、HTMLやCSSの専門知識がなくても、直感的な操作でデザイン性の高い固定ページを作成できます。なお、SANGOテーマ全体のデザイン設定や高速化設定、広告設定などは、WordPress管理画面の「SANGO設定」や「外観」→「カスタマイズ」から行い、これらはサイト全体に適用される設定となりますので、混同しないように注意しましょう。