人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ブログにはてなスターが搭載できません。現在、LivedoorBlogを利用しているのですが、ブログにはてなスターを搭載しようと考えています。説明の記述に従って設定していたのですが、途中わからないところがあります。

http://d.hatena.ne.jp/hatenastar/20070707

ここの説明に沿って設定しているのですが、

<div class="posted" style="display:none;"><a href="<$ArticlePermalink$>"></a></div>

このコードを、<div class="blogbody">というコードの後に張り付けろと書いてあるのですが、
<div class="blogbody">というコードはF3で検索したのですが見つかりません。このコード以外で、後に貼り付けるとしたらどのようなコードが考えられるでしょうか? 教えて下さい。


●質問者: BLOG15
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:F3 はてなスター コード 検索 現在
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● KUROX
●30ポイント
<DIV class=article-body>
<DIV class=posted style="DISPLAY: none">

このあたりの後ろじゃないでしょうか?

posted で検索するとよいかも。

◎質問者からの返答
<DIV class=article-body>

このタグはあったので試してみたのですが、今のところはてなスターは表示されませんでした。他の似たタグでも試してみようと思います。また何かわかりましたら、引き続きお願いします。


2 ● Yuichirou
●10ポイント

まず、人力検索はてなでは質問への回答やその返信にHTMLタグを書くと、原則としてそのままHTMLの一部として表示されます。このため、HTMLタグを見せたい場合には文字参照などを使う必要があります(参照:d:keyword:文字参照)。

とりあえず1つ目の回答への返信でHTMLタグをそのまま書いているせいで、質問ページ全体の表示がおかしくなっています。回答への返信は書き直しができるので、なるべく早く書き換えてください。


さて、本題ですが、この質問のコメントで既に出ていますが、はてなスターは2007年9月から外部への設置方法が変わりました。また、Livedoor Blogの方もHTML構造に刷新があったらしく、http://d.hatena.ne.jp/hatenastar/20070707 にあるような方法では全く表示できなくなっています。

必要なコードを用意しましたので、現在

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>

と書いている場所の直後に、以下のコードを書いてください。

<script type="text/javascript>
 Hatena.Star.SiteConfig = {
 entryNodes: {
 'div.article-outer': {
 uri: 'h2 a',
 title: 'h2',
 container: 'li.article-clip'
 }
 }
 };
</script>

これにより、記事の後の方にあるLivedoor Clipのアイコンの後ろに、はてなスターが表示されるようになります。

なお、「$ArticlePermalink$」などを含んだ追加コードは全く不要なので削除してください。

◎質問者からの返答

回答ありがとうございます。ただ、KUROXさんの回答への返信を編集しようとすると、返信部分が消えて変更できないようになってしまっているのですが、これはどうしたらいいのでしょうか?

あと、できればはてなスターは、記事のタイトルの横あたりに設置したいと考えているのですが、そうすることはできるでしょうか?


3 ● Yuichirou
●10ポイント

ただ、KUROXさんの回答への返信を編集しようとすると、返信部分が消えて変更できないようになってしまっているのですが、これはどうしたらいいのでしょうか?

あー、面倒なことになっていますね…… これははてなスタッフに問い合わせて内側から修正してもらうのが良いでしょう。

お問い合わせ - FAQ・お問い合わせ 人力検索サイトはてなについて - はてな」からスタッフに問い合わせてみてください。


あと、できればはてなスターは、記事のタイトルの横あたりに設置したいと考えているのですが、そうすることはできるでしょうか?

可能ですが、デフォルトのはてなスターで使われるアイコンが http://www.blog15.net/ の見出しの背景色にかなり近いため、アイコンを変えないとほとんど見えません。

はてなスターでは、アイコンの変更はスタイルシートの設定を経由して行います。先ほどのhead要素内に記述する内容を次のものに変えてください。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript>
<!--
Hatena.Star.SiteConfig = {
 entryNodes: {
 'div.article-outer': {
 uri: 'h2 a',
 title: 'h2',
 container: 'h2'
 }
 }
};
//->
</script>
<style type="text/css">
<!--
.hatena-star-add-button-image {
 background-image: url(http://s.hatena.ne.jp/images/add_bl.gif);
}
.hatena-star-comment-button-image {
 background-image: url(http://s.hatena.ne.jp/images/comment_bl.gif);
}
-->
</style>
◎質問者からの返答

回答2番と3番の両方試してみたのですが、今のところなぜか表示されません。なぜなんでしょうか?

とりあえず、今は3番の方の設定にしたままです。


4 ● Yuichirou
●50ポイント ベストアンサー

コードに2か所間違いがありましたので訂正します。

<script type="text/javascript" src="http://s.hatena.ne.jp/js/HatenaStar.js"></script>
<script type="text/javascript">
<!--
Hatena.Star.SiteConfig = {
 entryNodes: {
 'div.article-outer': {
 uri: 'h2 a',
 title: 'h2',
 container: 'h2'
 }
 }
};
//-->
</script>
<style type="text/css">
<!--
.hatena-star-add-button-image {
 background-image: url(http://s.hatena.ne.jp/images/add_bl.gif);
}
.hatena-star-comment-button-image {
 background-image: url(http://s.hatena.ne.jp/images/comment_bl.gif);
}
-->
</style>
◎質問者からの返答

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