2008年3月 Archive

RSSフィードの配信で、改行されていると確かに読み手にとって読みやすいです。ですが、改行せずに配信しても問題ないのではないかと思いました。

ほとんどネタっぽいのですが、その理由としてはこうです。

1. 体裁がよくないために、購読者をサイトに誘導することができる（かも）から
2. Movable TypeのRSS（2.0）で、記事部分（CDATAセクション）はdescription要素なので（あくまでも？）

Google Analyticsからデータをエクスポートして、Excelなどにデータをとりこむとき、文字化けなどして扱いにくいなぁとおもいました。ない知恵を絞って妥協案などを考えました

以下は、古いAnalyticsの管理画面であったときの内容です。問題点はすでに解消されています。

エクスポートデータが文字化けしてしまう件

Google Analyticsで、CSV形式のファイルでエクスポートして、エクセルからそのまま開きますと文字化けしてしまいます。

これは、エクスポートファイルがキャラクタセットとしてUTF-8を使っているためなのだそうです。「Google Analytics 日本版 公式ブログ」の以下の記事にてこの件に関しての詳細および、対処方法が記載されています。

• エクスポートデータの文字化け修復方法

作業としては、「外部データの取り込み」から「テキストファイルウィザード」起動にておこなうようです。

そのほかの方法として、任意のテキストエディタ（UTF8N LFが扱えるもの）で開いて、文字コードをShift-JISで保存しなおしという方法があるようです。参考は、以下のページ

• MarkeZine：◎第5回　アクセス解析データを書き出して再利用しよう
• Google Analytics のエクスポートCSVデータの文字化け修復方法｜前向きストラテジー

他には、XML形式のファイルでエクスポートする方法が以下のページにエントリされています。XMLで読み込み不要なエレメントを削除していくとのことです。

• 運営どぉ？(旧) | Google analytics　エクスポートデータの文字化け修復方法

こちらの方法でやってみたんですが、XMLですと必要なデータではないエレメントが多すぎなんですよ。これが。ここら辺、どうやって対処されているんでしょう＞＜　あと、エクセルのプロフェッショナル・エディションでないと扱えないのでは、というのもあるかも。

妥協した方法（自分用）

現在は以下の方法を使っていません。

上記の方法を参考にして、このような方法にすることにしました。

一旦、Google ドキュメントからインポートして、エクセルファイルとして落とす

試してみたところ、Googleドキュメントから、Google AnalyticsのCSVファイルをインポートしますと、文字化けしていません。

その後、Googleドキュメント側で必要のない行・列を削除したりして体裁を整えて、エクセル形式（.xls）でエクスポートします。あとはそのファイルをエクセルで開いたらよいというわけです。

「ドキュメントで作ったものが公開になるんでは」と思われそうですが、「公開」というタブをクリックして公開ボタンが押されたとき公開されるようになる仕様のようです。ドキュメントで作成したファイルが必要なければ、一旦保存して終了して一覧ページから削除して終了します。

Googleのデータの扱いについて信頼するという（セキュリティ面とか）前提はあるんですが、それがかなわないというのであれば、ファイルをShift-JISで保存して開くのが無難でしょうか。

実のところ、エクスポートしたCSVファイルで最初のほうのデータはあまりあつかわなくて、「# Table」というコメント以降のデータが必要な部分だったりします。

そこで、Table以降の記述部分だけコピーしてWindowsでしたら、メモ帳に貼り付けしてCSV形式のファイルで保存のような感じです。

折りたたみのコンテンツ表示でAccordionというのがあるんですが、こういうのが需要があるのかどうか不明ですが、とりあえず作ってみました。

コンテンツが閉じたり開いたりするというアレです。ということで、つくってみたのがこちら

インデックス系ページでjQuery Accordion

ワタくシもよくわからずに作っている部分があるので、ソースとかかなりテキトーになってます。

Windows　IE7,Firefoxでしか確認してません。

jQueryプラグインの入手

http://plugins.jquery.com/project/accordion

jquery.accordion_2.zipというファイルをダウンロードします。jQueryも同梱されているようです

フォルダをサーバにアップしる

解凍したら、フォルダをアップします。

そのままのファイル構成でアップしました。例えば、ブログトップと同じディレクトリでしたら、

yourdomain.com 　[blog top]
      |--  js
            |---- jquery-accordion
                       |---- lib
                       |---- jquery.accordion.js

