← プレビュー一覧に戻る

PR #178: iResearchリワードボタン追加

実装内容:

マイページトップに「iResearchリワード」ボタンを追加（4つ目）
レスポンシブレイアウト：PC版4列、SP版2x2グリッド
アイコン：「P+」テキスト（固定フッターと同様）
カラー：ブランドカラー #FE813B

実装プレビュー

確認ポイント:
・PC版（画面幅768px以上）：4つのボタンが横1列に並ぶ
・SP版（画面幅768px未満）：2x2グリッド（2列2行）に配置
・ホバー時に背景色が変わる
・すべてのボタンが同じ高さ（64px）

仕様詳細

項目	PC版（≥768px）	SP版（<768px）
レイアウト	4列横並び（grid-cols-4）	2x2グリッド（grid-cols-2）
ボタン高さ	64px（h-16）
ボタン間隔	12px（gap-3）
テキストサイズ	16px（text-base）	12px（text-xs）
P+アイコンサイズ	24px（text-2xl）	20px（text-xl）

各ボタンの配色

ボタン	テキスト色	ボーダー色	ホバー背景色
WEBアンケート	text-blue-500	border-blue-400	hover:bg-blue-400
リサーチDEMO	text-red-400	border-red-400	hover:bg-red-400
インタビュー	text-yellow-600	border-yellow-600	hover:bg-yellow-600
🆕 iResearchリワード	#FE813B	#FE813B	hover:bg-[#FE813B]

実装コード

HTML構造（Smartyテンプレート）

<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-8 w-full">
  <!-- WEBアンケート -->
  <a href="#tabQuestion1" class="relative h-16 group bg-white text-blue-500 rounded border border-blue-400 hover:bg-blue-400 hover:text-white border-solid">
    ...
  </a>

  <!-- リサーチDEMO -->
  <a href="#tabQuestion2" class="px-1 relative h-16 group bg-white text-red-400 rounded border border-red-400 hover:bg-red-400 hover:text-white border-solid">
    ...
  </a>

  <!-- インタビュー -->
  <a href="#tabQuestion3" class="px-1 relative h-16 group bg-white text-yellow-600 rounded border border-yellow-600 hover:bg-yellow-600 hover:text-white border-solid">
    ...
  </a>

  <!-- 🆕 iResearchリワード -->
  <a href="#offerwall-section" class="relative h-16 group bg-white rounded border border-solid hover:bg-[#FE813B] hover:text-white border-solid" style="color: #FE813B; border-color: #FE813B;">
    <div class="flex items-center justify-center h-full">
      <div class="text-xl md:text-2xl font-bold mr-2" style="color: #FE813B;">P+</div>
      <span class="text-xs md:text-base font-bold text-center">iResearch<br>リワード</span>
    </div>
  </a>
</div>
      

主要Tailwindクラス

レイアウト:
- grid: グリッドレイアウト有効化
- grid-cols-2: SP版2列
- md:grid-cols-4: PC版4列（768px以上）
- gap-3: アイテム間隔12px

ボタン:
- h-16: 高さ64px
- group: 子要素のgroup-hover制御
- hover:bg-[#FE813B]: 任意値ホバー背景色

レスポンシブテキスト:
- text-xs: SP版12px
- md:text-base: PC版16px
- text-xl: SP版アイコン20px
- md:text-2xl: PC版アイコン24px
      

変更ファイル

irs/webapp/monitor/view/tpl/mypage/top.tpl
- line 191: バナー画像パス更新
- lines 1251-1286: ボタングループのグリッド化 + リワードボタン追加
- line 1658: リワードセクションにID追加
irs/webapp/monitor/view/tpl/mypage/offerwall_about.tpl
- line 22: バナー画像パス更新

💡 レスポンシブ確認方法:
ブラウザのDevToolsを開き（F12）、デバイスツールバー（Ctrl+Shift+M）でスマートフォン表示に切り替えて確認してください。
画面幅768px未満で2x2グリッド、768px以上で4列横並びになります。

← プレビュー一覧に戻る