ポンパレモールに出店されている方向けの記事となります。
ポンパレモールと言えば、ページ作成において使用できるタグが制限されており作りづらい仕様でした。しかし、2014年12月からタグの規制が一部緩和されました。緩和されたものは以下の通りです。
- linkタグが使用可能
- styleタグが使用可能
スタイルシート（CSS）関連の規制が緩和されてデザイン的にかなりやりやすくなり、link タグが許容された事で外部 CSS を使う事も可能になりました。
ポンパレモールproで外部CSSを利用
外部 CSS を使うためにはポンパレモール pro を使う必要があります。ポンパレモール pro とは楽天で言う gold スペースと同じで各ショップで自由に使えるフリースペースの事です。
ポンパレモール pro を利用するためには、ポンパレモール管理画面より利用申請をする必要があります。（無料です）
詳しくは公式ヘルプで「ポンパレモールpro」を検索するなどして頂きご確認ください。
外部CSSの使い方
ポンパレモール pro のスペースで外部読み込み用の CSS をアップロードします。
ポンパレモール管理画面よりデザイン設定から「ヘッダー・フッター・サイドバー」を開きます。
テンプレートの中から使用しているテンプレートを編集します。
ヘッダーコンテンツの中にも link タグの使用が許可されるようになりました。それにより外部 CSS を読み込むことが可能になります。以下のように記載します。
<link rel="stylesheet" href="CSSのURL" type="text/css" />
外部スタイルシートが使用可能になった事により、商品説明文の装飾等が容易になります。詰まった行間も広げる事ができます。
外部CSSが利用可能でもやってはいけない事もあるよ
外部 CSS が使える事により、商品ページ内も独自のデザインが可能になります。商品名の文字の大きさ、ショッピングカートボタンをオリジナルの物に変える等もできます。しかしここで罠があります。ポンパレモールの規約に外部 CSS を使ってやってはいけない事が記載されています。
ポンパレモールPROに配置したCSSまたは JavaScript を用いて、下記ページの デザイン改竄 や スクリプトの適用を一切行わないこと
(ア) PCトップページ
(イ) スマートフォントップページ
(ウ) カテゴリページ
(エ) 商品ページ
(オ) 複数商品ページ
(カ) 会社概要ページ
(キ) 支払・送料について
カートボタンも変更可能になると思いきや、規約で禁止されていました。これはちょっとガッカリですね。でもルールはルールなので守らなくてはいけません。
ようは、ショップ側で作成したコンテンツ以外は CSS などで弄るなと言っています。
おわりに
楽天などではショッピングカートボタンを独自のものに変えている所はよく見かけますが、ポンパレモールでは全く見かけません。それはこの規約が効いているわけです。
外部スタイルシートは使えますが、ポンパレモールでは極めて限定的な用途でしか使うことができません。違反したらどんな処置が来るかわかりませんので、注意しましょう。