アメブロカスタマイズ コラム

アメブロ・メルマガに便利なCSSをインライン化してくれるツール

ホームページを作る基本は、コンテンツはHTMLファイルに、スタイルはCSSファイルに分けて記述することが正しいのですが、今でもHTML内のインラインCSSを利用する機会はしばしばあります。そんな時に、クリック1つでインラインCSSに変換してくれるサービスをご紹介します。

アメブロ・メルマガ・YahooではインラインCSSがまだまだ大活躍

アメブロの記事内を見やすくしたり、記事の下にお知らせを表示したりと、アメーバブログでは、インラインCSSを上手に活用しているブロガーさんが多くいます。CSS編集用デザインでアメブロカスタマイズをしている人でも、イベントのお知らせなどを一時的に装飾をしたい時にはインラインCSSが便利です。メルマガの装飾も、Yahooショッピングでも、インラインCSSがまだまだ必要なのですが、インラインCSS形式で書かれたコードサンプルがネット上に激減してますよね。特に、おしゃれなデザインほどCSSファイル形式で紹介されていたりします。

 

スタイルシートが問題なく使いこなせているなら、短時間で自分で書き換えることもできるかもしれませんが、ほとんどの人はそんな作業をすることを想像するだけでぐったりしてしまうのではないでしょうか。そんな時の救世主サービスと使い方をご紹介します。

MailChimp CSS Inliner Tool

無料で高機能なメルマガを発行できるWebサービスのMailChimpでは、クリックするだけでインラインCSSへ変換してくれるツールを公開しています。

MailChimp CSS Inliner Tool

 

MailChimp CSS Inliner Toolの使い方

css_inliner_tool

上のテキストボックス内に、コピーしたCSSファイルのコードを貼り付けます。CSSコードを<style></style>とスタイルタグで囲みましょう。CSSコードの下に続けてHTMLコードをコピペしたら、「Convert」ボタンをクリックするだけ。3秒ぐらいで変換が完了します。

 

css_inliner_tool

変換が完了したら、下のテキストボックスにコードが表示されます。スタイルシートの下にインラインCSS形式のコードが書き出されるので、必要な部分だけコピーすれば完了です。

他のインラインCSS変換ツール

Mailchimp以外にもインラインCSS変換ツールがあります。使い方は、どれも同じような手順になっています。変換したいコードを貼り付けて、ボタンをクリックすると、変換されたコードが表示されるという流れです。

 
Campain Monitor CSS Inliner
Mailchimpと同じ機能です。

 
Inline Styler
URLからファイルを指定して変換することもできるサービスです。CSSのコードが少なくてインライン化した方がSEO的に有利になると判断した時に、一括で変換できて便利ですね。

 

Webの世界は、本当に毎日進化しています。「こんなことないかな。」「めんどくさいから何とかならないかな。」と感じたことの9割は、誰かが解決してくれています。あきらめずに、ググってみましょう。おすすめサービスがあれば、このコラムでもまた紹介していきます。

この記事がお役に立てたら
いいね ! で最新情報を手に入れましょう

Previous Post Next Post

Related Posts