文字数カウンター設置方法
わたしはすぐ長文駄文になりやすいので、かねがね文字数カウンターを設置して、読んでくださる方の目安にしていただきたいとおもっておりました。
はてなの記事編集画面では右下にカウンターがあるのに、なぜ標準で文字カウンターを設置したテーマがないのか(わたしが知らなないというだけなのかもしれませんが…)不思議でなりませんでした。
そこであれこれ調べていると…やはりあるところにはあるんですねぇ。
こちらのコードをコピペさせていただき文字数(目安)カウンター難なく設置できました。
文字数が目安な理由
a-kuma3さんがご自身で指摘されておられるように、アーカイブページのようなところでは記事の文字数がカウントされるのではなく、そのページに表示されている文字数が返されるので(目安)となっております。
記事の方は、見えていないところも含めて文字がページ内にあるのでカウントすれば良いだけなのですが、アーカイブページの方は記事の一部しかページに入ってないので、ちょっと面倒な感じですね。
これは【続きを読む】を設置している場合にもみられる現象です。こんな感じ↓
↑【続きを読む】がある場合には文字数が867とカウントされていますが↓【続きを読む】をクリックするとあら不思議、文字数が8490と、記事内の文字総数がカウントされます。
しかしこの8490というのか記事内の文字総数というのもアレな数字です。
アレというのは見えていない文字も含まれているということです。
実際、はてなの記事編集画面右下に表示されているここで例として取り上げた記事の文字数は7608文字です。
8490文字と7608文字。ここでは1000文字近い隔たりがあるわけですが、これは記事内に画像やリンクがたくさん張られているからです。画像やリンクに含まれている文字やコードもカウントされるためです。
ですからわたしのように無節操にもペタペタと画像やリンクを貼っつけるほど、その数字は乖離していきます。
ですからテキスト主体のページほど意図した数字に近いものを返してくれるのです。
素人によるコードのちょっとした説明
さきほどのリンク先にありますコードを「フッタのHTMLを記述できます」のところにコピペしていただきますと、記事の日付(.entry-date)の横に文字数が表示されます。
また、文字数カウントの前後の言葉を変えるには、5行目の"(ダブルコーテーション)で囲まれた"(文字数:"と")"のところを適宜変えていただければ変わりますよ。
わたしの場合--というよりh1見出しタグをまるっとコピペさせていただいておりますので『Tiru's Life』さんの日付(date)デザインの場合--日付のbackgroundの色のピンクとその背景色の白とが異なり、なおかつ.date{width:65px;}となっておりますので、そのままでは↓このようになってしまいます。
表示させる文字数などにもよりますが、このデザインで日付の横に1列で↓このように収めるには、デザインcssの.dateのなかのwidthを165~215pxぐらいに調節してあげるか、デザインcss内に.dateが見つからなければ、そこに
.date { width: 165px ; }
を加えてあげるとうまく表示されるでしょう。ちなみに↓これは200pxです。
表示させる文字の「文字数」の後ろに「(目安)」を入れないそのままコピペしたもの、つまり「文字数(目安)」ではなく「文字数」と表示させる場合が165pxぐらいでおさまったとおもいます。
バランスみながら微調整してみてください。
でもねぇ…
上の二つの画像を見ていただければ感じられるとおもいますが、せっかくのバランス残念なことになっていますよね?
なのでわたしは記事タイトルの下のパンくずリストの横に表示させるようにしました。
文字数カウンターの表示場所を変える
タイトル下のパンくずリストの横に文字数カウンターを表示させる前提として、パンくずリストがそこに表示されていなければなりませんよぉ。
一応ね、一応言っておかないと「表示されない。なんで出てこないの?なに?ガセネタ?つかまされたぁ~」となる方がいないとも限りませんからね。
それではパンくずリストが表示されているとして、その横に文字数カウンターを表示させるには、先ほどのリンク先のコードの4行目にあります「.entry-date」を「.entry-categories」にかえます。それだけ。
他にもたとえば「.entry-title」とすれば記事タイトルの後ろに表示させることができます。
はいっ!こんな感じねっ!
わたしの場合
ここではわたしが使わせて頂いておりますコードをあげさせていただきます。
パンくずリストの横に文字カウンターを表示させるには…
【 デザイン > カスタマイズ(タブ) > フッタ > HTMLを記述できます 】
のところに
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function() {
$(".entry-content").each(function() {
$(".entry-date", this.parentNode).append(
$("<SPAN />").text(" ☆ Characters:" + this.textContent.length + " 文字以下 ☆")
);
});
});
</script>
をコピペすると表示されるでしょう。
1行目のjqueryの記述がすでに「フッタのHTMLを記述できます」のところに書いてある場合は、この行のコード(<script~略~></script>)を記述する必要はありません。むしろない方が機械の負担がちょっと減ります。
意外と順番は大事よ
「jqueryって書いてあったぁ!じゃあ消しちゃおう」という場合に1コ注意。
jqueryのコードの下に文字数カウンターのコードがくるようにしてください。
jqueryコードが下では文字数カウンターは表示されません。
つまり↓こういうのはダメということ。
<script>
$(function() {
$(".entry-content").each(function() {
$(".entry-date", this.parentNode).append(
$("<SPAN />").text(" ☆ Characters:" + this.textContent.length + " 文字以下 ☆")
);
});
});
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
このコードの上にもjqueryあればちゃんと動いて表示されますけれども…1コあればいいですから。もう一度おなじこと言ってしまいますけれど、1コの方がいいですから。
jqueryを度々呼び出していたら「なんだよっ!なんどもなんどもうるさいなぁっ!」っておもわれちゃいますよ。
これから他にもいろいろなカスタマイズをしていくこととおもいます。そのときjqueryのコードが含まれているものをコピペすることがあるでしょう。でもそれもなくていいですから。
フッタの1行目にでも置いといて、以降、目にしたら消しちゃいましょう。
これまでブログをカスタマイズしていてうまく表示できなかったという経験のある方。それはもしかしたらコードの順番が原因だったのかもしれませんね。
お心当たりのある方は一度見直してみてリトライしてみてはいかが?
以下について
現在わたしは「☆ Characters:○ 文字以下 ☆」と表記しているのですが、なぜ「以下」なのか。説明の要はないとは思いますが、記事内の文字数がカウンターの返す数字を上回るということはないですものねぇ。
画像では「目安」となっていますが、1000文字近く外れているのに「近く」ということに違和感がありましたので、「以下」を採用しました。
注意喚起!
最後に注意です。
わたしまだブログはじめて半年ほどの年齢に似合わない新米です。
しれっとjqueryとか言っちゃってますがなんのことやらさっぱりわかっておりません。ですからうまくいかなくても、なにか不具合起きても怒らないでね。
こちらもいかが?