ブログ記事の読みやすさは、本文の内容だけでなく「タイトルの見せ方」や「メタ情報（日付・カテゴリー・著者など）の配置」によっても大きく変わります。Apuraには、投稿ページ（シングル）のレイアウトを細かく調整できるカスタマイザー「Single」パネルが標準搭載されています。
この記事では、Singleパネルでできる設定を一つずつ確認しながら、タイトルをカバー画像つきのデザインに変更する方法や、カテゴリー・日付・著者などのメタ情報を好きな順番で表示する方法を解説します。記事の最後では、投稿ごとの個別設定や、開発者向けのフィルターフックによる拡張方法も紹介します。
Singleパネルとは？投稿ページ全体のデザインをコントロールする設定項目
「Single」は、投稿（post）タイプの記事ページに関する設定をまとめたカスタマイザーのパネルです。具体的には、次の3つのセクションに分かれています。
| セクション | 主な内容 |
|---|---|
| General | 記事ページ全体のレイアウト、本文エリアの幅 |
| Title | タイトルの表示位置（標準 / カバー）、カバー画像・高さ・オーバーレイ色、タイトルのフォントと色 |
| Structure | タイトル前後・本文下に表示する要素の種類と並び順（カテゴリー・日付・著者・コメントなど） |
| セクション | 主な内容 |
|---|---|
| General | 記事ページ全体のレイアウト、本文エリアの幅 |
| Title | タイトルの表示位置（標準 / カバー）、カバー画像・高さ・オーバーレイ色、タイトルのフォントと色 |
| Structure | タイトル前後・本文下に表示する要素の種類と並び順（カテゴリー・日付・著者・コメントなど） |
固定ページ（page）向けには同様の設定が「Page」パネルに用意されていますが、本記事では投稿（post）向けの「Single」パネルを中心に解説します。設定の考え方や項目構成はほぼ共通しているため、固定ページのタイトル表示を調整したい場合もこの記事を参考にできます。
設定画面を開く（外観 → カスタマイズ → Single）
- WordPress管理画面で 外観 → カスタマイズ を開きます。
- Single パネルをクリックします。
- General・Title・Structure の3つのセクションが表示されます。
設定を変更すると、プレビュー画面に反映されます。実際に投稿済みの記事を1つ開いた状態でプレビューしながら作業すると、変更によって見た目がどう変わるかを確認しやすくなります。
General設定：レイアウトと本文エリアの幅を決める
Generalセクションには、記事ページ全体のレイアウトに関わる2つの項目があります。
| 項目 | 内容 |
|---|---|
| Single Layout | サイドバーの有無・位置を選択（例：サイドバーなし、左サイドバー、右サイドバーなど） |
| Content Width | 本文エリアの幅をパーセント（%）で指定 |
Single Layoutは画像付きのボタンから選ぶ形式になっており、レイアウトの違いを見た目で確認しながら選択できます。サイドバーに広告やプロフィール、関連記事リストなどを表示したい場合はサイドバーありのレイアウトを、本文に集中させたい場合はサイドバーなしのレイアウトを選ぶとよいでしょう。
Content Widthは、本文エリアの幅を30〜100%の範囲で調整できます。値を小さくすると本文の行幅が狭くなり、1行あたりの文字数が減るため、長文の記事でも読みやすくなる場合があります。なお、この設定はサイドバーの有無に関わらず、本文エリアそのものの幅に影響します。
タイトルの表示方法を変える（Standard / Cover）
Titleセクションでは、記事タイトルの表示位置（Title Position）を「Standard」と「Cover」の2種類から選べます。
| 表示位置 | 特徴 |
|---|---|
| Standard | 本文の上に、通常の見出しとしてタイトルや各種メタ情報を縦に並べて表示する |
| Cover | タイトルやメタ情報をアイキャッチ画像（または設定したカバー画像）の上に重ねて表示する |
Coverを選択すると、記事ページの先頭に大きな画像エリアが表示され、その上にタイトルやカテゴリー、日付などが重ねて配置されます。雑誌やニュースサイトのような、ビジュアル重視のデザインにしたい場合に向いています。
Cover表示の追加設定：背景画像・高さ・オーバーレイ色
Title Positionを「Cover」にすると、次の追加設定が表示されます。
- Default Cover Image：記事にアイキャッチ画像が設定されていない場合に使用される、代わりの背景画像です。アイキャッチ画像が設定されている記事では、その画像が優先して使われます。
- Cover Height：カバーエリアの高さを、px・em・rem・%・vh・dvh・vminなどの単位で指定できます。さらに、PC・タブレット・スマートフォンごとに別々の高さを設定できるため、スマートフォンでは画像エリアを小さくしてタイトルを読みやすくする、といった調整が可能です。
- Cover Overlay Color：背景画像の上に重ねる半透明の色です。画像が明るい場合でも、暗めのオーバーレイを重ねることでタイトル文字を読みやすくできます。
背景画像を用意する際は、カバーエリアの最大の高さに対して十分な解像度の画像を選ぶと、引き伸ばしによるぼやけを防げます。また、記事ごとに異なるアイキャッチ画像を設定しておけば、CoverモードのままでもCoverごとに違うビジュアルを表示できます。
タイトルのデザインを調整する（フォント・色）
Titleセクションの「Design」タブでは、記事タイトルの見た目を調整できます。
- Post Title Typography：フォントサイズ・太さ・行間などを設定
- Post Title Color：タイトルの文字色を設定
Coverモードでタイトル文字が背景画像に埋もれて見えにくい場合は、Post Title Colorを白系の色に変更し、前述のCover Overlay Colorを濃めに設定すると、コントラストが取れて読みやすくなります。
タイトル前後に表示する要素を並び替える（Header Elements）
Structureセクションの「Header Elements」では、記事タイトルの前後に表示する要素を、ドラッグ&ドロップで並び替えたり、表示・非表示を切り替えたりできます。選択できる要素は次の4つです。
- Categories：投稿が属するカテゴリーを表示
- Title：記事タイトル
- Meta：日付・著者・コメント数などのメタ情報（次章で詳しく解説）
- Featured Image：アイキャッチ画像
例えば「カテゴリー → タイトル → メタ情報 → アイキャッチ画像」の順に並べると、記事のジャンルが一目で分かるレイアウトになります。逆にシンプルに見せたい場合は、不要な要素のチェックを外して非表示にすることもできます。
なお、Title Positionが「Cover」の場合、Featured Imageは背景画像として使われるため、Header Elementsの並び順には表示されません（背景として自動的に消費されます）。
カテゴリーの表示スタイル（Plain / Badge）
Header ElementsでCategoriesを選択すると、サブ項目として次の設定が表示されます。
- Display Icon：カテゴリー名の前にアイコンを表示するかどうか
- Category Style：「Plain」（文字のみ）または「Badge」（背景色付きのバッジ表示）から選択
Badgeスタイルにすると、カテゴリーがラベルのように強調表示され、複数カテゴリーを設定している記事でも視認性が高くなります。サイト全体のアクセントカラーと合わせて使うと、デザインに統一感が出ます。
投稿メタ情報の表示項目と順序を設定する（Header Meta Elements）
Header Elementsで「Meta」を有効にすると、サブ項目として「Header Meta Elements」が表示されます。ここでは、タイトル付近に表示するメタ情報の種類と並び順を設定できます。選択できる項目は次の5つです。
| 項目 | 表示内容 |
|---|---|
| Published Date | 投稿日 |
| Modified Date | 更新日 |
| Author | 投稿者名 |
| Comments | コメント数 |
| Categories | カテゴリー（Meta内に表示する場合） |
各項目はドラッグして順序を変更できるほか、不要な項目はチェックを外して非表示にできます。また「Meta Separator」では、各メタ情報の間に表示する区切り文字（「・」「|」など）を選択できます。
更新日（Modified Date）を表示しておくと、読者に「情報が新しい」という印象を与えやすく、特に手順解説やレビュー系の記事ではSEO・ユーザー体験の両面でメリットがあります。記事を更新した際は、本文を修正するだけでなく、この設定を有効にしておくことをおすすめします。
本文の下に表示する要素を設定する
Structureセクションには、本文の下（記事末尾）に表示する要素を設定する項目も用意されています。
Footer Meta Elements：カテゴリー・タグの表示
「Footer Meta Elements」では、本文下に表示する「Categories」「Tags」の有無と順序を設定できます。Categoriesには、Header Elementsと同様に「Display Icon」「Category Style（Plain / Badge）」のサブ設定があります。
記事の上部はシンプルにタイトルのみ、下部でカテゴリーとタグをまとめて表示する、という構成にすると、本文の邪魔をせずに関連トピックへの導線を確保できます。
After Entry Elements：投稿ナビゲーション・コメント欄
「After Entry Elements」では、記事のさらに下に表示する要素として「Post Navigation」（前後の記事へのリンク）と「Comment Area」（コメント欄）の表示・非表示と順序を設定できます。
コメント機能を使っていないサイトでは、Comment Areaのチェックを外しておくと、記事末尾に空欄が表示されることを防げます。コメントの受付自体を停止する場合は、投稿の編集画面にある「ディスカッション」設定も併せて確認してください。
投稿ごとに個別設定する（編集画面の「Layout Settings」）
ここまで紹介した設定は、サイト全体（すべての投稿）に適用されるルールです。しかし、特定の記事だけ見た目を変えたい場合もあります。Apuraでは、投稿の編集画面にある「Layout Settings」メタボックスから、記事ごとに以下の項目を個別に上書きできます。
| 項目 | 内容 |
|---|---|
| Layout | この記事だけ別のレイアウト（サイドバーの有無など）を適用、または「Full Width（全幅）」に変更 |
| Disable Entry Header | この記事のタイトル・メタ情報などのヘッダー部分を非表示にする |
| Disable Breadcrumbs | この記事のパンくずリストを非表示にする |
| Disable Vertical Spacing | この記事の上下の余白を詰める |
たとえば、ランディングページ風に作り込んだ特別な記事では、Layoutを「Full Width」にしつつ「Disable Entry Header」と「Disable Breadcrumbs」を有効にすることで、タイトルやパンくずリストを表示せず、ブロックエディターで組んだデザインだけを画面いっぱいに表示できます。
この設定は、編集画面右側のサイドバー（投稿設定パネル）から確認できます。表示されていない場合は、画面右上のオプションメニューからパネルの表示設定を確認してください。
まとめ
Apuraの「Single」パネルを使うと、投稿ページのレイアウトと幅（General）、タイトルの表示位置とデザイン（Title）、そしてタイトル前後・本文下に表示する要素の並び順（Structure）を、コードを書かずに細かく調整できます。さらに、編集画面の「Layout Settings」を使えば、記事ごとに個別の見た目を設定することも可能です。
まずはGeneralでベースとなるレイアウトを決め、次にTitleで第一印象となるタイトル表示を調整し、最後にStructureでメタ情報の見せ方を整える、という順番で進めると、全体のバランスを取りながら設定しやすくなります。サイトのジャンルや記事の種類に合わせて、いくつかの組み合わせをプレビューで試してみてください。