Mitterのブログパーツをはてなダイアリーにかっちりあわせる方法

mitterの視聴履歴を公開するブログパーツの扱いに困ったけどなんとかなった。
前回のエントリーにごく僅かながらも需要があったようなので、もう一度詳しく書いてみたいと思います。詳しい方にしてみたら何を今更なことになるかもしれません。ですが、ちょっとでも多くの人がmitterのブログパーツはてなダイアリーに貼り付けて、そこから面白そうな動画拾ってこれたら楽しいんじゃねーかなと思い、書き始めた次第です。

そもそもMitterって?

以下公式サイトヘルプより

Mitter は、「YouTube」や「ニコニコ動画」などの動画共有サイトで視聴した動画を、評価やコメントを加えて管理し、その中のお気に入りの動画を公開できるサービスです。

対応している動画共有サイトでの視聴履歴を管理することで、前に見た動画の中で気に入った動画を探してもう一度見たり、面白かった動画を友達に紹介したりするのがとてもカンタンになります。

Mitter について

もっと詳しく知りたい方はこちらの記事を見れば100万倍分かりやすいです。
mitterのススメ - 彼方むんむん
動画共有利用サービス「Mitter」をためしてみたよ - 敷居の部屋

はじめに

Mitterのトップページ上部から、ツール ⇒ Mitter ブログパーツ ⇒ 「あなたの公開動画」ブログパーツを作る と辿っていきましょう。

ここの設定を弄くってうまく自分のダイアリーと連動させるわけですが、そのまんま貼り付けてしまうとなかなか歪なことになってしまいます。色、サイズ、その他もろもろを全部指定して吐き出してしまうので手動で合わせる必要があるのです。
ここは一旦、はてなCSSを覗いて設定を確認してみましょう。

  • 横幅
    • 「.sidebar」の「wide」の数値よりも小さく指定して後で微調整。*1
  • 余白
    • 面倒なら「0」で。好みで調整。
  • 背景色
    • 「.hatena-module」の「background」の数値
  • 枠線色
    • 「.hatena-module」の「border」もしくは「border-color」の数値、または「.sidebar」の「border」もしくは「border-color」の数値
  • テキスト色
    • 「body」の「color」の数値、または、本文とサイドバーのテキスト色が違うのであれば「.hatena-module」の「color」の数値
  • リンク色
    • 「a:link」の「color」の数値

で合わせてやります。ブログパーツの種類、表示タイプ、表示数はお好みで。文字コードは触らなくて結構です。Mitterテキスト色、Mitterリンク色は特にこだわりがなければテキスト色、リンク色と同一の数値で構いません。また背景色と枠線色を同じものに指定してやれば視覚的に枠線を消したように出来ます。

次に


設定が終わったら下にこういうのがあるのではてなダイアリーのサイドバーに貼り付けましょう。
貼り付けする際には

<div class="hatena-module">

*** ここに貼り付ける。 ***

</div>

こうやってしっかりと div class="hatena-module" で括ってやりましょう。
また、モジュールのタイトルを周りと合わせたければ、

<div class="mitter-header">
<img alt="Mitter" height="16" src="http://assets.mitter.jp/images/icon16.png?1225451444" width="16" />
  <span class="mitter-header-title">公開動画</span>
  (<a href="http://mitter.jp/negima" target="_blank" title="negima">negima の履歴</a>)
</div>

div class="mitter-header" を div class="hatena-moduletitle" と書き換えて

<div class="hatena-moduletitle">
<img alt="Mitter" height="16" src="http://assets.mitter.jp/images/icon16.png?1225451444" width="16" />
  <span class="mitter-header-title">公開動画</span>
  (<a href="http://mitter.jp/negima" target="_blank" title="negima">negima の履歴</a>)
</div>

指定されている文字を変更してもいいでしょう。
極端な話を言えば、

<script type="text/javascript">var mitter_username="negima", mitter_type="vertical", mitter_max_entries="5", mitter_width="160", mitter_padding="0", mitter_separate="no", mitter_encoding="utf-8", mitter_border_color="F0F0F0", mitter_background_color="F0F0F0", mitter_text_color="00000", mitter_link_color="00000", mitter_footer_text_color="00000", mitter_footer_link_color="00000";</script>
<script id="widget-script" type="text/javascript" src="http://mitter.jp/widget/user.js?v=2"></script>

以外は弄っても表示自体には問題がないのでお好きなように。ただ、Mitterへのリンクとかその他もろもろを外しちゃうと怒られるかも知れないので自己責任で。

最後に

細かい微調整をして終了。
あとは、楽しい動画視聴ライフを!!そしてMitterがはてなダイアリーで今よりもっとガシガシ広がって、「あのひとこんなの見てるんだ…。」、「こんな動画もあったのか!!」ってなればいいと思うな!!*2

*1:.hatena-moduleでmargin,paddingの指定によってかなり変わってくるので、詳しくはCSSでググってみると幸せになれます。

*2:間違いやおかしな所が少なからずと思いますのでその都度指摘して頂けるとありがたいです。自分の環境で試しただけで、その他の環境でもきっと大丈夫だろう、という憶測で書いています。ご了承下さい。