新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

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

   

  • このエントリーをはてなブックマークに追加

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

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

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

蚊に刺されたなうless than a minute ago via Twitter for iPhone

スポンサーリンク
 

ところがライブドアブログ(livedoor Blog)のHTMLエディタを使っているとこううまくはいきません。
実はHTMLエディタには無駄なタグを削除してくれる機能がついているのです。

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

<!-- http://twitter.com/Norisa/status/18828316446 --> <style type='text/css'>.bbpBox18828316446 {background:url(http://s.twimg.com/a/1281028705/images/themes/theme1/bg.png) #C0DEED;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox18828316446'><p class='bbpTweet'>蚊に刺されたなう<span class='timestamp'><a title='Sun Jul 18 08:59:01 +0000 2010' href='http://twitter.com/Norisa/status/18828316446'>less than a minute ago</a> via <a href="http://twitter.com/" rel="nofollow">Twitter for iPhone</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/Norisa'><img src='http://a2.twimg.com/profile_images/378732498/blog_____normal.jpg' /></a><strong><a href='http://twitter.com/Norisa'>のりさ</a></strong><br/>Norisa</span></span></p></div> <!-- end of tweet --> 

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

<!-- http://twitter.com/Norisa/status/18828316446 --> <!-- .bbpBox18828316446 {background:url(http://s.twimg.com/a/1281028705/images/themes/theme1/bg.png) #C0DEED;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block} --> <div class="bbpBox18828316446"><p class="bbpTweet">蚊に刺されたなう<span class="timestamp"><a title="Sun Jul 18 08:59:01 +0000 2010" href="http://twitter.com/Norisa/status/18828316446">less than a minute ago</a> via <a rel="nofollow" href="http://twitter.com/">Twitter for iPhone</a></span><span class="metadata"><span class="author"><a href="http://twitter.com/Norisa"><img src="http://a2.twimg.com/profile_images/378732498/blog_____normal.jpg" alt="" /></a><strong><a href="http://twitter.com/Norisa">のりさ</a></strong><br />Norisa</span></span></p></div> <!-- end of tweet -->

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

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

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

/* Blackbird Pie対応 */
p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}

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

<div style="background:url(http://s.twimg.com/a/1281028705/images/themes/theme1/bg.png) #C0DEED;padding:20px;"><p class="bbpTweet">蚊に刺されたなう<span class="timestamp"><a title="Sun Jul 18 08:59:01 +0000 2010" href="http://twitter.com/Norisa/status/18828316446">less than a minute ago</a> via <a rel="nofollow" href="http://twitter.com/">Twitter for iPhone</a></span><span class="metadata"><span class="author"><a href="http://twitter.com/Norisa"><img src="http://a2.twimg.com/profile_images/378732498/blog_____normal.jpg" alt="" /></a><strong><a href="http://twitter.com/Norisa">のりさ</a></strong><br />Norisa</span></span></p></div>

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

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

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

以上。

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

 - デザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

YouTubeでアップロード中にソーシャルゲーム(ソシャゲ)プレイは注意。通信エラーで最悪データ破壊も

1年以上前の記事です。内容が古い可能性があります。たぶん、パズドラだけじゃなくて …

Androidスマートフォン「GALAXY S5」でスクリーンショットを取る方法

1年以上前の記事です。内容が古い可能性があります。スクリーンショットなんてのはど …

「Ctrl+S」は「Save」、「Ctrl+C」は「Copy」、では「Ctrl+X」は何の略?

1年以上前の記事です。内容が古い可能性があります。またまた、パソコン教室の生徒さ …

食べログでは1つの記事から2つ以上のお店にトラックバックが送れた

1年以上前の記事です。内容が古い可能性があります。先日、「思い出しレビューその4 …

「かりあげ」せずに「モミアゲ」を落としちゃいけない

1年以上前の記事です。内容が古い可能性があります。先日、初めて1000円カットに …

Android系スマートフォンを購入してまずするべきこと

1年以上前の記事です。内容が古い可能性があります。そろそろAndroidスマホに …

ブラウザで「Mac OS 7」、「Hyper Card」や「Kid Pix」も

1年以上前の記事です。内容が古い可能性があります。自分が一番最初に触れ合ったパソ …

Androidタブレット+Google日本語入力+Bluetoothキーボード解決編。鍵は「Ctrl」+「Shift」

以前、Google日本語入力を使って日本語入力できなくなったときの対処法をかいた …

鍵(ロック)掛けられても鍵(ロック)掛ける前にフォローしておけばツイートが見れる【ツイッター】

1年以上前の記事です。内容が古い可能性があります。ツイッター(Twitter)っ …

社内ネットワーク(イントラネット)でログインパスワードを変えたら確認しておきたい唯一の設定

1年以上前の記事です。内容が古い可能性があります。WindowsにはログインID …

血液型オヤジ