Yahoo!ストアマネージャーでの店舗構築は、CSSをインライン記述に一発変換する「CSS inliner」が便利。

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

Yahoo!ストアマネージャーでの店舗構築は、CSSをインライン記述に一発変換する「CSS inliner」が便利。
こんにちは!あらあらまぁまぁ、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って?

CSS inliner
http://inliner.cm/

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

使い方

2秒でできますよ~!

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

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

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

以上、ogaRia中村でした。

  1. コメントはまだありません。

  1. トラックバックはまだありません。