サンプルコードを参考にして埋め込む

プラグインを呼び出すコードは以下のようなものです

<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/chili-1.7.pack.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.easing.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/lib/jquery.dimensions.js"></script>
<script type="text/javascript" src="./js/jquery-accordion/jquery.accordion.js"></script>

jQuery Accordionのデモページが用意されています。以下のページを参考にして色々カスタマイズします

http://jquery.bassistance.de/accordion/demo/

Vicunaのサイドバーでは、dl dt ddが使われていますので、With options, container is a definition list, header dt, content ddのサンプルを利用させてもらいました。

テンプレートでの修正箇所は、id:utilities以下のdlエレメントにて、折りたたみをおこないたい部分に対して、任意のidを与えます。デモページでは、「#list2」というidが付けられていますが、ここでは、#navigationとしておきました。

あとは、jQuery Accordionのデモページのソースをみたらだいたいわかることとおもいます。（説明放棄ｗ）

カスタマイズですが、event: 'mouseover'のところを、event: 'click'のように書くとオンクリックで開閉したりするみたいでした。

なお、Vicunaテンプレートでの動作確認のため、3ping.orgのwuさま提供の、スタイルテスト用ファイルを利用させていただきました。m(u.u)m

参照：　Vicunaのスキンをローカルで編集・調整する方法

Movable Type 4関連の書籍が出揃ってきました。さて、MovableTypeのカスタマイズで参考にするのは、ネットの情報を参考にするか、書籍を購入して参照するのとでどちらが効果的なのかと考えてみました。

MT4関連の書籍について

MovableType.jpで以下のようにMT4関連書籍について紹介されていました。

Movable Type 4 の関連書籍が充実より

Movable Type 4 の出荷から7ヶ月、少しずつ関連書籍が充実してきました。今月だけでも2冊以上の発表があり、どれも Movable Type 4.1 に対応しています。

MT4関連書籍の一覧ページも特設されたようですね。

Movable Type 4 関連書籍

また、小粋空間さまにて、Movable Type 4.1 書籍のまとめで関連書籍についてまとめられていますので参考になります。

書籍かネットか

ところで、MTの情報を得たり、カスタマイズしたりするのに書籍からの場合と、ネットでの場合とで、それぞれの特徴などを考えてみました（MTに限定したものでないような気がしますが）。

以下、自分がこう思っている、という部分がすべてなんですが列挙してみます。

書籍を利用する利点

• パソコンのない環境・ネットに繋いでいない状態で読むことができる
• カスタマイズするとき、手元に置きながら作業できる
• ネットは、必要な情報を検索し、自分の欲しい情報をふるいにかけていく必要があるが、書籍では自分が必要な情報があるという前提で購入したのであれば、そのようなことはない

書籍を利用する時の問題点

• 情報が執筆時点での情報になるので、執筆後の新たな情報については対応できない
• 出版後に書籍の内容に変更が出てきた場合、ネットから情報を得る必要が出てくる
• 書籍で紹介したコードの配布をネットでおこなっている、などのサポートがない場合、サンプルコードを直打ちしないといけなくなる。
• 地方の書店では取り扱っていない場合があって、書店で注文やネットから購入することになる。またネット販売だと書籍の内容を実際に確認できないために、購入後自分の期待している内容とあわずに終わってしまうケースもありうる

ネットからの情報を利用する利点

• 最新の情報に対応
• 得る情報量が多い
• サンプルのソースコードの利用が容易

ネットからの情報を利用する時の問題点

• 検索がメインになるので、情報を得るまで、検索に費やす時間が増える
• カスタマイズ作業のとき、MTの管理画面とサイトの画面とを切り替えながら作業しないといけなくなる（パソコン2つでみるとか、画面に2つ並べて表示とか方法はあるけど）
• 必要でない情報が混在しているページを読まされることになる（アフィリエイトバナーとか）

問題点については、それ程深刻には感じていなんですが。。書籍については、読者へのフォローが出来ているかというのはあると思います。どちらにせよ、効率よく情報を得て活用したいなと考えています。

Movable Typeのシステムテンプレートの検索結果は1つのテンプレートで、キーワード検索とタグ検索を兼ねています。テンプレートで使われているテンプレートタグ（MTIfStraightSearch・MTIfTagSearch）を確認してみました。

