Abira Academy
ドキュメント
Abira Academyは、個人経営〜小規模の学習塾・スクール向けに設計されたWordPressブロックテーマです。有効化した時点でトップページに10のセクションが組み上がり、コース紹介・時間割・講師紹介・合格者の声・入塾までの流れ・FAQ・教室案内・無料体験CTAまでが揃います。カスタム投稿タイプを使わないため、すべての内容をブロックエディタ上で直接編集でき、将来テーマを乗り換えてもデータが失われません。
主な特徴
- check_circle10セクションで完結するトップページ（front-page）
- check_circleコース紹介カード／学年チップ付きの可変グリッド
- check_circle週間時間割表（空席状況を色ではなく文字で表示）
- check_circle講師紹介・合格者の声（カルーセルなしの静的グリッド）
- check_circle入塾までの流れ（4ステップ）・FAQ（core/detailsブロック）
- check_circle教室案内（地図・道順・受付時間）と無料体験CTA
- check_circleスラッグを付けるだけで適用される4つの詳細ページ
- check_circle文字サイズ3段階・高コントラスト切り替えのツールバー
- check_circleモバイル用の固定CTAバー（電話・無料体験）
- check_circle日本語翻訳（ja.po / ja.mo）同梱・翻訳対応
- check_circle369theme.com経由の自動アップデート対応
動作要件
- check_circleWordPress 6.5以上（7.0まで動作確認済み）
- check_circlePHP 7.4以上
- check_circleブロックテーマ対応環境（サイトエディター）
テーマタイプ
スタンドアロンの親テーマです。無料テーマ「Abira」を土台に開発していますが、Abiraをインストールする必要はありません（子テーマでもアドオンでもありません）。カスタマイズを長期的に保護したい場合は、子テーマの作成をおすすめします。
プラグイン依存
必須プラグインはありません。カスタム投稿タイプ・予約システム・カルーセル等は搭載しておらず、すべてコアブロックで構成されています。お問い合わせフォームを実際に送信できるようにする場合のみ、任意のフォームプラグインをご利用ください。
インストール
Abira Academyはスタンドアロンのブロックテーマです。以下の手順でインストールしてください。
テーマのアップロード
WordPress管理画面から「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」を選択し、購入時にダウンロードした abira-academy.zip をアップロードします。
有効化
アップロードが完了したら「有効化」をクリックします。この時点でトップページに10セクションのレイアウトが表示され、デモ画像とサンプル文が入った状態になります。空白のページにはなりません。
編集の入口
以降の編集はすべて「外観」→「エディター」（サイトエディター）から行います。トップページを編集する場合は「テンプレート」→「フロントページ」を開いてください。
初期設定
公開前に、以下の5項目を塾の情報へ差し替えてください。
電話番号の差し替え（必須）
電話番号はダミー値で出荷されています。実際の番号に置き換えないと、来訪者がつながらない番号に発信してしまいます。サイトエディターで各パターンを開き、ボタンのリンク先（tel:）とボタンに表示されている文字の両方を修正してください。
| 箇所 | 初期値 | 編集場所 |
|---|---|---|
| ヘッダーの電話ボタン | tel:0000000000 |
Site Header Actions |
| フッターの連絡先 | tel:0000000000 |
Site Footer Columns |
| ヒーローのCTA | tel:03-XXXX-XXXX |
Section: Hero |
| 無料体験CTA（2箇所） | tel:03-XXXX-XXXX |
Section: Trial CTA |
| 教室案内の電話パネル | tel:0120-123-456 |
Section: Access |
| お問い合わせページの電話バナー | tel:0120-123-456 |
Page: Contact |
| 授業料ページの相談ボタン | tel:03-XXXX-XXXX |
Page: Tuition |
写真の差し替え
テーマには 001.webp（ヒーロー用の教室写真）と 006.webp（その他すべての写真枠に入るプレースホルダー画像）の2点のみが同梱されています。デザインを完成形で確認するためのデモ素材であり、公開前に塾自身の写真へ差し替えることを前提としています。
差し替え方法：サイトエディターで対象の画像ブロックを選択 → ツールバーの「置換」→「メディアライブラリを開く」。すべて通常の画像ブロックなので、特別な操作は不要です。対象は、ヒーロー／コースカード／講師カード／合格者の声／教室案内／教室カード／お問い合わせページの各写真枠です。
サイト名・ロゴ・住所・地図
- サイトタイトル：「設定」→「一般設定」、またはサイトエディターのサイトタイトルブロック
- ロゴ画像：「外観」→「エディター」でヘッダーを選択し、サイトロゴブロックから画像をアップロード
- 住所・最寄駅・道順・受付時間：Section: Access（トップページ）と Page: Contact を編集
- 地図：初期状態はサンプル表示です。Googleマップの埋め込みをご自身の教室のものに差し替えてください
各セクションの内容を書き換える
コース名・対象学年・時間割・空席状況・講師プロフィール・合格者の声・料金表・FAQは、すべてサンプル文が入っています。サイトエディターで文字をクリックして上書きしてください。カードを増やしたいときはブロックを複製、減らしたいときは削除するだけです。
時間割の空席状況は「開講／空席少し／満席」の文字ラベルで表現しています。色だけで状態を示さない設計なので、ラベルの文字は消さずに書き換えてください。
お知らせセクションの有効化
トップページ最下部の「お知らせ」セクションは、特定のカテゴリーの最新記事を3件表示します。表示するには次の設定が必要です。
- 「投稿」→「カテゴリー」で、スラッグ
announcementsのカテゴリーを作成（名前は「お知らせ」など任意） - お知らせとして見せたい投稿に、そのカテゴリーを設定
カテゴリーが未作成、または記事が0件の場合は、エラーではなく空状態のメッセージが表示されます。ブログ一覧ページを別に用意したい場合は、固定ページを1つ作成し「設定」→「表示設定」→「投稿ページ」に指定してください。
詳細ページの作り方
4つの詳細ページは「固定ページを作ってスラッグを合わせる」だけで、レイアウトが自動で適用されます。貼り付け作業もテンプレート選択も不要です。
courses コース紹介
学年別のコース詳細ページ。集団指導・個別指導を並べて比較できる構成です。トップページのコースカードからリンクされています。
tuition 授業料
料金表と、入塾金・教材費などの共通費用を別枠に分けたページです。
contact お問い合わせ
問い合わせフォームのレイアウト、地図、受付時間、電話バナー。フォームの送信処理そのものはプラグイン側の役割です。
classrooms 教室案内
教室ごとに1カード。カードを複製すれば教室を増やせ、1教室のみなら余りを削除します。教室用のカスタム投稿タイプはありません。
注意：この4ページは本文欄が表示されません
上記4つのスラッグの固定ページは、テンプレート側のレイアウトのみを表示します。ページの本文欄に入力した内容は画面に出ません。自分で本文を書きたいページを作る場合は、テンプレートに「Blank」または「Page (No Title)」を選んでください。
テンプレート一覧
14種類のテンプレートが含まれています。「外観」→「エディター」→「テンプレート」から確認・編集できます。
front-page トップページ
ヒーロー・コース・時間割・講師・合格者の声・入塾までの流れ・FAQ・教室案内・無料体験CTA・お知らせの10セクションを積み上げたトップページ専用テンプレート。
home 投稿一覧
ブログ・お知らせの一覧を表示するテンプレートです。
single 記事詳細
投稿本文・著者情報・前後の記事へのナビゲーション・コメントを含む投稿詳細ページです。
page 固定ページ
汎用的な固定ページ用のテンプレートです。
archive アーカイブ
カテゴリー・タグ・日付別の投稿一覧を表示します。
search 検索結果
サイト内検索の結果を表示するテンプレートです。
404 ページが見つかりません
存在しないURLにアクセスされたときに表示されます。
index フォールバック
他のテンプレートが該当しない場合に使われる最終フォールバックです。
page-courses / page-tuition スラッグ連動
スラッグ courses / tuition の固定ページに自動適用されます。
page-contact / page-classrooms スラッグ連動
スラッグ contact / classrooms の固定ページに自動適用されます。
blank カスタムテンプレート
タイトル表示のない白紙レイアウト。トップページのセクションを個別ページへ複製するときに最適です。固定ページ・投稿の両方で選べます。
page-no-title カスタムテンプレート
ページタイトルを出さずに本文だけを表示する、固定ページ用のテンプレートです。
パターン一覧
37種類のブロックパターンが含まれています。テンプレートから自動的に呼び出されますが、サイトエディターの挿入ツール（カテゴリー「Abira Academy」）から個別ページへ差し込むこともできます。
トップページ用
section-hero— ヒーローsection-courses— コース紹介section-schedule— 週間時間割section-instructors— 講師紹介section-testimonials— 合格者の声・体験談section-enrollment-steps— 入塾までの流れsection-faq— よくある質問section-access— 教室案内section-trial-cta— 無料体験CTAsection-announcements— お知らせsection-exam-results-overlay— 合格実績（差し替え用）
詳細ページ用
page-courses— コース紹介ページpage-tuition— 授業料ページpage-contact— お問い合わせページpage-classrooms— 教室案内ページclassroom-card— 教室カード（複製用）page-comments— 固定ページのコメント
サイト共通
site-header— ヘッダーsite-header-actions— 電話・無料体験ボタンsite-a11y-toolbar— アクセシビリティツールバーsite-navigation— ナビゲーション行（任意）site-mobile-cta— モバイル固定CTAバーsite-mobile-actionbar— モバイル用アクション行site-footer— フッターsite-footer-columns— フッター カラムsite-footer-nav— フッター ナビ
投稿・アーカイブ用
single-post-header— 記事ヘッダーsingle-post-content— 記事本文single-author-bio— 著者プロフィールsingle-post-navigation— 前後の記事single-comments— コメントquery-loop— 投稿クエリループquery-loop-card— 投稿カードquery-pagination— ページネーションquery-no-results— 該当記事なしsearch-content— 検索結果404-content— 404ページ
セクションの並べ替え・削除・個別ページ化
「外観」→「エディター」→「テンプレート」→「フロントページ」を開くと、10のセクションが縦に並んでいます。ドラッグ&ドロップで順序を変更でき、不要なセクションは削除できます。情報量が増えてきたら、セクションをコピーして「Blank」テンプレートの固定ページに貼り付ければ、複数ページ構成へ移行できます。その際は、ヘッダーのナビゲーションのリンク先をアンカー（例 #courses）から新しいページURLへ変更してください。
デザイン設定
配色・フォント・余白・角丸は theme.json のプリセットとして定義されています。「外観」→「エディター」→「スタイル」から、CSSを書かずに変更できます。
カラー
骨格は深いネイビー（#031632）、CTAにはアンバー（#d17e31）、下地は温かみのあるアイボリー（#fbf9f8）。パレットは用途別に命名された色で構成され、任意色の指定はオフにしてあります。サイト全体の印象を変えたい場合は、パレットの値を差し替えるのが最短です。
タイポグラフィ
- Display — Plus Jakarta Sans（見出し）
- Body — Be Vietnam Pro（本文）
- Label — Work Sans（ボタン・ラベル）
3書体はGoogle Fontsから読み込みます。いずれも日本語のグリフを持たないため、theme.jsonで日本語ゴシック（Noto Sans JP／ヒラギノ／游ゴシック／メイリオ）をフォールバックに指定しています。欧文はブランド書体、和文はシステムゴシックで表示される仕様です。
ブロックスタイル
- ボタン：Outline — 枠線のみの控えめなボタン
- ボタン：Solid Light — 濃色背景の上で使う白ボタン
- 区切り：Wavy — 波形のセパレーター
ブロックを選択したとき、右サイドバーの「スタイル」から切り替えられます。
Google Fontsを止める
フォントの読み込みは、訪問者のIPアドレスがGoogleに送信されることを意味します。これを避けたい場合は、子テーマの functions.php またはサイト専用プラグインに次の1行を追加してください。
add_filter( 'abira_academy_load_google_fonts', '__return_false' );
日本語ゴシックのフォールバックが効くため、読みやすさは損なわれません。
アクセシビリティ機能
保護者世代が読む前提で設計しています。WCAG 2.2 AAを基準に開発し、axe DevTools・WAVE・WebAIM Contrast Checkerでの確認に加え、キーボードのみの操作確認とNVDAでの読み上げ確認を行っています。
文字サイズ・高コントラスト切り替え
ヘッダー最上部のツールバーから、文字サイズ3段階（A / A+ / A++）と高コントラストモードを切り替えられます。押すたびに変わる循環トグルではなく、状態が見える個別ボタンです。設定はlocalStorageに保存され、次回訪問時は描画前に復元されるため、一瞬だけ元の見た目が見える「ちらつき」が起きません。ツールバーが不要な場合は、サイトエディターのヘッダーから Accessibility Toolbar パターンを削除してください。
状態を色だけで表さない
時間割の空席状況は「開講／空席少し／満席」という文字ラベルを併記しています。色覚特性のある方にも、高コントラストモードでも、同じ情報が伝わります。内容を書き換える際は、文字ラベルを残したまま編集してください。
キーボードとスクリーンリーダー
セマンティックなランドマーク、ブロックテーマ標準のスキップリンク、リンク・ボタンへの2pxフォーカスアウトラインを備えています。FAQは独自ウィジェットではなくブラウザ標準の core/details ブロック（<details> 要素）で作られているため、キーボード操作と読み上げ対応はブラウザ側の実装がそのまま効きます。
動きは任意
スクロールに応じた表示演出は、OS側で「視差効果を減らす／動きを減らす」を設定している環境では完全にスキップされます。JavaScriptを無効にした環境でも、全セクションが最初から表示されます。カルーセルは使用していません。
Abira Academy独自のパターンについて、第三者機関による正式な監査は受けていません。アクセシビリティは各リリースの中で継続的に確認しています。詳細はテーマ同梱の accessibility.txt をご覧ください。
自動アップデート
Abira Academyは369theme.comのアップデートサーバーと連携しており、WordPress管理画面からワンクリックで最新版にアップデートできます。
アップデートの確認方法
更新確認は最大1時間キャッシュされます。「外観」→「テーマ」画面に表示される「今すぐ更新を確認」ボタンから即時クリアできます。新しいバージョンが利用可能な場合、通知が表示されます。
アップデート時の注意
- テーマファイルを直接編集している場合、アップデートで上書きされます。カスタマイズは子テーマ、またはサイトエディター上で行うことをおすすめします
- サイトエディターで編集した内容はデータベースに保存されるため、テーマの更新では消えません
- アップデート前に、サイトのバックアップを取ることをおすすめします
よくある質問
無料テーマ「Abira」も必要ですか?
いいえ。Abira Academyは同じ土台から作られた独立したテーマです。単体でインストールしてお使いください。無料版のAbiraはWordPress.orgでこれまで通り配布されており、本テーマの動作には関係ありません。
トップページのセクション順序を変えられますか?
はい。「外観」→「エディター」→「テンプレート」→「フロントページ」を開き、パターンの順序をドラッグ&ドロップで入れ替えられます。不要なセクションは削除も可能です。
合格実績を大きく見せたいのですが
差し替え用として「Section: Exam Results (Photo Overlay)」パターンを同梱しています。全面写真の上に暗幕を80%固定で重ねる作りのため、どんな明るさの写真を入れても数字が読めるコントラスト（10:1以上）を保てます。サイトエディターでフロントページを開き、ヒーローの上など任意の位置に挿入してください。
教室を2つ目以降に増やすには?
スラッグ classrooms の固定ページを作成すると、教室案内のレイアウトが自動で読み込まれます。教室を増やすときは教室カードのブロックを複製し、1教室のみの場合はほかを削除するだけです。管理すべき教室用の投稿タイプはありません。
詳細ページの本文欄に書いた内容が表示されません
courses / tuition / contact / classrooms の4つのスラッグは、テンプレート側のレイアウトのみを表示する仕様です。本文欄の内容を表示したい場合は、そのページのテンプレートを「Blank」または「Page (No Title)」に変更するか、別のスラッグをお使いください。
トップページ下部の「お知らせ」に何も表示されません
スラッグ announcements のカテゴリーが作成されているか、そのカテゴリーの投稿があるかをご確認ください。どちらかが欠けている間は、エラーではなく空状態のメッセージが表示されます。
日本語と英語で書体が違って見えるのはなぜですか?
同梱の3書体（Plus Jakarta Sans / Be Vietnam Pro / Work Sans）は日本語のグリフを持たないため、theme.jsonでそれぞれに日本語ゴシックを組み合わせています。欧文はブランド書体、和文はシステムゴシックで表示される、意図した仕様です。
カスタマイズ用の子テーマ
テーマファイルを直接編集すると、アップデート時に変更が上書きされて消えます。PHPやCSSを書き足す場合は、子テーマの作成をおすすめします。サイトエディター上での編集（文章・画像・並べ替え・スタイル）はデータベースに保存されるため、子テーマは不要です。
abira-academy-child/ ├── style.css ← テーマ宣言（Template: abira-academy） ├── functions.php ← PHPのカスタマイズ └── custom.css ← CSSのカスタマイズ（任意）
/* Theme Name: Abira Academy Child Template: abira-academy Version: 1.0.0 */
Abiraシリーズ
同じ土台・同じアクセシビリティ方針から生まれる、業種特化のテーマシリーズです。
Abira
WordPress.orgで配布している無料のブロックテーマ。Abira Academyの土台です。
Abira School
スイミング・ダンスなど、親しみやすさを重視したスクール向けテーマ（開発予定）。
Abira Public
NPO・公益法人向けの、情報の見つけやすさを軸にしたテーマ（開発予定）。