MENU
  1. ホーム
  2. クライアント
  3. 盛田屋
  4. ［盛田屋様］キャンペーンページコーディング【ツール使用版】

［盛田屋様］キャンペーンページコーディング【ツール使用版】

盛田屋
ashikagamitsumi

本マニュアルは、豆腐の盛田屋さまのキャンペーンページを、コーディングツールを用いてコーディングする場合の手順です。
※よりどりキャンペーンの構築は対象外です。

目次

📋 目次

  1. 作業開始前の準備（フォルダ構造・index.aspx・tdk.ascxの編集）
  2. コーディングツールでできること
  3. ツールの基本操作（ステップバイステップ）
  4. パーツの設定ガイド
  5. 生成コードの読み方（bscstm入門）
  6. よくあるQ&A

CHAPTER 1：作業開始前の準備

コーディングツールを使う前に、フォルダの準備と index.aspx・tdk.ascx の編集が必要です。順番に確認しましょう。

フォルダ構造を理解する

TOFのキャンペーンページは、RPの仕組み上 PCとスマートフォンそれぞれに index.aspx が必要 です。ただし、ページの中身（コンテンツ）は content.ascx という1つのファイルに書いて、PC・SP両方から共通で読み込む形になっています。

前月のキャンペーンページのデータ(ext/campaign/cp2605xxx/ フォルダをまるごと)をダウンロードし、編集開始するのがスムーズです。

💡 ポイント
自分で書くのは content.ascx（コンテンツ本文）だけ。index.aspx はパスとタイトルを書き換えるだけでOKです。

📁 root（PC用フォルダ構造）

  • ext/campaign/cp2605xxx/
    • css/
    • img/
    • js/
    • content.ascx （コンテンツ本文：ここをツールで作る）
    • tdk.ascx （keyword・description管理）
    • index.aspx （title・読込ファイル指定）

📁 SmartPhone（SP用フォルダ構造）

  • ext/campaign/cp2605xxx/
    • index.aspx （title・読込ファイル指定のみ）

※SPフォルダには index.aspx のみ配置し、コンテンツはPC側の content.ascx を共通で参照します。

✅ 作業の始め方
ベースとなる既存キャンペーンのフォルダ（PC・SP両方）をまるごとコピーし、新しいキャンペーンコード名にリネームして作業を始めると効率的です。

index.aspx ① ── 読み込みパスを変更する

コピーしたフォルダの index.aspx（PC・SP両方）を開き、content.ascx と tdk.ascx の読み込みパスを 新しいキャンペーンコードに書き換え ます。

<%-- コンテンツ 読み込み --%>
<%@ Register TagPrefix="uc" TagName="ContentHtmlInclude" Src="~/ext/campaign/cp2605xxx/content.ascx" %>
<%@ Register TagPrefix="uc" TagName="ContentTDKInclude" Src="~/ext/campaign/cp2605xxx/tdk.ascx" %>

⚠ 注意
PC用 index.aspx と SP用 index.aspx の 2ファイル両方 を書き換えてください。片方だけ変更すると、PCまたはSPでページが壊れます。

index.aspx ② ── タイトルを編集する

同じ index.aspx の先頭行にある Title=”…” の部分を、今回のキャンペーンのページタイトルに書き換えます。

<%@ Page Title="大豆の知恵を食卓へ! サポート食品20%OFF│豆腐の盛田屋＜公式＞豆乳スキンケア化粧品" Language="C#" Inherits="ContentsPage" MasterPageFile="~/Form/Common/CampaignPage.master" %>
書き方のルール 例
キャンペーン名 大豆の知恵を食卓へ! サポート食品20%OFF
区切り文字 │（全角縦棒）
ブランド名 豆腐の盛田屋＜公式＞豆乳スキンケア化粧品

tdk.ascx ③ ── descriptionを編集する

tdk.ascx はキャンペーンページの SEOメタ情報（description・keywords）を管理するファイルです。PCフォルダ内に1つあります。

<meta name="description" content="大豆の知恵を食卓へ! サポート食品20%OFFのページです。豆乳由来の自然派化粧品にこだわる、豆腐の盛田屋公式サイトです。お肌...">
  • description：先頭の「○○のページです。」部分のみ書き換える。
    〇〇の部分は「index.aspx」のtitleタグに入力したキャンペーン名と一致させます。
    ——————
    例）
    title：大豆の知恵を食卓へ! サポート食品20%OFF｜豆腐の盛田屋<公式>豆乳スキンケア化粧品
    description：大豆の知恵を食卓へ! サポート食品20%OFFのページです。豆乳由来の自然派化粧品に…
    ——————
    ※「豆乳由来の自然派化粧品にこだわる、」以降の固定文は変更しない。

  • keywords：変更不要。そのまま残す。

⚠️ 注意
description の後半（「豆乳由来の自然派化粧品にこだわる、豆腐の盛田屋公式サイトです。」以降）は全キャンペーン共通の固定文です。誤って削除・変更しないよう注意してください。

CHAPTER 2：コーディングツールでできること

▼コーディングツール
E:\共有ドライブ\02.コンサル･制作事業\02.進行中案件\10.豆腐の盛田屋様\02.サイト構築\00.季刊誌\作業ツール\tof_normalCam_Corder
tof_campaign_generator.html

TOFのキャンペーンページは、content.ascx というファイルにHTMLを書いて作ります。このHTMLをゼロから手書きするのは大変なので、コーディングツールを使って自動生成します。

  • GUIでパーツ（画像・ボタンなど）を組み合わせてページを組む
  • プレビュー画面でPC・SP両方の見た目を確認できる
  • 規約に沿ったコードを自動で出力してくれる（余白計算・クラス記述など）
  • カートインURLも自動で組み立ててくれる

