Result
正規表現で英数字のみ対応させているので日本語はこのコードでは対応できない。Lettering.jsなら可能。
jQuery
//foo内からテキストを正規表現で探して1つずつspanで囲む$('.foo').children().andSelf().contents().each(function() { if (this.nodeType == 3) { $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char'>$&</span>")); }});$('.foo').each(function() { //span要素に番号付きのclassを与える $('span.char', this).each(function(i) { i = i+1; $(this).addClass('char' + i); });}); |
css
.foo span{display:inline-block;}.foo .char1 {color:red;}.foo .char2 {color:green;}.foo .char3 {color:blue;}.foo .char4 {color:yellow;}.foo .char5 {color:orange;}.foo .char6 {color:yellowgreen; padding-left:5px;}.foo .char7 {color:cyan; padding-left:5px;}.foo .char8 {color:gold; padding-left:5px;}.foo .char9 {color:pink; padding-left:5px;}.foo .char10 {color:magenta; padding-left:5px;} |
html
<h2 class="foo">kachibito</h2> |
via
via:http://hompimpaalaihumgambreng.blogspot.jp/2012/04/letteringjs-sederhana.html
