jQueryのコピペで文字のサイズや色の変更を加えるスニペット

2021年6月17日 5分

テキストの色やサイズをCSSで1文字ずつ指定する場合、大変ですが一文字づつにspanタグに class名をつけて記述すれば、できないこともないですが文字数が多い場合非常に大変です。

また、それに加えWordPressなどのCMSで動的に出力する場合は、ほぼ無理なので、1文字ずつ異なる文字色や、サイズを変更して表示ができるjQueryのコードがあります。

このコピペ用コードは主に、WordPressの日付箇所をいじる時によく使っているスニペットで、コードがシンプルなのでカスタマイズも容易で非常に使いやすいです。

この記事は、

文字を変更させた場合の実装サンプル。
jQueryのコピペ用コード一式。
ざっくりとしたコードの解説。

の内容です。

サンプルを交え、文字のサイズや色の変更を加えるスニペットについて解説します。

かかかず

使う機会があったら是非使ってみてください。

デザインサンプル
コピペ用のコード一式
各コードのざっくりとした解説
- jQuery：指定するclass名の表記
- HTML：jQueryでレンダリングが終わった後のコード

デザインサンプル

早速、実装のサンプルについてご覧ください。サンプルは2個記載していますが、上から順に「何にも装飾しないサンプル」、そして「jQueryで装飾したサンプル」です。

何にも装飾しないサンプル

2021年10月31日火 12:00〜14:00

jQueryで装飾したサンプル

2021年10月31日火 12:00〜14:00

かかかず

西暦日付のサンプルで、主に数字箇所に装飾を入れています。サンプルはそうしてませんが、一個一個の文字づつにそれぞれ装飾可能です。

コピペする時の注意点

この記事で紹介のコピペ用コードには、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下のMEMOを見てjQueryもHTMLファイルに書き込みましょう。

MEMO

当サイトでは以下のjQueryを使用しています。

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>

上記のような記述が、htmlファイルの

<head>〜</head>

の中に無い場合その中へ貼り付けましょう。

かかかず

jQueryは必須でないと動かないので、書きこんでからコピペください。

コピペ用のコード一式

以下がコピペ用のコード一式です。

HTMLは p タグにclass="textdeco" のclassをつけてテキストを作り、CSSで見た目を整えます。

jQueryは、<body>〜〜</body>のクロージングタグの直前にコピペすればOKです。

コードを表示する

HTML

<p class="textdeco">2021年10月31日火 12:00〜14:00</p>

CSS

.DECOtxt1, .DECOtxt2, .DECOtxt3, .DECOtxt4, .DECOtxt6, .DECOtxt7, .DECOtxt9, .DECOtxt10 {
    font-weight: 600;
    color: #6bb6ff;
    font-size: 2.3rem;
    letter-spacing: 0.04rem;
}
.DECOtxt5, .DECOtxt8, .DECOtxt11 {
    margin: 0 3px;
}
.DECOtxt12 {
    background: #6bb6ff;
    margin: 0 4px;
    font-size: 1.2rem;
    vertical-align: super;
    padding: 4px 6px;
    border-radius: 50px;
    color: #FFF;
}
.DECOtxt13, .DECOtxt14, .DECOtxt15, .DECOtxt16, .DECOtxt17, .DECOtxt18, .DECOtxt19, .DECOtxt20, .DECOtxt21, .DECOtxt22, .DECOtxt23 {
    font-family: "Quicksand","Helvetica", "Arial", "Hiragino Kaku Gothic ProN", "Hiragino Sans", YuGothic, "Yu Gothic", "メイリオ", Meiryo, sans-serif;
    color: #a5aaaf;
}

jQuery

$(function(){
    var setElm = $('.textdeco'),
    className = 'DECOtxt';
 
    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);
            });
        });
    });
});

各コードのざっくりとした解説

上記のコピペ用コードで実装が可能ですが、文字の短縮の対象指定はjQueryの冒頭の2行目・3行目をいじることで変更可能です。

いじる箇所を、ざっくりながら解説します。

jQuery：指定するclass名の表記

jQueryの冒頭にある2行目・3行目は、以下の様になっています。

var setElm = $(‘.textdeco’),	装飾の対象にするテキストを囲うブロック要素名（IDやタグ名でもOK）
className = ‘DECOtxt’;	文字の `span` タグに付与するclass名

上記のクラス名などの値を変更して任意で設定が可能です。

HTML：jQueryでレンダリングが終わった後のコード

コピペ用のHTMLのコードは p タグで括っただけの簡単な記述ですが、最終的に出力されるコードは以下のようになります。

HTML

<p class="textdeco">
<span class="DECOtxt1">2</span>
<span class="DECOtxt2">0</span>
<span class="DECOtxt3">2</span>
<span class="DECOtxt4">1</span>
<span class="DECOtxt5">年</span>
<span class="DECOtxt6">1</span>
<span class="DECOtxt7">0</span>
<span class="DECOtxt8">月</span>
<span class="DECOtxt9">3</span>
<span class="DECOtxt10">1</span>
<span class="DECOtxt11">日</span> 
<span class="DECOtxt12">火</span> 
<span class="DECOtxt13">1</span>
<span class="DECOtxt14">2</span>
<span class="DECOtxt15">:</span>
<span class="DECOtxt16">0</span>
<span class="DECOtxt17">0</span>
<span class="DECOtxt18">〜</span>
<span class="DECOtxt19">1</span>
<span class="DECOtxt20">4</span>
<span class="DECOtxt21">:</span>
<span class="DECOtxt22">0</span>
<span class="DECOtxt23">0</span>
</p>

ブラウザのソースを表示では上記のようにはならないので、Chromeのデベロッパーツールで見てみましょう。