こちらの記事は、2016年3月から内容を修正の上「繁盛レシピ」に再掲載しました！こちらからご確認できます。

こんにちは！あらあらまぁまぁ、ogaRia中村です。

先日投稿した「Yahoo!ストアに縦帯バナーを表示する方法」に続き、Yahoo!ストア出店者様へのネタを書いてみました。

インラインでしかCSS記述できないYahoo!ストアマネージャー…

Yahoo!ストアマネージャー内のフリースペースでは、<style>～</style>の記述ができません(困)。その為、CSSはHTMLの中にインラインで記述する必要があります。

例えば楽天ショップで作ったCSSをYahoo!ストアで使う場合…

▼楽天ショップで作成したCSS

<style type="text/css">
<!--
img {　border:none;　}
a {　color:#f60;　text-decoration:none;　font-size:120%;　}
-->
</style>

<a href="1.html" target="_blank"><img src="#.jpg" alt="**" /></a>
<a href="2.html" target="_blank"><img src="#.jpg" alt="**" /></a>

　
▼こうやってインラインに書き直す必要があります。

<a href="1.html" target="_blank" style="color:#f60;text-decoration:none;font-size:120%;" ><img src="#.jpg" alt="**" style="border-style:none;" /></a>
<a href="2.html" target="_blank" style="color:#f60;text-decoration:none;font-size:120%;" ><img src="#.jpg" alt="**" style="border-style:none;" /></a>

　
こんなぶっ飛んで面倒な作業を、一発でやってくれる無料サービスがあるんです！それが「CSS inliner」。

CSS inlinerって？

http://inliner.cm/

「Campaign Moniter」というオンラインのメーリングサービスが提供している無料サービスです。先般の通り、CSSをインライン記述に一発変換してくれます。会員登録など必要なく即利用できます。

使い方

2秒でできますよ～！

1. このページに行って…
   
2. ここにCSSとHTMLを貼り付けて…
   
3. 「MAKE IT INLINE」をクリック！
   
4. 出力されました。
   

あとは出力されたHTML部分をYahoo!ストアマネージャー内にコピペするだけ！

　
　
Yahoo!ストア構築時以外にも、HTMLメルマガ制作時にも重宝します。
楽天ショップのレイアウトをそのままYahoo!ストアに引き継ぎたい方は、作業軽減になるかと思いますので是非お試しくださいませ！

以上、ogaRia中村でした。

関連記事

【コピペで完了】Yahoo!ストアに縦帯バナーを設置するHTMLソース 【ネットショップ出店ビギナー必見！】お買物かご付近のスペック表テンプレート３デザイン 【楽天ショップ用】クリックで下層が出現するアコーディオンカテゴリの作り方 「お買物かごボタン」を画像に差替える方法 (楽天ショップ版)