MTの検索結果ページのテンプレートをながめていたんですが、「MTIfStraightSearch」、「MTIfTagSearch」といった普段使わないようなテンプレートタグがあることに気づきました。

このタグはどうやら、タグ検索のときにおこなう動作と、キーワード検索のときおこなう動作を振り分けしたりするときにつかう条件タグのようです。

MTでは検索結果のページはシステムテンプレートとして1つあるだけですから、このテンプレートでキーワードとタグの検索結果を兼ねているということなんですね。

ページタイトルをキーワード検索・タグ検索とでかえてみる

MT（バージョン4.1）のデフォルトテンプレート（serch_results.mtml）によりますと、ページタイトルの部分は以下のようにして作られているようです。

<MTSetVarBlock name="page_title">Search Results</MTSetVarBlock>
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$>: <$MTGetVar name="page_title"$></MTSetVarBlock>

title要素として取得するのはヘッダーのテンプレートモジュールで以下のような具合です

<title><$mt:var name="title"$></title>

これを、MTIfStraightSearchを用いて振り分けするとこのような感じでしょうか

タグ検索のときだった場合に、Search Results for Tagというタイトルになるようにした例です

<MTIfTagSearch>
<MTSetVarBlock name="page_title">Search Results for Tag</MTSetVarBlock>
<MTElse><MTSetVarBlock name="page_title">Search Results</MTSetVarBlock>
</MTIfTagSearch>

＊実際は、一行で書いてます

タグ検索のときキーワード検索と別な内容を処理する

テンプレートタグリファレンスを見てわかったことですが、MTIfTagSearchで囲まれた中で何か処理できるようです。

デフォルトテンプレートを見ますと、h1要素で、このように使われています。

<h1 id="page-title" class="search-results-header">
        <MTIfStraightSearch>
    Results matching &ldquo;<$MTSearchString$>&rdquo; from <$MTBlogName encode_html="1"$>
        </MTIfStraightSearch>
        <MTIfTagSearch>
    Results tagged &ldquo;<$MTSearchString$>&rdquo; from <$MTBlogName encode_html="1"$>
        </MTIfTagSearch>
</h1>

あまり、複雑な処理をいれると、表示時間に影響がでそうなんですけど、これを応用すると、タグ検索に特化したページなど作れそうな感じです。

ウチのところでは、試験的にサーチワードを利用して、自分のdel.icio.usでそのタグを探せるように改造してみました。

＊サイドバーにある、タグのリストから結果を確認できます。

現在、Action Streams プラグインで作成したブログのコンテンツをそのままこのブログに取り込んで、専用ページとして公開しています。このエントリにて簡単に手順をメモしておきます

Action Streamsの導入について

導入につきましては、以下のサイト様のページを参照します

プラグインには、mt-static、extlibディレクトリにアップするファイルがあるのでそれだけ注意します。

＃説明が手抜きですみません。

• Action Stream をインストール : MTで、FlickrやTwitterなど色々なサービスの更新状況を表示：Goodpic
• ActionStreamはどうやってインストールするの (WolaWola)

以降、新規にAction Streams用ブログを作成して、テンプレートセットプラグインを使ってブログが構築されたというところまでできているという前提で話を進めたいと思います

参考までに、ここのブログでは、

• メインで使っているブログのAction Stream
• Action Streamのブログ

という状態です

説明上、用意されるファイル

• actionstream/index.html (Action Streamのブログ)
  • actionstream/stream_list.html　（取り込まれるファイル）
• blog/streams.php (メインブログでのAction Streams取り込みページ)

Action Streamのブログで取り込むためのテンプレートを用意する

ActionStreamsプラグインの/plugins/ActionStreams/blog_tmpl のmain_index.mtmlファイルを利用します。早く言えば、MTのシステムにログインして、ActionStream用ブログに切り替えて、そのメインインデックステンプレートを開きます。

<mt:setvarblock name="today_date"><mt:Date format="%B %e"></mt:setvarblock>

および、div要素の中身をコピーします。

インデックステンプレートで、新規にテンプレート作成して、適当にテンプレート名や出力ファイル名をつけておきます。

例）　テンプレート名：Action Stream list 、出力ファイル名：stream_list.html

保存して再構築しておきます

カスタムインデックステンプレートを作る

