できれば、a-kuma3さんにおたずねしたいのですが。

以前に、記事の文字数の表示方法を教えていただいたのですが、http://q.hatena.ne.jp/1449306414
これを、ライブドアのほうでも使いたいと思ったら、なぜか、できません。
どうしてなのか、わからないのですが、以下のコードでやってみてできませんでした。
<script>
$(function() {
$("body.page-article div.article-body-inner").each(function() {
$("body.page-article header.article-header", this.parentNode).prepend(
$("<SPAN />").text("(文字数:" + this.textContent.length + ")")
);
});
});
</script>
変えたところは、セレクタ名と、appendをprependにしただけなのですが、どこがいけないのか、わかりません。
以前のコードは、はてなブログでしか、使えないのでしょうか。
図々しいのですが、ヒントだけでもいただけると、ありがたいのですが。
なお、ライブドアでは、ホワイトプレスというデザインを使っています。
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2016/12/12 21:00:55

ベストアンサー

id:a-kuma3 No.1

回答回数4971ベストアンサー獲得回数2153

記事一覧みたいなページで、記事ごとの文字数を表示する、でしたっけ。

こんな感じで行けると思います。

$(function() {
    $("body.page-index div.article-body-inner").each(function() {
        $("header.article-header", this.parentNode.parentNode).prepend(
            $("<SPAN class='kuma'/>").text("(文字数:" + this.textContent.length + ")")
        );
    });
});

質問のコードから、3ヶ所変えました。

  • 記事を指すセレクタは、body.page-article じゃなくて、body.page-index
  • ヘッダを指すセレクタは、header.article-header のみ
  • ヘッダを探す起点は、this.parentNode じゃなくて、this.parentNode.parentNode

適当に拾ったライブドアブログで確認してみました(自分では ID 持ってないです)。

id:Michiko_70554148

できました!
ものすごく便利で、見やすくなりました。
個別ページだけに適用させたかったので、そっちのセレクタでやりました。
.parentNodeがもうひとつ加わったということで、できたのだと思います。
自分では、いくら悩んでも、理由はわからなかったと思うので、やっぱり聞いてみてよかったと思います。
何か、はてなブログとライブドアの違いなのでしょうが、そこが違うからできないということだったんですね。
これで↓できました。
$(function() { $("body.page-article div.article-body-inner").each(function() { $("header.article-header", this.parentNode.parentNode).prepend( $("<SPAN class='kuma'/>").text("(文字数:" + this.textContent.length + ")") ); });});</script>

ライブドアでは、はてなと違って、記事エディタには、文字数が出ません。
さらに、スマホ版だと、記事の文字数がある程度の長さを超えると、勝手に、記事が複数ページに分割されてしまうので、どの程度の文字数の記事を書いたのか、自分でも目安がわかるようにしたいと思っていました。
あとはやっぱり、はてなで慣れているので、記事のノードの文字数を常に意識しながら運営するというほうが、やりやすいので、本当に助かりました。
ありがとうございました。

2016/12/12 17:30:20

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

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

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

回答リクエストを送信したユーザーはいません