
WordPressテーマ Fleur 設定マニュアル
現在のVer.1.0.45
テーマのご利用はサーバー環境をご確認の上、ご利用ください。
動作環境:WordPress 6.4以上 / PHP 8.1以上(それより古い環境での動作確認は行っておりません)
1. インストールと初期設定
① テーマをインストールする
WP 外観 → テーマ → 新規追加 → テーマのアップロード から、お手元のZIPファイル(fleur.zip)をアップロードし、有効化します。
② パーマリンクを設定する
WP 設定 → パーマリンク を開き、パーマリンク構造を「投稿名」に変更します。
③ メディアのサイズを設定する
WP 設定 → メディア を開き、画像サイズを次のように設定します。
| 項目 | 設定値 |
|---|---|
| サムネイルのサイズ | 幅 150 × 高さ 150 |
| 中サイズ | 幅の上限 1600 × 高さの上限 200 |
| 大サイズ | 幅の上限 1024 × 高さの上限 1024 |
Fleurの各セクション(Hero・About・Service・Showcaseなど)は表示領域に合わせて画像を自動的にリサイズ・トリミングして表示します。アップロードする画像の推奨サイズは第6章を参照してください。
2. フロントページの作り方
フロントページの各セクションは、すべて テーマ 外観 → カスタマイズ から設定します。
基本の流れ
- テーマ 外観 → カスタマイズ を開く
- 左側に並ぶセクション(Hero・About・Service・Showcase・News・CTA・Map など)を順番に開き、文章・画像・背景・色を設定する
- 画面右側のプレビューを見ながら調整する
- 「公開」ボタンで保存する
サイト内を移動しながら設定したい場合は、カスタマイザーを閉じずに、プレビュー画面内のリンクをクリックして別ページに移動できます。
3. 各セクションの設定
Hero(メインビジュアル)
テーマ 外観 → カスタマイズ → Heroセクション
- 背景画像を最大4枚まで登録できます(スライドショーとして自動切り替え表示されます)
- 各画像には表示順を指定する数値(優先度)があり、数値が小さい順に表示されます
- キャッチコピー・サブテキストを設定できます
- 画像の推奨サイズは横1920px × 縦1080px程度です
Intro(Hero直下)
テーマ 外観 → カスタマイズ → Introセクション。見出しとサイトの説明文を追加します。イントロセクション説明文は、検索キーワードを意識して作成することをおすすめします。CTAボタンを設置して、お問い合わせなどに誘導することができます。
News(お知らせ)
テーマ 外観 → カスタマイズ → Newsセクション。通常の投稿とショーケースをお知らせとして表示する仕組みです。新規投稿は 投稿 → 新規追加 から作成します。ショーケースも同様に作成し、表示させたいショーケースカードのみ表示可能です。配色(タイトル色・日付色・枠線色・バッジ配色)を変更が可能です。
Service(サービス紹介)
テーマ 外観 → カスタマイズ → Serviceセクション。投稿の登録は テーマ2 管理画面の「サービス」メニュー(左メニュー)から行います(詳細は第4章)。表示順は新しい投稿が先頭になります。
About(会社・事業紹介)
テーマ 外観 → カスタマイズ → Aboutセクション。見出し・本文・画像を設定します。画像の推奨サイズは横1200px × 縦900px程度です。
Showcase(ショーケース) ※Fleur Freeなし
テーマ 外観 → カスタマイズ → Showcaseセクション。投稿の登録は テーマ2 管理画面の「ショーケース」メニュー(左メニュー)から行います(詳細は第4章)。画像は4:3の比率でトリミング表示されるため、あらかじめその比率に近い写真を用意すると綺麗に並びます。
CTA(お問い合わせ誘導) ※Fleur Freeなし
テーマ 外観 → カスタマイズ → CTAセクション。見出し・ボタン文言・リンク先・背景画像を設定します。プラグイン Contact Form 7 をインストール後、CF7を設定してください(設定詳細は省略)。お問い合わせのページは固定ページにCF7で作成したショートコードを貼り付けて作成してください。
Map(地図)
テーマ 外観 → カスタマイズ → Mapセクション。Googleマップの埋め込みコード(iframeのURL部分)を貼り付けます。Googleマップで住所を検索 →「共有」→「地図を埋め込む」から取得したURLを使用してください。
スクロールトップボタン
テーマ 外観 → カスタマイズ → スクロールトップボタン
- 表示のON/OFF
- 背景色・矢印の色
- 背景の不透明度
4. サービス・ショーケースの登録
サービスの登録
テーマ2 管理画面左メニューの「サービス」 → 「新規追加」
- タイトル・本文(説明文)を入力します(サービスカード・ダイアログにHTMLを出力可能|抜粋・ダイアログ詳細)
- アイキャッチ画像を設定します
- 公開します
サービスカードの追加と設定
- タイトル、説明文を追加します(HTMLは出力されません)
- 抜粋:フロントページの説明文にHTMLを追加して出力できます
- ダイアログ詳細テキスト:ダイアログ内の説明文。HTMLの追加が可能。例)
表示させたいページはこちら <a href="URL">表示させたいページ名</a> - 投稿の属性:フロントページに表示されるカードの順番を変えることができます
- アイキャッチ画像:ダイアログ内にアイキャッチ画像を表示します
増減させたい場合
front-page.php の中の $service_query = new WP_Query( ... ) の変更で増減が可能です。
$service_query = new WP_Query( array(
'post_type' => 'service',
'posts_per_page' => 12, // ← ここを変更
'orderby' => 'date',
'order' => 'DESC',
) );
ショーケースの登録 ※Fleur Freeなし
テーマ2 管理画面左メニューの「ショーケース」 → 「新規追加」
- タイトル・説明文(改行やリンクを含めることができます)を入力します
- アイキャッチ画像を設定します(4:3でトリミング表示されます)
- カテゴリ(works_category)を必要に応じて設定します
- 公開します
ショーケースの追加
- 本文に、ショーケースカードブロックを追加します(検索に「ショーケース」または「すべてを表示」で「デザイン・ショーケースカード」を選択)
- ショーケースのタイトル、ショーケースの項目を入力します
- 右のショーケースメニュー、ショーケースカテゴリーを追加・選択します
- 新着情報に掲載したい場合、右のショーケースメニュー、新着情報への掲載をオンにします
- 任意のスラッグ(英文で)を設定して、下書き保存または公開します
/showcase/ショーケースカテゴリー/)が自動的に発行されます。フロントページにはショーケースカード最新12件まで表示されます。増減させたい場合
front-page.php の中の $showcase_query = new WP_Query( ... ) の変更で増減が可能です。
$showcase_query = new WP_Query( array(
'post_type' => 'showcase',
'posts_per_page' => 12, // ← ここを変更
'orderby' => 'date',
'order' => 'DESC',
) );
5. LP・デフォルトテンプレートの使い方
キャンペーンページや特定商品の紹介など、フロントページとは別に独立したデザインのLPページを作りたい場合はLPテンプレートを、About・お問い合わせ・特商法・ガイドなど一般固定ページを作りたい場合はデフォルトテンプレートを使用します。
LP・ランディングページの作成
WP 固定ページ → 新規追加
- 画面右側の「ページ属性」→「テンプレート」から「LPテンプレート」を選択します
- 本文はブロックエディタで自由に組み立てます(全幅表示に対応したブロックが使用できます)
- 新着情報に掲載したい場合、右メニューの「NEWSセクションに掲載」をチェックします。
- 購入ページ・お問い合わせなどCTAフローティングバナーを、右メニュー「購入カード」から追加できます。
- 公開します
一般固定ページ(About・お問い合わせ)の作成
WP 固定ページ → 新規追加
- 画面右側の「ページ属性」→「テンプレート」から「デフォルトテンプレート」を選択します
- 本文はブロックエディタで自由に組み立てます
- 新着情報に掲載したい場合、右メニューの「NEWSセクションに掲載」をチェックします。
- 購入ページ・お問い合わせなどCTAフローティングバナーを、右メニュー「購入カード」から追加できます。
- 公開します
6. メディア設定と画像サイズ
きれいな表示のため、あらかじめ WP 設定 → メディア で、以下のように設定しておくことをおすすめします。
| 項目 | 推奨設定 |
|---|---|
| サムネイルの幅 | テーマの初期値のまま推奨 |
| アップロードする画像 | あらかじめ各セクションの推奨サイズにリサイズしてから使用 |
画像サイズの目安
| 用途 | 推奨サイズ | 備考 |
|---|---|---|
| Hero背景 | 1920 × 1080px | 最大4枚 |
| About | 1200 × 900px | 1枚 |
| Service アイキャッチ | 1200 × 900px | 投稿ごと |
| Showcase アイキャッチ | 1200 × 900px | 4:3にトリミング表示 |
| CTA背景 | 1920 × 1080px | 1枚 |
7. メニューの作成
Fleurにはヘッダー用(Primary)とフッター用(Footer)の2つのメニュー位置があります。それぞれ個別に作成・割り当てが必要です。
- WP 外観 → メニュー を開きます
- 「新規メニューを作成」から、ヘッダー用のメニューを1つ作成します(例:メニュー名「グローバルメニュー」)。固定ページや投稿、カスタムリンクなどをドラッグ&ドロップで追加してください
- メニュー編集画面の下部「メニュー設定」で、表示する位置に「Primary」をチェックし、保存します
- 同様に、フッター用のメニューをもう1つ新規作成します(例:メニュー名「フッターメニュー」)
- メニュー設定で「Footer」をチェックし、保存します
8. 他のテーマから乗り換える場合の注意点
- ショーケースやサービスなど、Fleur独自のカスタム投稿タイプで登録したデータは、テーマを他のものに切り替えても削除されません。ただし、他のテーマにはそれらを表示する仕組みがないため、画面上には表示されなくなります
- カスタマイザーで設定した内容(Hero画像、配色など)は、テーマ固有の設定のため、他のテーマに引き継がれません
- 既存のブログ運用サイトからFleurへ乗り換える場合、投稿一覧の表示方法が変わるため、事前に第2章「フロントページの作り方」の設定を行ってください
9. ライセンスキーの登録
有料版(ライセンス版)のFleurテーマは、有効化後にライセンスキーの登録が必要です。
- テーマ 外観 → テーマライセンス を開きます
- ご購入時にメールでお送りしたライセンスキーを入力します
- 「登録」をクリックします
10. よくある質問
最大4枚です。5枚目以降は登録欄自体がありません。
フロントページに表示されるのは、サービス・ショーケースともに最大12件(新しい順)です。それ以上登録しても、投稿自体は保存されますがフロントページには表示されません。
現在のバージョンでは最新5件固定です。
問題ありません。Yoast SEOなどが有効化されている場合、テーマ内蔵のSEO出力機能は自動的に停止し、プラグイン側の設定が優先されます。
付属していません。Contact Form 7などのプラグインと組み合わせてご利用ください。
商品一覧・カート・決済機能はテーマに含まれていないため、単体でのEC運用には向いていません。現在制作中の「Fleur for WooCommerce」の発売をお待ちください。お急ぎの方はご相談ください。