今度は表示をメインブログのほうに切り替えて専用ページを用意します。

インデックステンプレートにて、カスタムインデックステンプレートを新規作成します。

中身は、インデックス系のテンプレートをベースにすればいいです。title要素とか、head要素などの内容が適切になるように調整しておきます。

Action Streamを取り込む

MovableTypeには、MTIncludeという、テンプレートタグがあるのですが、このタグで更新が反映されるのは、再構築されるタイミングとなります。

参考：　タグリファレンス - MTInclude

したがいまして、MTIncludeを使ったとき、そのテンプレートが再構築されないことには、最新の情報が表示されないことになります。

方法としては、ダイナミックパブリッシングを使うか、phpでインクルードするなどですが、ここではphpを用いることにしました。

ここでは、取り込んた内容を出力する場所は、メインコンテンツの部分とします。先ほど作成しておいた取り込むためのリストファイル（例では、stream_list.html）をphpのreadfile()関数を使って取り込みます。

あとは、任意の出力ファイル名をつけて(環境に合わせ、拡張子を.phpにするなどします)、再構築して作業は完了です。

MT4では、ウェブページを管理することができるようになりましたが、作成したウェブページを特定のフォルダで管理する場合に、そのフォルダのトップページとして、フォルダ一覧のページがあればいいかなと思い作成してみることにしました

追記：　このページでは、Movable Type バージョン 4.x においてのフォルダ管理に関してを記しているものです。

MT4で、ウェブページは、特にアーカイブマッピングで指定しない場合、ブログトップページのディレクトリ配下にウェブページが出来ます。

MT4では、フォルダ管理機能があります。フォルダを作成してウェブページを整理していくことも可能なわけです。

このように、フォルダごとでウェブページを管理していく場合に、作成したフォルダのトップページ（例えばindex.html）があって、フォルダ内の一覧を出力してあるようなものがあったらいいかと考えました。

おおまかな手順メモとして示します

フォルダを管理してみる

メニューの　[一覧]　＞　[フォルダ]　で、フォルダ管理画面になります

例えば、「web」という名前のフォルダを作成したいとき、「トップレベルフォルダを作成」をクリックします。 表示する名前にwebと入力して、「新規作成」をクリックで、<$MTBlogURL$>配下にwebディレクトリが作成されます。

フォルダの編集については以下のドキュメントを参照します。

Movable Type 4 ドキュメント　フォルダの編集

＊フォルダ名は「英語で表記することをお奨めします」とのことなので、この点に注意する必要があります

実際にウェブページでフォルダを指定して使うには、ブログ公開の[フォルダの変更]（MT4.1で右ペインにあります）をクリックして表示されている任意のフォルダ名のラジオボタンをチェックします

フォルダトップページをインデックステンプレートで作る

ここでは、webという名のフォルダを作ってあるという例で/web/index.htmlというインデックステンプレートを作成することを説明していきます

インデックステンプレートを新規作成します。設定等はこのような感じです

テンプレート名

webのインデックス*1

テンプレートの種類

カスタムインデックステンプレート

再構築オプション

任意で設定*2

*1 何でもいいです。　*2 ワタくシはウェブページを作成後に手動でこのテンプレートを再構築するようにするので、インデックステンプレート再構築と同時に再構築しないようにしています。この辺はサイトの運営方法など絡んでくるかと思います

テンプレートの中身をつくる

基本的に、ウェブページアーカイブのテンプレートを丸ごとコピーして貼り付けです。

部分的な修正箇所は、ページタイトルなど、SetVarにタイトル名など指定してあるものを適切な値が得られるように変更します。

ページのコンテンツには、webフォルダ内のウェブページ一覧を示すための記述をいれておきます。例として、以下のようなものです

<MTPages folder="web" lastn="99">
<h2><a href="<$MTPagePermalink$>"><$MTPageTitle$></a></h2>
</MTPages>

folderモディファイアで任意のフォルダを指定します(ここではweb)。 lastn="n" は少なくとも、現在作成してあるウェブページの総ページ数以上は指定することになります。

<MTPages folder="web" lastn="99">
<MTPagesHeader><ul></MTPagesHeader>
<li><a href="<$MTPagePermalink$>"><$MTPageTitle$></a></li>

<MTPagesFooter></ul></MTPagesFooter>
</MTPages>

