Apuraでは、サイト全体の配色、レイアウト、ヘッダー、フッター、投稿一覧、投稿ページ、固定ページなどの主要な表示設定をWordPressのカスタマイザーから調整できます。
この記事では、Apuraのカスタマイザーで「どこを開くと何を設定できるのか」を全体像として整理します。細かな数値や各項目の詳しい使い方に入る前に、まず設定場所の見取り図としてご利用ください。
設定パネル早見表
| パネル名 | 主な用途 | よく使う場面 |
|---|---|---|
| Basic Site Settings | サイトタイトル、キャッチフレーズ、サイトアイコンなどの基本情報を設定 | サイト公開前に名称やブラウザタブの表示を整える |
| General Options | カラー、全体レイアウト、プレースホルダー画像、パンくずリスト、トップへ戻るボタン、SNSリンクを設定 | サイト全体の見た目や共通機能を調整する |
| Top Bar | ヘッダー上部の細い情報エリアを設定 | お知らせ、短い案内文、SNSリンクをヘッダー上部に表示する |
| Header | ヘッダーレイアウト、ロゴ、サイトタイトル、メニュー、検索、モバイルメニューを設定 | サイト上部の見た目とナビゲーションを整える |
| Typography | Google Fonts、本文、見出し、H1〜H6の文字スタイルを設定 | サイト全体の読みやすさやブランド感を調整する |
| Front Page | トップページのヒーローエリアを設定 | トップページに画像・動画・キャッチコピー・ボタンを表示する |
| Archive | 投稿一覧、カテゴリー、タグ、検索結果などの一覧ページを設定 | 記事一覧のレイアウト、カード表示、メタ情報を調整する |
| Single | 個別投稿ページのレイアウト、タイトル、表示要素を設定 | ブログ記事ページの見た目やメタ情報の表示順を整える |
| Page | 固定ページのレイアウト、タイトル、表示要素を設定 | 会社案内、サービスページ、お問い合わせページなどの表示を整える |
| Footer | フッターウィジェット、カラム数、背景色、文字色、リンク色を設定 | サイト下部の情報エリアやコピーライト周辺を整える |
| SEO | Schema Markupの出力を設定 | SEOプラグインとの重複を避けたい場合に確認する |
Basic Site Settings: サイトの基本情報
Basic Site Settings では、サイトタイトル、キャッチフレーズ、サイトアイコンなど、WordPressサイトの基本情報を設定します。
サイト名はヘッダーやブラウザタブ、検索結果で参照されることがあります。Apuraのデザイン調整に入る前に、まずこの項目でサイトの名前と説明が正しく設定されているか確認しておくと、後の作業が進めやすくなります。
General Options: サイト全体の共通設定
General Options は、Apuraのカスタマイザー設定の中でも特に重要なパネルです。サイト全体に影響するカラーやレイアウト、共通パーツの表示設定がまとまっています。
Colors
Colors では、リンク色、ホバー色、見出し色、カラーパレットの上書き、カスタムパレットを設定できます。ここで設定した色は、カスタマイザーのカラーピッカーやブロックエディターの色選択にも関わります。
サイト全体の印象を決める設定なので、最初にブランドカラーやアクセントカラーを決めてから調整すると、ヘッダー、ボタン、リンク、バッジなどの見た目を統一しやすくなります。
General Layout
General Layout では、表示スタイル、サイトレイアウト、メインコンテナ幅、本文幅、サイドバー幅、コンテンツ背景、影の有無などを設定できます。
サイト全体の骨格に関わるため、記事を書き始める前やトップページを作る前に確認しておきたい項目です。背景画像などのWordPress標準背景設定も、このレイアウト設定内で扱われます。
Placeholder Image
Placeholder Image では、アイキャッチ画像が設定されていない投稿に使う代替画像を指定できます。投稿一覧で画像の有無がばらつく場合に設定しておくと、一覧ページの見た目を整えやすくなります。
Breadcrumbs
Breadcrumbs では、パンくずリストの表示位置と表示対象ページを設定できます。トップページ、アーカイブ、固定ページ、投稿ページ、404ページなど、表示したい場所を個別に選べます。
Back To Top
Back To Top では、ページ上部へ戻るボタンの表示、アイコンサイズ、背景色、アイコン色を設定できます。デスクトップとモバイルで表示の有無を分けられるため、画面サイズに合わせて調整できます。
Social Media / Contact Links
Social Media / Contact Links では、お問い合わせページや各種SNSのURLを登録できます。ここで登録したリンクは、Top BarのSNSリンク表示などで利用されます。
対応している項目には、Contact、Discord、Facebook、GitHub、Instagram、LINE、LinkedIn、Pinterest、RSS、Slack、Threads、Twitch、X、YouTubeなどがあります。
Top Bar: ヘッダー上部の情報エリア
Top Bar では、ヘッダー上部に表示する細い情報エリアを設定できます。デスクトップ、タブレット、モバイルで表示を切り替えられるほか、背景色、テキスト色、リンク色、SNSアイコンの表示を調整できます。
短いお知らせ、キャンペーン案内、問い合わせ導線、SNSリンクを常時見せたい場合に便利です。SNSリンクのURLは General Options → Social Media / Contact Links で登録し、Top Bar側で表示を有効化します。
Header: ロゴとナビゲーション
Header では、サイト上部のレイアウトやナビゲーションを設定します。ヘッダーは訪問者が最初に見る共通パーツなので、サイトタイトル、ロゴ、メニュー、検索、モバイル表示をまとめて確認しておくと安心です。
| セクション | 設定できる内容 |
|---|---|
| General | ヘッダーレイアウト、全幅表示、影、下線、背景色、ボーダー色 |
| Site Title / Logo | サイトタイトルの表示、キャッチフレーズの表示、タイトル色、ロゴ幅 |
| Menu | デスクトップメニューの位置、ドロップダウンアイコン、メニューリンク色 |
| Header Tools | 検索ツール、検索表示タイプ |
| Mobile | モバイルヘッダーレイアウト、メニュータイプ、オーバーレイ色、モバイルメニュー内の要素 |
モバイルメニューでは、Dropdown、Fullscreen、Offcanvasなどの表示タイプを選べます。スマートフォンでの操作性に直結するため、変更後は必ずモバイル幅のプレビューでも確認してください。
Typography: 文字の見た目
Typography では、Google Fontsの利用設定、本文、見出し、H1〜H6それぞれのフォント設定を調整できます。
本文の読みやすさを整える場合は Body Typography、見出し全体の印象をまとめて変えたい場合は All Headings Typography を確認します。H1〜H6を個別に設定した場合は、個別設定が優先されます。
フォントサイズ、行間、太さなどはサイトの読みやすさに大きく影響します。最初は本文と見出し全体を調整し、必要になった段階でH2やH3などを個別に整える進め方がおすすめです。
Front Page: トップページのヒーローエリア
Front Page では、トップページに表示するヒーローエリアを設定できます。画像または動画を背景として使い、タイトル、説明文、ボタン、オーバーレイ色、テキスト色、表示高さを調整できます。
サイトのトップページを印象的に見せたい場合に使う設定です。ビジネスサイトやサービス紹介サイトでは、最初に伝えたいメッセージと主要な導線をここに配置すると、訪問者に目的を伝えやすくなります。
Archive: 投稿一覧ページ
Archive では、投稿一覧、カテゴリー、タグ、検索結果などの一覧ページを設定します。ブログ運営では特に確認頻度が高いパネルです。
| セクション | 設定できる内容 |
|---|---|
| General | アーカイブ全体のレイアウト、本文幅、投稿リストレイアウト、カラム数、投稿タイトルの文字設定・色 |
| Archive Title | アーカイブタイトルの表示位置、カバー背景画像、高さ、オーバーレイ色、タイトルや説明文の文字設定 |
| Post Structure | サムネイル、タイトル、メタ情報、概要、フッターなど投稿カード内の表示要素と順番 |
投稿一覧の見た目を整えるときは、まず General で一覧レイアウトを選び、次に Post Structure でカード内に表示する要素を調整します。アイキャッチ画像がない投稿が多い場合は、General OptionsのPlaceholder Imageもあわせて確認してください。
Single: 個別投稿ページ
Single では、ブログ記事などの個別投稿ページを設定します。投稿本文の読みやすさ、タイトル表示、カテゴリーや日付などのメタ情報、記事下の要素を調整できます。
| セクション | 設定できる内容 |
|---|---|
| General | 投稿ページのレイアウト、本文幅 |
| Title | タイトル位置、カバー画像、カバー高さ、オーバーレイ色、投稿タイトルの文字設定・色 |
| Structure | タイトル前後の表示要素、カテゴリー、メタ情報、アイキャッチ画像、記事下の投稿ナビゲーションやコメントエリア |
タイトル位置は Standard と Cover から選べます。Coverを使う場合は、投稿のアイキャッチ画像やデフォルトカバー画像、オーバーレイ色を確認すると、文字の読みやすさを保ちやすくなります。
Page: 固定ページ
Page では、固定ページのレイアウトや表示要素を設定します。基本的な考え方はSingleに近いですが、カテゴリーやタグを前提とする投稿ページとは異なり、固定ページ向けの表示項目に整理されています。
| セクション | 設定できる内容 |
|---|---|
| General | 固定ページのレイアウト、本文幅 |
| Title | タイトル位置、デフォルトカバー画像、カバー高さ、オーバーレイ色、固定ページタイトルの文字設定・色 |
| Structure | タイトル、メタ情報、アイキャッチ画像、公開日、更新日、投稿者、ページ下部の要素 |
サービスページやランディングページのように、固定ページごとに見せ方を変えたい場合は、カスタマイザーの全体設定と各ページの編集画面側の設定をあわせて確認すると調整しやすくなります。
Footer: サイト下部の共通エリア
Footer では、フッターウィジェット、カラム数、全幅表示、背景色、文字色、リンク色、コピーライトエリアの色を設定できます。
フッターは、サイトマップ、プロフィール、問い合わせ、SNS、運営情報などをまとめる場所として使われます。ウィジェットを表示する場合は、カラム数とモバイル表示の見え方を確認しておくと、情報量が多くなっても読みやすく保てます。
SEO: 構造化データの設定
SEO では、Apuraが出力するSchema Markupを有効化できます。構造化データは検索エンジンにページ内容を伝えるための補助情報です。
すでにSEOプラグインや独自実装でJSON-LDなどの構造化データを出力している場合は、重複を避けるためにこの設定を確認してください。
最初に設定するおすすめの順番
Apuraのカスタマイザーは設定項目が多いため、最初からすべてを細かく調整しようとすると迷いやすくなります。初期設定では、次の順番で進めると全体の見た目を整えやすくなります。
- Basic Site Settings でサイトタイトル、キャッチフレーズ、サイトアイコンを確認する
- General Options → Colors でサイト全体の基本色を決める
- General Options → General Layout で幅、サイドバー、表示スタイルを整える
- Header でロゴ、メニュー、モバイル表示を確認する
- Typography で本文と見出しの読みやすさを調整する
- Archive と Single でブログ一覧と記事ページの見た目を整える
- Footer でサイト下部の情報整理と配色を確認する
まとめ
Apuraのカスタマイザーは、サイト全体のデザインから、投稿一覧、投稿ページ、固定ページ、ヘッダー、フッターまで幅広く調整できるように整理されています。
まずは General Options、Header、Typography の3つを確認すると、サイト全体の印象を大きく整えられます。そのうえで、ブログ運営が中心なら Archive と Single、固定ページ中心のサイトなら Page と Footer を調整していくと、目的に合ったサイトデザインへ近づけやすくなります。