← プレビュー一覧に戻る

PR #175: offerwall_aboutページにiResearchリワードバナー画像を追加

概要: offerwall_aboutページの見出し直下に、iResearchリワードのバナー画像を追加
関連: PR #175

📋 実装内容

追加箇所: 見出し「iResearchリワードについて」の直下
画像ファイル: images/offerwall/pointget_bnr_20251201.png
スタイリング:
- PC: 画像の元サイズ（400 x 149px）、中央揃え
- SP: 画面幅いっぱい
- 角丸: border-radius: 8px
Tailwindクラス: w-full md:w-auto mx-auto
alt属性: "iResearchリワードでポイントが貯まる"

💻 PC表示プレビュー（画像の元サイズ 400 x 149px）

iResearchリワードについて

iResearchリワードでポイントを貯める →

📱 SP表示プレビュー（画面幅いっぱい）

確認方法: ブラウザの開発者ツールでモバイル表示に切り替えて確認してください

iResearchリワードについて

iResearchリワードでポイントを貯める →

🔧 技術仕様

Tailwindクラス

text-center - 親要素で画像を中央揃え
w-full - SP: 画面幅いっぱいに表示
md:w-auto - PC (md以上): 画像の元サイズ（400px）で表示
mx-auto - 左右中央揃え

インラインスタイル

border-radius: 8px - 角を丸める

ディレクトリ構造

html/monitor.i-research.jp/htdocs/mypage/images/offerwall/
├── pointget_bnr_20251201.png (38KB) - 今回追加
└── iresearch_banner_skyflag.png (91KB) - 将来の使用に備えて配置

画像ファイル命名規則

既存の pointget_bnr.png の日付付きバージョン管理方式を採用

📝 変更ファイル一覧

irs/webapp/monitor/view/tpl/mypage/offerwall_about.tpl - バナー画像ブロックを追加
html/monitor.i-research.jp/htdocs/mypage/images/offerwall/pointget_bnr_20251201.png - 新規追加
html/monitor.i-research.jp/htdocs/mypage/images/offerwall/iresearch_banner_skyflag.png - 新規追加

✅ レスポンシブ対応の確認ポイント

PC表示（768px以上）

画像の元サイズ（400 x 149px）で表示されている
中央揃えで表示されている
角が丸く表示されている

SP表示（768px未満）

画面幅いっぱいに表示されている
左右の余白が適切
見出しの直下に配置されている

← プレビュー一覧に戻る | PR #175を見る