作業の全体フロー

  1. 画像をテスト環境にアップする：デザイナーからもらった画像ファイルを、テストサーバーの所定フォルダに配置します。
  2. ツールでページを組む：コーディングツールを開き、セクション・パーツを追加しながらページを組み立てます。
  3. プレビューで確認する：PC・SP両方のプレビューでレイアウトに問題がないか確認します。
  4. コードをコピーして貼り付ける：生成されたコードをコピーし、content.ascx の main_wrap というクラスがついたdivの中に貼り付けます。
  5. JSファイルをアップする（必要な場合）：アコーディオンや商品詳細モーダルを使う場合は、style.js もダウンロード・アップが必要です。

CHAPTER 3：ツールの基本操作

インストールは不要です。ChromeまたはEdgeブラウザで tof_campaign_generator.html を開いて作業を開始します。

STEP 1 ： URL欄を入力する

ツールを開いたら最初に、編集エリア上部のURL欄にキャンペーンのパス（例：cp2605xxx）を入力します。これによりプレビューの画像参照先が自動で切り替わります。

STEP 2 ： 画像をテスト環境にアップする

プレビュー表示のために、先に以下のフォルダへ画像をアップしてください。
/R1205_TofuMoritaya_Test/ext/campaign/〈URLに入力した値〉/img/

STEP 3 & STEP 4 ： セクションと子パーツの追加

「＋ セクションを追加」ボタンで大枠を作ったあと、セクション内部のパーツ追加ボタン（画像・ボタン・アコーディオン・定期注意書き・注釈テキストなど）をクリックして配置していきます。

STEP 5 & STEP 6 ： プレビュー確認と貼り付け

右パネルの「PC」「SP」ボタンで表示幅を切り替えて確認し、問題なければ「コードをコピー」して content.ascx の main_wrap の中に貼り付けます。

<div class="main_wrap">
    <!-- ↓ここにツールで生成したコードを貼り付け -->
</div>

CHAPTER 4：パーツの設定ガイド

余白（margin）の入力について

すべてのパーツにある余白入力欄には、PC用の値を入れるだけでOKです。SP用の値はツールが自動で「PC × 0.5」の計算を行い、クラス（mt-20px など）を自動入力します。SP側を手動で変更したい場合は、SP欄に直接数値を入力すると手動設定が保持されます。

画像パーツの「ファイル選択」について

画像パーツでローカルのファイルを選択すると、画像の実寸サイズ（width / height）が自動的に取得されてコードに反映されます。

ボタンパーツのカートイン設定

カートボタンの場合、商品の種別（通常商品・バリエーション商品・定期商品）を選んでコードを入力するとカートURLを自動生成します。カートイン設定がされている場合は、通常のリンクURLよりもカートURLの出力が優先されます。

商品詳細モーダルの「2回目表示」

同じ商品コードのモーダルを同一ページに2回以上配置するときは、2個目以降のパーツで「2回目表示」チェックをONにします。これによりアンカーIDに -2 が付き、IDの重複を回避できます。

CHAPTER 5：生成コードの読み方（bscstm入門）

bscstmとは、HTMLの class 属性に書くだけでデザインを調整できる 社内CSSフレームワーク です。class="bscstm" がついたdivの中だけで有効になります。

<p class="mt-20px fz-14px">テキスト</p>

クラスの読み方：SP ＋ PC のセット

bscstmのクラスは「SP用 → PC用」の順で書くルールです。PC用のクラスには md- という文字が入ります。

例：class="mt-10px mt-md-20px"
→ SP（767px以下）では上の余白10px、PC（768px以上）では上の余白20px。

よく出てくるクラス一覧

  • mt-{数字}px ： 上の余白（margin-top）
  • mb-{数字}px ： 下の余白（margin-bottom）
  • px-{数字}px ： 左右の内側余白（padding左右）
  • w-{数字}p ： 幅（%） ※例: w-83p は幅83%
  • fz-{数字}px ： 文字サイズ
  • fw-bold ： 太字
  • text-center ： 中央揃え
  • mx-auto ： ブロック要素の左右中央配置
  • pc-only / sp-only ： PCのみ表示 / SPのみ表示

SP/PC 画像の出し分け（pictureタグ）

PCとSPで別画像を表示する場合、ツールは <picture> タグを自動出力します。<source> タグにSP用画像、<img> タグにPC用画像が割り当てられます。

CHAPTER 6：よくあるQ&A

Q：プレビューに画像が表示されない
A：テスト環境のサーバーに画像がアップされているか確認してください。ファイル名のスペルミス・大文字小文字の違い、ツールのURL欄の入力ミスが主な原因です。

Q：パーツを追加したのにプレビューに出ない
A：画像パーツは画像ファイルを選択（ローカルから選択だけで可）しないとコードが出力されません。

Q：アコーディオンをアップしたのに開閉しない
A：style.js がテスト環境の js/ フォルダにアップされていない可能性があります。ツールの「style.jsをダウンロード」ボタンから取得して配置してください。

Q：生成コードを一部手修正したい。どこを触ればいい？
A：コードをコピーして content.ascx に貼り付けた後、そのファイルを直接編集してbscstmのクラスを書き換えてください。

盛田屋

この記事を書いた人

ashikagamitsumiのアバター ashikagamitsumi

関連記事

目次