MTPagesHeader、MTPagesFooterが最初と最後に実行させるためのテンプレートタグです。

作成できたら、リビルドして作業完了です。

作成したページの例

• http://www.mardiary.com/blog/web/

[ 追記：2008年9月15日 ] The blog of H.Fujimotoさまにて、WriteToFileプラグインを利用したフォルダアーカイブページの作成方法が紹介されています。興味のある方は参考にされるとよいでしょう。

• WriteToFileプラグインを使ったフォルダアーカイブの作成 - The blog of H.Fujimoto

今回利用したテンプレートタグ

• MTPages
• MTPageTitle
• MTPagePermalink
• MTPagesHeader
• MTPagesFooter

Movable Typeでは、run-periodic-tasksスクリプトを実行することで、スケジュール処理が可能なのですが、MTのログフィードを取得することで、同様の処理がなされるそうです

密かに（？）Action Streamプラグインを仕込んでおりました。設定そのものはできていましたが、登録したものが更新されてなくて、やっぱりcronの設定しないとだめなのか、と思っていたんです（利用しているサーバでcronは許可されています。負荷等を考慮して使わないようにしていただけですが）。なんとcronの設定しなくても、タスク処理ができるのだそうです。

MovableType.jpブログの「ログフィードの取得によるスケジュール処理の実行」より引用

Action Streams を常に最新の状態に保つには、Movable Type のアプリケーションディレクトリ (通常 mt.cgi のあるディレクトリ) にある tool ディレクトリに格納された run-periodic-task スクリプトを cron などを使用して定期的に実行する他、Movable Type のログフィードをフィードリーダなどで Subscribe (購読) しておき、そのフィードの取得時にスケジュール処理を実行するなどの方法があります。

システムメニュー　＞　ログ　＞ログフィードのリンクを購読　ということです。これで、フィードが読まれたとき、Action Streamsが最新の情報となるんだそうです。

ログフィードをブラウザで読み込んでから、上の、「こんにちはxxxxxさん」のリンクから、プロフィール管理のページでAction Streamsをみましたところ、最新の状態となっているのを確認できました。

こんな方法があるとは、さすがにわからなかったです。これならば、cronが使えないサーバでも使えますね。とてもナイスな情報でした。

4.2のかたは。。ログフィード取得のみではテンプレートの再構築ができませんので、以下のドキュメンテーションを参考にCronの設定等をする必要があります。

• ブログの公開プロファイル

MT4のリッチテキストフォーマットで、箇条書きボタンをつかったときの動作およびマークアップについて確かめてみました

MT4にリスト要素のための入力補助ボタンがあります。いまひとつ使い方とか動作がよくわからなかったため、いろいろといじってみることにしました。

リッチテキストフォーマットでの操作について

リッチテキストフォーマットには、HTMLをがディスプレイで見た状態に表示する、WYSIWYGモードと、HTMLタグつきで表示されるHTMLモードとあります。

WYSIWYGモードのとき、箇条書きリストボタンを押下し、リストの内容を入力していき、改行により、リストマークで区切られるようになります。

リストを入れ子にしてみる

さて、リストを入れ子で使うときもあります。この場合、WYSIWYGモードですと、Tabキーをおすとインデントになるようでした。

ところがです、この状態から、HTMLモードにしてソースを眺めると少し気になることがありました。以下のようなソースでした。

<ul><li>りんご</li><li>みかん</li><ul><li>バナナ<br /></li></ul></ul>

このリスト要素の構造、本来ならば、期待されるソースは以下のようものではないかと思います。ブラウザでは、上記のマークアップでも、入れ子の表示になってはくれますが。

<ul><li>りんご</li><li>みかん<ul><li>バナナ</li></ul></li></ul>

フォーマットなしの場合でやってみる

さて、フォーマットなしの場合（または、リッチテキストでHTMLモード）ですが、箇条書きボタンを押すのは、先にリストを書き上げて、それに対して選択してから、箇条書きリストボタンを押すことで、リスト表示のマークアップになるようです。

因みに何も入力せずに箇条書きボタンを押すと、ul,li要素の組がそのまま入力されます。li要素のインデントには、タブ文字が使われているようです。

