2012/12/31(月)はてなスターはじめました

2012/12/31 17:10
先日の忘年会の席で「いつものようにスターをつけようとしたけど、今ははてなじゃないからそもそもスターがなかった」と言われて、そのときには「多分簡単につけられるからやっておきますよ」くらいのことを答えたのですが、実際にやってみると全然簡単じゃありませんでした。 もちろん、設置自体は簡単です。はてなスター日記の[はてなスターをブログに設置するには](http://d.hatena.ne.jp/hatenastar/20070707)に詳しい手順が書いてありますし、最近更新が止まってはいるものの[WordPress用のプラグイン](http://wordpress.org/extend/plugins/hatena-star/)もあります。 ネックになったのはスタイルシートの干渉です。このブログでは[mono-labさん](http://www.mono-lab.net/)のFLATというテーマを使っていて、デザインそのものにはとても満足しているのですが、validなHTMLで凝ったレイアウトを再現するために`display: block`を多用していることもあり、そのままスターをつけようとするととんでもないレイアウトの崩れが発生してしまいます。 レイアウト崩れの原因になっているのは、主に「エントリ内のすべての`span`要素に適用されるCSS」「エントリ内の全ての`a`要素に適用されるCSS」だったので、はてなスター絡みの`span`要素、`a`要素ではそのスタイルをさらに上書きすることにしました。具体的には以下のようなCSSを追加しています。
[crayon lang="css"] /* コメント機能は不要 */ .post .title .hatena-star-comment-container { display: none; } /* スター追加ボタンを調整 */ .post .title .hatena-star-star-container { padding-top: 0; border: none; } /* スター画像を調整 */ .post .title .hatena-star-star-container a { display: inline; margin: 0; padding: 0; border: none; } /* 引用を調整 */ img.profile-icon + blockquote:before { content: ''; } /* 引用を調整 */ img.profile-icon + blockquote:after { content: ''; } [/crayon]
本当は本家のようにタイトルのすぐ右にスター追加ボタンを置きたかったのですが、タイトルの`display: block`を外すと手のつけようがないほどレイアウトが崩れるため、タイトルのすぐ下にボタンを出すことで妥協しました。 さて、上記の変更でトップページにははてなスターを設置できたのですが、個別のエントリのページにはつけられません。どうやらはてなスターのスクリプトがa要素のhref属性からエントリのURLを確定しているらしく、タイトルがリンクになっていない個別ページではURLを決定できないようなのです。というわけで、個別ページも一覧ページと同様、タイトル部分をリンクに書き換えました。具体的には、single.phpのタイトル表示部分のロジックをindex.phpと同様のロジックに修正します。
[crayon lang="php" start-line="21"]

<?php the_title(); ?>

[/crayon]
「自分のページへのリンク」というちょっと気持ち悪いリンクではありますが、背に腹は代えられませんし、よく考えたら本家はてなダイアリーでも同じようなことをやっていたのでこの方法で行くことにしました。 以上の対応で、トップページ、個別ページとも、無事はてなスターが設置されました。はてな時代同様、みなさまの温かいツッコミのスターをお待ちしております。