affinger6のトップページ、固定ページにするかカード型を混ぜるかで迷いがちですよね。
この記事ではクリックだけでカード型一覧を整える方法と、子テーマを使った安全カスタマイズを一気に解説。テーマオプションの裏技設定やLightningウィジェット活用術まで盛り込み、「まず何をすればいい？」がすぐ分かるでしょう。
さらに親テーマを直接いじると更新で全部消えるリスクも整理したので、安心して作業を進められるはずですよ。自分だけの“お店の看板”を作る第一歩、今すぐ踏み出したいですね？
この記事のポイント
- 固定ページ型手順理解
- カード一覧設定方法
- 子テーマ安全編集
- 更新時の注意点
affinger6でトップページを作る手順
固定ページサイト型の作り方
固定ページをトップに置くと「お店の看板」みたいに分かりやすくなります。
手順はとてもシンプルです。いったん流れを表でまとめますね。
| ステップ | やること |
|---|---|
| 1 | 「トップページ」と「新着記事」用の固定ページを作成 |
| 2 | WordPress「設定 › 表示設定」でホームに固定ページを指定 |
| 3 | 「AFFINGER管理 › トップページ › 記事一覧」で一覧表示をON |
| 4 | 必要ならCSSでトップだけアイキャッチやサイドバーを非表示 |
これで2025年7月4日更新の公式ガイドと同じ流れになります。
前述の通り、新着記事リンクを自分で入れないと最新記事が見えなくなる点には注意しましょう。
便利さと手間のバランスを考えて選ぶと良いでしょうか？
記事一覧カード型表示方法
カード型は写真付きで記事を並べられるので、読者がパッと選びやすいですよね。
作り方を箇条書きにします。
- 投稿画面で「AFFINGER:記事一覧」ブロックを追加
- 「スタイル」からカード型を選択し列数を設定（2～4列が見やすい）
- 抜粋文字数やアイキャッチサイズを調整して完成
画像が並ぶだけでプロっぽいデザインになります。
一方でカードが多いと表示速度が遅くなるため、10枚程度に抑えると快適でしょう。
設定は簡単ですので安心してくださいね！
WordPressテンプレート編集方法
テンプレートを直接触ると自由度がぐっと上がります。
ただし失敗すると真っ白…なんてこともあるので、以下の順で安全に進めると良いでしょう。
- 子テーマを作成し、親テーマ（AFFINGER6）を完全コピー
- FTPや「テーマエディター」で
header.phpやsingle.phpを編集 - 変更後はシークレットウィンドウで表示チェック
- 不具合があれば子テーマを元に戻して修正
コードを触る前にバックアップを取れば安心でしょう。
前述の通り、直接本番ファイルを編集するのは危険なので、一度テスト環境で試すとミスを減らせますね。
WordPressフルサイト編集とは
フルサイト編集（FSE）はWordPress 5.9から加わった新機能で、ヘッダーやフッターまでブロックで作れる仕組みです。
ポイントを表にまとめます。
| 良いところ | 気を付けるところ |
|---|---|
| ドラッグ操作だけでサイト全体をデザイン可能 | 対応テーマでないと使えない |
| コードを書かずにレイアウト変更 | 慣れないとブロック数が増えごちゃつく |
現在（2025年時点）ではAFFINGER6はFSEに部分対応の段階です。
まずはテストサイトで触ってみると「なるほど！」と理解が深まるでしょうか。
将来的にはトップページもブロックだけで完結する流れですので覚えておくと役立ちますね。
affinger6トップページをカスタマイズ
テーマ完全コピーカスタマイズ手順
子テーマを作れば元データを壊さず安心して編集できます。
まず親テーマ「AFFINGER6」をまるごとコピーして子テーマを用意しましょう。公式マニュアル（2025年7月4日更新）でも推奨されています。
| 手順 | ポイント |
|---|---|
| 1.子テーマをダウンロード | AFFINGER公式サイトから取得 |
| 2.FTPで /wp-content/themes/ にアップ | フォルダ名を変えずそのまま |
| 3.WordPress管理画面で子テーマを有効化 | デザインは親と同じまま |
4.style.css や functions.php を編集 |
変更は子テーマ側だけ |
作業中にエラーが出ても子テーマを無効にすれば元に戻せますよ。親テーマを直接編集するとアップデートで上書きされるので避けた方が安全でしょう。
WordPressテーマオプションスタイル編集場所
色やレイアウトを変える場所は大きく２つあります。
ダッシュボード左メニューの「外観 › カスタマイズ」と「AFFINGER管理」です。
:contentReference{index=1}
- カスタマイズ → 追加CSS
細かな色・余白をCSSで調整 - AFFINGER管理 → 全体設定
ヘッダー幅やフォントサイズを簡単に変更 - AFFINGER管理 → トップページ
記事一覧やバナー位置をクリックで設定
便利ですが項目が多くて迷いますよね。
そんなときは「ライブプレビュー」で変更前後を見比べると失敗が減りますね。
保存前にスマホ表示も必ずチェックすると安心でしょう。
Lightningウィジェット概要
Lightningウィジェットは、見出し付きボックスやプロフィールカードなどをドラッグ操作で設置できるデザインパーツ集です。
AFFINGER6のウィジェット画面と使い方が似ているので覚えやすいですね。
:contentReferenceindex=2}
| ウィジェット名 | 用途 |
|---|---|
| Lightning Advanced Unit | CTAボタンや装飾付き見出し |
| Lightning Profile | 運営者プロフィールをカード表示 |
| Lightning News List | お知らせ記事を自動一覧 |
いずれもコード不要で設定できるので、サイト型トップページを素早く作りたい人にはぴったりですよ。
とはいえウィジェットを詰め込み過ぎると表示速度が落ちるため、３～５個に絞ると読みやすいでしょうか。
affinger6でトップページを3分で作る！カード表示も簡単：まとめ
Q&Aでまとめますね。
質問（Q）：固定ページをトップにするメリットは？
回答（A）：迷わず内容を示す看板となり回遊率アップ。
質問（Q）：記事一覧をカード型にする効果は？
回答（A）：写真で訴求しクリック数を自然に伸ばせます。
質問（Q）：子テーマを丸ごとコピーする理由は？
回答（A）：元テーマを守りつつ自由にカスタムでき更新も安全。
質問（Q）：テンプレート編集で最初に注意する点は？
回答（A）：バックアップせず触ると真っ白表示の危険。
質問（Q）：テーマオプションで注目の設定は？
回答（A）：追加CSSで細部を整えつつ表示速度も維持。
質問（Q）：フルサイト編集(FSE)とは？
回答（A）：ブロック操作だけで全ページを一括レイアウト。
質問（Q）：Lightningウィジェットの使いどころは？
回答（A）：ドラッグだけで装飾が即完成。
この記事で理想のトップ構築手順が見えたでしょう。今日から試してサイトをもっと魅力的に育ててくださいね。最後まで読んでくださり、ありがとうございました！