WEB MANUAL

オプションページの使い方

オプションページの使い方

このページでは、ACFオプションページでのサイト全体設定の管理方法について説明します。

オプションページとは

オプションページは、サイト全体に影響する設定を一元管理するためのページです。ACF（Advanced Custom Fields）で作成され、トップページの画像設定やサイト全体で使用する情報を管理できます。

オプションページへのアクセス

  1. カスタムフィールドメニューを開く
    左側メニューから「カスタムフィールド」をクリック
  2. 「オプション」を選択
    サブメニューの「オプション」をクリック
  3. 「サイト設定」タブを確認
    オプションページで「サイト設定」タブが選択されていることを確認

設定可能な項目

メインビジュアル設定

fv_img（メインビジュアル画像）

用途：トップページのメイン画像（PC用）

推奨サイズ：1920px × 800px以上

ファイル形式：JPEG、PNG、WebP

設定方法
  1. 「画像を選択」ボタンをクリック
  2. メディアライブラリから既存画像を選択するか、新しい画像をアップロード
  3. 適切なサイズの画像を選択
  4. 「選択」をクリック

fv_img_sp（メインビジュアル画像_SP）

用途：トップページのメイン画像（スマートフォン用）

推奨サイズ：750px × 1000px以上

注意：未設定の場合はPC用画像が使用されます

ピックアップバナー設定

pickup_banner（ピックアップバナー）

用途：トップページのスライダーバナー

タイプ：繰り返しフィールド（複数設定可能）

各バナーの設定項目
  • pickup_banner_img：バナー画像
  • pickup_banner_link：クリック時の遷移先URL
新しいバナーの追加方法
  1. 「行を追加」をクリック
    ピックアップバナーセクションの「行を追加」ボタンをクリック
  2. バナー画像をアップロード
    「pickup_banner_img」で画像を選択
  3. リンク先URLを入力
    「pickup_banner_link」にクリック時の遷移先URLを入力
  4. 順序を調整（必要に応じて）
    ドラッグ&ドロップで表示順序を変更可能

画像のベストプラクティス

画像サイズの最適化

  • ファイルサイズ：1MB以下を推奨
  • 解像度：Web用に72dpiで最適化
  • 形式：JPEG（写真）、PNG（ロゴ・イラスト）
  • 圧縮：品質を保ちながら適度に圧縮

画像の統一性

  • 色調やトーンを統一
  • ブランドイメージに合致
  • 季節感や時期を考慮
  • 製品の魅力が伝わる構図

設定変更の手順

基本的な変更手順

  1. オプションページにアクセス
    上記の方法でオプションページを開く
  2. 変更したい項目を編集
    該当するフィールドで内容を変更
  3. プレビューで確認（推奨）
    可能であれば、別タブでサイトを開いて変更予定の内容を想像
  4. 「更新」をクリック
    ページ下部の「更新」ボタンで変更を保存
  5. フロントエンドで確認
    実際のサイトで変更が反映されているか確認

画像の差し替え手順

  1. 既存画像を削除
    画像フィールドの「削除」ボタンをクリック
  2. 新しい画像を選択
    「画像を選択」で新しい画像をアップロードまたは選択
  3. 画像詳細を確認
    代替テキスト、サイズなどを確認・設定
  4. 設定を保存
    「更新」ボタンで変更を保存

よくある設定例

季節ごとのメインビジュアル変更

春（3-5月）

新製品や新生活をイメージした明るい画像

夏（6-8月）

涼しげな色調、アウトドアシーンの画像

秋（9-11月）

温かみのある色調、収穫をイメージした画像

冬（12-2月）

落ち着いた色調、温かさを感じる画像

キャンペーン時のバナー設定

  1. キャンペーンバナーを作成
    キャンペーン内容を含んだバナー画像を制作
  2. ピックアップバナーに追加
    「行を追加」で新しいバナーを追加
  3. 遷移先ページを設定
    キャンペーンの詳細ページやお問い合わせページへのリンクを設定
  4. キャンペーン終了後は削除
    期間終了後は該当バナーを削除

SEO・アクセシビリティ対策

代替テキスト（alt属性）の設定

画像設定時には必ず代替テキストを設定：

  • 画像の内容を簡潔に説明
  • 視覚障害者の方への配慮
  • SEO効果の向上
  • 画像が表示されない場合のフォロー

ファイル名の最適化

  • 意味のあるファイル名を使用
  • 英数字とハイフンのみ使用
  • 例：「ecore-main-visual-2024.jpg」
  • 日本語や特殊文字は避ける

バックアップとセキュリティ

変更前のバックアップ

  • 重要な変更前は現在の画像をダウンロードして保存
  • 設定内容をテキストファイルにメモ
  • 変更日時と変更内容を記録

セキュリティ対策

  • 信頼できる画像のみアップロード
  • 外部URLの設定時は安全性を確認
  • 定期的な設定内容の見直し
  • 不要な画像ファイルの削除

注意事項
• オプションページの変更はサイト全体に影響します
• 変更前には必ずバックアップを取ってください
• 大きな変更は閑散時間帯に行うことを推奨します
• 不明な項目は変更しないでください

トラブルシューティング

画像が表示されない場合

  • ファイルサイズが大きすぎないか確認
  • ファイル形式が対応しているか確認
  • キャッシュをクリアして再確認
  • 別の画像で動作確認

リンクが機能しない場合

  • URLの入力ミスがないか確認
  • https:// から始まる完全なURLか確認
  • リンク先ページが存在するか確認
  • 特殊文字が含まれていないか確認
問い合わせ内容の確認 メニュー・ウィジェット設定