先日、AllAboutさんの記事でWebページ上のテキストに対して
「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題した
jQuery＋CSS3を使って1文字ずつ装飾を変える方法を解説していましたが
これをCSS3未対応ブラウザでも実装できるように
jQueryのみで文字単体に個別で指定を与える実験をしてみたので紹介してみます。
jQueryでテキストを一文字ずつ装飾を変える実験
まずはHTML上に下記の様な段落テキストを配置します。
◆HTML <p class="split">jQueryでテキストを一文字ずつカットするサンプルテキストです。</p>
そしてこのテキストに対して、jQueryを使って一文字ずつ個別に
任意のクラスの付けたinline要素（＜span＞）で囲うようにします。
スクリプトの記述は以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var setElm = $('.split'),
className = 'sliceTxt';
setElm.children().addBack().contents().each(function(){
var elmThis = $(this);
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\S)/g, '<span>$&</span>'));
}
setElm.each(function(){
$(this).find('span').each(function(i){
i = i+1;
$(this).addClass(className+i);
});
});
});
});
</script>
スクリプト開始部分にある設定値の内容は、以下の様になっています。
| var setElm = $(‘.split’) | カットするテキストを囲うブロック要素名（IDやタグ名でも可） |
|---|---|
| className = ‘sliceTxt’ | カットした＜span＞に付与するクラス名 |
これらの設定値を変更することでクラス名等の設定が可能になっています。
文字を個別に囲う部分のベースとなるスクリプトは
冒頭に紹介したAllAboutさんの記事の内容を参考にしています。
実際にこれを実行させたサンプルは以下のようになります。
「jQueryでテキストを一文字ずつ装飾を変える実験」サンプルを別枠で表示
HTMLソースは上記に記した通りですが
スクリプト実行後はHTMLソース上は以下の様な構成になります。
（ブラウザの開発用ツールなどを使用すると確認できます。）
◆HTML <p class="split"> <span class="sliceTxt1">j</span> <span class="sliceTxt2">Q</span> <span class="sliceTxt3">u</span> <span class="sliceTxt4">e</span> <span class="sliceTxt5">r</span> <span class="sliceTxt6">y</span> <span class="sliceTxt7">で</span> <span class="sliceTxt8">テ</span> <span class="sliceTxt9">キ</span> <span class="sliceTxt10">ス</span> <span class="sliceTxt11">ト</span> <span class="sliceTxt12">を</span> <span class="sliceTxt13">一</span> <span class="sliceTxt14">文</span> <span class="sliceTxt15">字</span> <span class="sliceTxt16">ず</span> <span class="sliceTxt17">つ</span> <span class="sliceTxt18">カ</span> <span class="sliceTxt19">ッ</span> <span class="sliceTxt20">ト</span> <span class="sliceTxt21">す</span> <span class="sliceTxt22">る</span> <span class="sliceTxt23">サ</span> <span class="sliceTxt24">ン</span> <span class="sliceTxt25">プ</span> <span class="sliceTxt26">ル</span> <span class="sliceTxt27">テ</span> <span class="sliceTxt28">キ</span> <span class="sliceTxt29">ス</span> <span class="sliceTxt30">ト</span> <span class="sliceTxt31">で</span> <span class="sliceTxt32">す</span> <span class="sliceTxt33">。</span> </p>
このような形でスクリプト側で指定したCSSクラス名に
それぞれ文字ごとにナンバリングが付いた形で個別クラスが付与されます。
あとはCSSでそれぞれのクラスに対して
個別に指定を加えることで一文字ずつ違った装飾を付けることが可能になります。
CSSで個別に装飾指定をしたサンプルは以下のようになります。
「CSSで個別に装飾指定をしたサンプル」サンプルを別枠で表示
参考までにこのパターンのCSSは以下の様になっています。
◆CSS
.split * {
font-weight: bold;
}
.sliceTxt1 {font-size: 250%;}
.sliceTxt2 {font-size: 400%;}
.sliceTxt3 {font-size: 200%;}
.sliceTxt4 {font-size: 250%;}
.sliceTxt5 {font-size: 300%;}
.sliceTxt6 {font-size: 350%;}
.sliceTxt7 {font-size: 200%;color:#ff0000;}
.sliceTxt8 {font-size: 200%;color:#00ff00;}
.sliceTxt9 {font-size: 200%;color:#0000ff;}
.sliceTxt10 {font-size: 200%;color:#00ffff;}
.sliceTxt11 {font-size: 200%;color:#ff00ff;}
.sliceTxt12 {font-size: 200%;color:#ff9900;}
.sliceTxt13 {font-size: 200%;color:#00cccc;}
あまり長い文章のテキストに対しては効率のいいやり方ではないかもしれませんが
ちょっとしたテキスト装飾には有効に使えるかと思っています。
今回の参考記事。
【参考記事】1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About
jQueryでテキストを一文字ずつ装飾を変える際にぜひ。。。