製品ページ トップ用タイトル

• トップの画像はclassを"common-top-title-area"で指定した「section」タグ内に記述する必要があります。
• 以下のようにトップ画像とキャッチコピー、概要説明（PRテキスト）をセットで「section」タグ内に記述してください。
• <!-- PR画像 start --> から <!-- PR画像 end --> 内を以下のパターン1~4から選んで置き換えてください。

4つのパターンを用意しましたので、画像やロゴ、アイコンの有り無しで選択してください。

• パターン1は、従来通りトップの画像を用意してください。サイズは幅 1600px 程度を推奨します。
• パターン2は、決まった製品のロゴがある場合にご利用ください。ロゴ周りが透過するPNGをご利用ください。 → 例
• パターン3は、決まったロゴがなく、製品用のイメージアイコンがある場合にご利用ください。 → 例
• パターン4は、決まったロゴも製品用のイメージアイコンもない場合にご利用ください。 → 例

背景画像は各製品の画像フォルダ「productname_img」内に保存して、 <div class="common-top-title-bg" style="background-image:url('./productname_img/bg03.jpg');"> 内の「./productname_img/bg03.jpg」をその画像のURLで指定してください。
背景画像は最小でも幅 1000px以上を用意してください。（1600～2000px程度推奨）
画像が大きいので、透過させる必要がない場合はjpgを利用することをお勧めします。

パターン1:画像

タイトル用の画像を用意してください。

パターン2：背景 + 製品ロゴ画像

背景画像の上に製品ロゴなどを透過画像で配置しています。

パターン3：背景 + アイコン + 製品名テキスト

背景画像の上に製品アイコンと製品名（テキスト）を配置しています。

パターン4：背景+製品名テキストのみ

背景画像の上に製品名（テキスト）のみを配置しています。

汎用背景画像