で、先に示したような、入れ子にするときですが、例のように、「みかん」の子要素にバナナを入れる場合、「みかん」の後ろにカーソルをもっていき、バナナと打って選択状態にしてから、箇条書きボタンを押すと以下のような状態になります。ちょっと、見た目が変な整形ですが、一応入れ子の形は出来ているかと思います。

mt.Vicunaテンプレートとはてなスターの設置についてほんのちょっとやり方などをメモしておきます。

プラグインを使った方法

最もお手軽とおもわれるのは、プラグインを導入した方法でしょう。Kickstart my heartのFumiaki Yoshimatsuさんが提供されています。

参考：　MTHatenaStar作った

プラグイン導入手順は常の如しで、解凍してフォルダごとシステムのpluginsディレクトリに投げ込みます。

あとは、<$MTHatenaStar$>を設置箇所に貼り付けます。場所は、「MTEntriesのコンテキスト内」にとのことですので、注意するのはこの点です。

各種ブックマークレットのある場所と一緒にしたい、という場合にこの方法だと簡単です。

はてなスターの説明どおりタイトル横につける場合

設置の説明は、「はてなスターをブログに設置するには - はてなスター日記」に記載されています。

はてなスターでは、標準で「h3要素」の情報をもってくるようになっていますので、mt.Vicunaでは、これとは別の要素に指定してあげないといけなくなります。

例えばこのような感じで。トークンの部分はここでは割愛します

<script type="text/javascript">
Hatena.Star.EntryLoader.headerTagAndClassName = ['h2'];
</script>

さて、mt.Vicunaのテンプレートを見ると、記事アーカイブでは、h1要素が記事タイトル、インデックスページやアーカイブインデックスなどは、h2要素が記事ページタイトルですので、テンプレートごとでタイトル部分で使われるHTMLタグが異なっているため、少々カスタマイズしないといけないです。

StarChartLogさまの「AddClipsとはてなスターをつけました」という記事が参考になります。記事ページのタイトル部分がリンクになるように修正をされているようです。

ワタくシの場合は、記事ページでは、先のプラグインによる配置、インデックスページではh2要素に指定という具合に分けて利用しています。

細かく言えば、テンプレートごとではてなスターのHatena.Star.EntryLoader.headerTagAndClassNameの指定をプラグインを使わないテンプレートは['h2']）、プラグイン利用のテンプレートで['span','hatenastar']となるように、MTIｆとMTSetVarなどを使って振り分けています。この方法は、ここでは省きます。

h2要素指定だと使っているスキンでa要素に指定してある背景がスターにも引き継がれてしまう件。

mt.VicunaのNinja Style - Boomer sub skinをつかっているのですが、上記のようにh2要素を指定していざスターをつけてみると、タイトル左に指定してある画像が、はてなスターにも引き継がれているようになっていました。

これは、subSkinのスタイルシートを見たのですが、この部分が原因のようでした。

Vicuna Ninja Style - Boomer sub skin

1-subSkin.css　/Entry/Title　 より

div.entry h2 a {
        padding-left: 18px;
        text-decoration: none;
        color: #000;
        background-image: url(images/icon/v_icon150201.gif);
        background-repeat: no-repeat;
        background-position: left center;
        _background-position: 0 0.35em;
}

div.entry h2 a:visited {
        color: #000;
        background-image: url(images/icon/v_icon150101.gif);
}

h2要素配下のa要素には、画像が適用されてしまうので、スターの場所もa要素がありますから、この指定が引き継いでしまうというわけです。

これを解消するには

a要素の背景画像をやめにしてしまうとか、それでもってh2要素の背景画像にしてしまう

といったところでしょうか。ただ、a要素に画像をあてていることは、li要素にもいえることですが、左の画像をクリックしようとするひとへの配慮といったことが考えられます。ということで、テンプレートの構造をはてなスターのために改変するのは、あまり好ましいことではないと考えました。

では、どうするかというと、はてなスター側のスタイルを変えてあげるということにします。スターの部分を選択して、DOMソースを見ますと、.hatena-star-comment-containerといったクラスが指定されているようです。

このクラスを利用してこのような追加スタイルを設定して対処してみました。ついでに、スターの位置も調整。

.hatena-star-star {
      vertical-align: middle;
      margin-top:0 !important;
}
.hatena-star-comment-container a,
.hatena-star-star-container a{
      background-image: none !important;
      padding-left: 0px !important;
}

スターについてはこのような感じです。

Continue reading