livedoorブログで「Blackbird Pie」を使う方法

1年以上前の記事です。内容が古い可能性があります。

まずは「Blackbird Pie」について説明します。
■ Blackbird Pie – Twitter Media

「Blackbird Pie」を使うとある人の1ツイートをブログに引用することが出来ます。
特徴的なのは、デザインに優れているところ。
横幅が可変式になっているのでどんなサイズでも綺麗に表示してくれます。
例えばこんな感じ。

上記ツイート表示のソースは本来ですと以下のようになっています。 

ところがlivedoorブログのHTMLエディタを使うと以下のように自動的に改変されます。

分かりやすいように変わってしまった部分を太字赤文字にしました。

つまり「style」タグをコメントに変えてしまうようなのです。
（シングルクォーテーションをダブルクォーテーションに変えていますがここでは割愛）
だからといって、 「Blackbird Pie」を使うときだけ「シンプルエディタ」に変えるのも面倒。
そこで、なるべく余計な作業をせずに「Blackbird Pie」で作ったソースをlivedoorブログのHTMLエディタで使う方法を考えてみました。

まずはデザインテンプレートのCSSに「Blackbird Pie」で作ったソースの共通CSSの部分を書き込みます。
書き足した部分はこんな感じになります。（上記ソースの斜体部分）

つぎにブログに書き込むソースをちょっといじります。
早速ソースを紹介。

後半の<DIV>に囲まれた部分のみ抽出します。
ポイントは最初のDIVの属性、太文字の部分。共通CSSでない部分をタグ内にstyle属性として書き込んでいます。
つまり、上記ソースで青文字にした部分をDIVに反映させる必要があるということです。

具体的にはちょっとしたコピー&ペーストで作業は終了します。

1. まずはDIVに囲まれた後半部分のみコピーしてHTMLソース編集モードでペースト。
2. 上記ソース斜体青文字の部分をコピー。
3. 最上位DIVの「class」を「style」に書き換える。
4. ダブルクォーテーション「”」に囲まれた部分を選択してペースト 

以上。

これでlivedoorブログのHTMLエディタでも比較的簡単に「Blackbird Pie」で作ったソースが使えると思います。
まあ、シンプルエディタを使うってのが一番手っ取り早いっちゃ手っ取り早いのですが。。