先日、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でテキストを一文字ずつ装飾を変える際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryで文章などのテキストに対して一文字ずつ個別に装飾を変える実験

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR