gSkeleton 活用ガイド:ブロックパターンでページを組み立てる

gSkeleton(ジースケルトン)は、あらかじめ用意された「骨組み」を積み木のように組み合わせることで、専門知識がなくても整ったページを作成できるテーマです。その中核となるのが、複数のブロックを組み合わせたレイアウトのセットである「ブロックパターン」です。

1. ブロックパターンの呼び出し方

WordPressの投稿・固定ページ編集画面で、以下の手順でパターンを挿入できます。

  1. 画面左上の 「+(ブロック挿入ツール)」 ボタンをクリックします。
  2. タブを 「パターン」 に切り替えます。
  3. カテゴリーの一覧から 「gSkeleton Patterns」 を選択します。
  4. 表示されたプレビューの中から、使いたいレイアウトをクリックしてページに挿入します。

2. 用意されている主要なパターン

functions.php には、ホームページ制作に欠かせない以下の5つのパターンが登録されています。

パターン名内容と活用シーン
ウェルカムセクションページ冒頭で訪問者を迎える大きな見出しと説明文のセットです。
CTAセクション「お問い合わせ」などのボタンが含まれており、ユーザーの行動を促す際に便利です。
Aboutセクションあなたのサービスや理念を伝えるためのシンプルな紹介用レイアウトです。
お客様の声2カラムの構成で、信頼性を高めるための「ユーザーレビュー」を表示します。
特徴セクション3つのカラムを使い、サービスの強みやメリットを整理して提示できます。

3. 直感的なカスタマイズ

挿入したパターンは、そのまま文字や色を打ち替えるだけで完成します。

  • テキストの変更: 挿入された文字をクリックするだけで、直接書き換えることができます。これらは全て翻訳可能な形式(translatable content)で管理されています。
  • ボタンの調整: CTAセクションにあるボタンは、クリックしてリンク先URLを入力するだけで動作します。
  • スタイルの変更: 例えばボタンブロックを選択すると、設定パネルから 「Rounded(丸角)」 スタイルを選択して印象を変えることが可能です。

4. 制作のヒント:余白のこだわり

gSkeletonのパターンには、var(--wp--preset--spacing--70) といった「一貫した余白(パディング)」があらかじめ設定されています。

これにより、ユーザーが特別な調整をしなくても、PCでもスマートフォンでも「情報が読みやすい適切な空間」が自動的に保たれるよう設計されています。