ブログにはてなスターが搭載できません。現在、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で検索したのですが見つかりません。このコード以外で、後に貼り付けるとしたらどのようなコードが考えられるでしょうか? 教えて下さい。

回答の条件
  • 1人5回まで
  • 登録:2008/02/14 22:09:40
  • 終了:2008/02/19 22:50:43

ベストアンサー

id:Yuichirou No.4

Yuichirou回答回数112ベストアンサー獲得回数362008/02/17 12:53:18

ポイント50pt

コードに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>
id:BLOG15

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

2008/02/17 19:30:17

その他の回答(3件)

id:KUROX No.1

KUROX回答回数3542ベストアンサー獲得回数1402008/02/14 23:30:47

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

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

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

id:BLOG15
<DIV class=article-body>

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

2008/02/15 00:57:31
id:Yuichirou No.2

Yuichirou回答回数112ベストアンサー獲得回数362008/02/15 17:20:54

ポイント10pt

まず、人力検索はてなでは質問への回答やその返信に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$」などを含んだ追加コードは全く不要なので削除してください。

id:BLOG15

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

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

2008/02/15 18:50:23
id:Yuichirou No.3

Yuichirou回答回数112ベストアンサー獲得回数362008/02/15 21:21:02

ポイント10pt

ただ、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>
id:BLOG15

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

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

2008/02/16 06:07:41
id:Yuichirou No.4

Yuichirou回答回数112ベストアンサー獲得回数362008/02/17 12:53:18ここでベストアンサー

ポイント50pt

コードに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>
id:BLOG15

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

2008/02/17 19:30:17
  • id:hokuraku
    既についている人のソースと見比べてみたんですが、
    http://blog.livedoor.jp/guitardepop/archives/50402043.html

    <div class="article-body">

    <div class="article-body-inner">
    のあとじゃないですかね?
    (KUROXさんの書いたのが前者の意味だったらすいません)

    検証できないのでコメントで書いておきます。
  • id:BLOG15
    id:hokurakuさん

    > <div class="article-body">
    > か
    > <div class="article-body-inner">
    > のあとじゃないですかね?

    両方試してみたのですが、やはり上手くいかないようでした。自分でも色々試してみようと思います。また何かわかりましたらお願いします。

  • id:KUROX
    http://d.hatena.ne.jp/hatenastar/20070921/1190349099

    このあたりは関係ないですか?
    日付がこちらのほうが新しいのですが・・。
  • id:BLOG15
    >id:KUROXさん

    再びありがとうございます。ただリンク先についてですが、わからないことが3点ほどあります。

    1.まずコードをどこに貼り付ければいいのかがわからないのです。設置場所を指定できるということは、どこに貼り付けたいのかによって、かわってくるのだろうと思うのですが、できればリンク先にあるように、タイトルの横あたりに設置したいのですが、その場合はどこにコードを張り付ければいいのでしょうか?

    2.「entryNodesの中に、1エントリーに対応した要素のセレクタを記述し、その中にURIが含まれるa要素(uri)、タイトルが含まれる要素(title)、☆を表示する要素(container)のセレクタをそれぞれ記述します。」ここの記述が専門用語ばかりで何のことを言っているのかわからないのです。

    3.動作検証を行う

    http://s.hatena.ne.jp/js/HatenaStar2.js

    このリンクですが、「実行」すると以下のように出るのですが、これは利用できないということなのでしょうか?

    エラー:'window'は宣言されていません。
    コード: 800A1391
    ソース:Microsoft Jscript実行時エラー


    わからないことだらけなのですが、説明していただけないでしょうか?
  • id:KUROX
    すいません。
    回答も適当発言だったようですm(_ _)m
    -------------
    ライブドアブログで同じように試してみたのですが、
    BLOG15さんと同じところではまったようです。

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

    -------------
    http://d.hatena.ne.jp/hatenastar/20070921/1190349099
    こっちに関しては検証してないのでわかりません。
    最初のURLで動きそうな感じはするんですけど。

  • id:KUROX
    解決しそうですね。
  • id:Yuichirou
    すみません、回答のコードで間違いがありました。
    <script type="text/javascript>

    <script type="text/javascript">
    に書き換えてください。
  • id:BLOG15
    >id:Yuichirouさん
    ><script type="text/javascript>
    >を
    ><script type="text/javascript">
    >に書き換えてください。

    これに書き換えたのですが、まだ表示されないようです。
    何か私のやり方が間違えているのでしょうか?
  • id:Yuichirou
    申し訳ありません。もう一か所typoがありました。
    早くお伝えしたいと思うあまり……すみません。

    一度全体を書きましたが、このページでの表示ではインデントが崩れていたので、
    部分だけ書きます。
    //->

    //-->
    に変えてください。
  • id:KUROX
    「はてな」に問い合わせることは出来ないのでしょうか?

    現状ではどう見ても、ライブドアブログの初期設定のテンプレートでさえ動作させられないような説明文には問題があろうと思うのです。
  • id:BLOG15
    >Yuichirouさん

    上手く表示されました。ありがとうございます。これで解決しました。
    お願いがあるのですが、間違いの個所を訂正して、もう一度回答して頂けないでしょうか? 今この質問をウォッチリストに登録されているの方が2名いらっしゃいます。その方たちもはてなスターを搭載していることを考えている場合、自分で間違えているコードを訂正して、こまごま自分で直すよりも、もう一度正しいコードを表示している方が便利だと思うのです。なのでできれば回答をお願いします。




    >KUROXさん

    >「はてな」に問い合わせることは出来ないのでしょうか?

    >現状ではどう見ても、ライブドアブログの初期設定のテンプレートでさえ動作
    >させられないような説明文には問題があろうと思うのです。

    コメントありがとうございます。私もそう思いました。なので、問い合わせてみようと思います。

    とりあえず、これで問題は解決したのですが、私のKUROXさんへの返信部分でコードが認識されたままなので、とりあえず、それが元に戻るまでは終了しないようにしておきます。



  • id:Yuichirou
    わかりました。が、この質問は「1人当たり2回まで回答出来ます」となっているため、回答できません。

    「質問終了・設定変更」の「回答者制限」を変更してください。
  • id:BLOG15
    >Yuichirouさん
    >「質問終了・設定変更」の「回答者制限」を変更してください。

    すみません、忘れてました。変更しておきました。
  • id:BLOG15
    元に戻ったので質問を終了しようと思います。

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません