【Xwriteカスタマイズ】記事ヘッダーの表示順を変更する方法｜パンくず・アイキャッチ・タイトルを並び替える

【Xwriteカスタマイズ】記事ヘッダーの表示順を変更する方法

Xwriteでは記事上部（articleHeader）に「パンくずリスト」「アイキャッチ画像」「タイトル」「メタ情報」が表示されます。

デフォルトの並び順を変更したい場合は、CSSでflexとorderを使うことで簡単にカスタマイズできます。

デフォルトの並び順

通常は次の順番で表示されています。

• パンくずリスト
• タイトル
• メタ情報
• アイキャッチ画像

■ パンくず ＞ アイキャッチ ＞ タイトル ＞ メタ情報 に変更する方法

ここで重要なのは、「なぜこのCSSが必要なのか」を理解することです。

Xwriteでは、デフォルト状態だと

• パンくずリスト
• サムネイル画像
• 記事タイトル

この表示順がテーマ設計上ほぼ固定されています。

通常利用であれば問題ありませんが、次のようなケースでは表示順の最適化が重要になります。

• 記事一覧の統一感を出したい
• ファーストビューで視線誘導を最適化したい
• ブログ型ではなくメディア型デザインに寄せたい
• 上部に情報を集約して回遊率を上げたい

特にコンテンツマーケティングを意識するなら、

• CTR（クリック率）
• 直帰率
• 滞在時間

これらに影響する可能性がある部分です。

実際、パンくずリストの位置ひとつで「読者の安心感」や「今どの階層にいるか」の認知が変わります。

また、サムネイル位置が変わることで、スマホ表示時のスクロール体験も大きく変化します。

Xwriteはブロックベースで柔軟なテーマですが、この部分だけは管理画面の設定では変更できません。

そのため、CSSで構造をコントロールする必要があります。

しかしここで注意点があります。

単純に order を指定するだけでは、レスポンシブ時に崩れるケースがあります。

• PCではうまくいくのにスマホで崩れる
• 余白が不自然になる
• タイトル位置が微妙にズレる
• アップデート後に効かなくなる

今回紹介する方法は、

• PC / SP 両対応
• XWRITEアップデート耐性あり
• 他ブロックへの影響なし
• 余白も同時に最適化

という条件を満たす形で設計しています。

単なる並び替えではなく、「テーマ構造を壊さずに順番だけ入れ替える方法」です。

ここから先では、

• 仕組みの解説
• コピペで使えるCSSコード

を具体的に解説します。

以下のCSSを「外観 → カスタマイズ → 追加CSS」に貼り付けてください。

/* articleHeaderをflex化 */
.articleHeader{
  display: flex;
  flex-direction: column;
}

/* パンくず */
.articleHeader .breadcrumbs{
  order: 1;
}

/* アイキャッチ */
.articleHeader .post-thumbnail{
  order: 2;
}

/* タイトル */
.articleHeader__title{
  margin-top: 1em;
  order: 3;
}

/* メタ情報 */
.articleHeader__info{
  order: 4;
}

/* articleHeaderをflex化 */
.articleHeader{
  display: flex;
  flex-direction: column;
}

/* アイキャッチ */
.articleHeader .post-thumbnail{
  order: 1;
}

/* パンくず */
.articleHeader .breadcrumbs{
  order: 2;
}

/* タイトル */
.articleHeader__title{
  margin-top: 1em;
  order: 3;
}

/* メタ情報 */
.articleHeader__info{
  order: 4;
}