ワードプレスは便利で、「この記事は○分で読めます。」はもちろん、文字数をカウントするプラグインもあります。
数クリックで希望の表示方法ができるんですよね。
が、「自作で作っているHTMLの文字数をカウントして表示させたい。」となったとき、そう簡単にはいかないんです。
いや、わりと簡単だったので忘備録として。
楽しいjQueryの出番
使うのはjQueryですね。
まずは、<head></head>内でjQueryを読み込んで起きます。ちなみに、「jQueryって何」と疑問を持つ方は知らなくても大丈夫です。
ほとんどコピペで終わる作業なので。
読み込むのはこんなタグですね。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>表示させるためのJavaScriptを書く
文字数をカウントするのはJavascriptのお仕事です。そして表示させるのはHTMLです。
HTMLのぺージ内の<p>要素に入っている文字数をカウントしますが、改行やスペースはカットします。
<p>あいうえお かきこけこ</p>は１０文字としてカウントしてくれます。
下記のJava scriptを<head>内や<body>内に挿入します。
<script>
$(function(){
var textLengthReplace = $('p').text().replace(/\s+/g,'').length;
$('#textLengthReplace dd').prepend(textLengthReplace);
});
</script>ちなみに、このコードは
http://black-flag.net/jquery/20121017-4244.html
から頂きました。ありがとうございます。
HTMLで表示させる
そして表示させたいところに下記のタグを挿入します。
<dl id="textLengthReplace">
<dt></dt>
<dd></dd>
</dl>からのタグなんですが、<dd></dd>の中にカウントされた文字数が挿入されます。
この仕組はJava Scriptが理解できる人しかわからないですね。
この際、「Java scriptを勉強してみよか。」と調べていましたが眠くなったので辞めました。
目的が達成できればいいんです。別にプログラマーになるわけじゃないですからね。
デモ
- （文字）
うまく表示できました！＼(^o^)／
少し文字を大きく表示させているのはCSSです。
<dd style="font-size:30px;color:#ff6600;">（文字）</dd>まとめ
上記のデモはWP上ですが、これはHTMLページでもできます。
ステップ１：jQueryを読み込む
ステップ２：文字カウントのためのJava Scriptを書く
ステップ３：表示させるためのHTMLを書く
ちなみに、なんで<dd>じゃなきゃだめなの？と思って<span id=”textLengthReplace”>で試してみましたが表示されませんでした。
わかりません。
CSSがわかってないのか、java scriptがわかっていないのか。
