文字の色・大きさををランダムに変える。

★　文字の色・大きさををランダムに変える。

●　参考記事

各箇所の文字を分割する
http://ameblo.jp/new-blue-777/entry-11314750769.html

■　各箇所の文字を分割して、その文字に対してランダムに
　　文字の色を変えます。また、文字の大きさを変えることも
　　可能です。

　　①　文字の色を変える。
　　②　文字の大きさを変える。
　　③　文字の色・大きさを変える。

例

リアナのカスタマイズ日記（ＣＳＳ編集用デザイン）

★　やり方。（フリープラグインに入れる）

①　文字の色をランダムに変えたい場合

◆　説明（以下同様）

・　skinArticleTitle　は、記事タイトルを意味します。

　　ほかに下記が指定可能です

①　ブログタイトル
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".skinTitleArea a","TitleA");// ブログタイトル
color_set_sep(".TitleA",100);// 文字の色をランダムに変える
})
</script>

②　ブログ説明
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".skinDescription","DescA");// ブログ説明
color_set_sep(".DescA",100);// 文字の色をランダムに変える
})
</script>

③　記事タイトル
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".skinArticleTitle","TitleB");// 記事タイトル
color_set_sep(".TitleB",100);// 文字の色をランダムに変える
})
</script>

④　ブログ画像一覧を見る
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".imagelistLink a","Ilink");// ブログ画像一覧を見る
color_set_sep(".Ilink",10);// 文字の色をランダムに変える
})
</script>

⑤　記事一覧(記事上下にあるページナビ)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".pagingList","Plist");// 記事一覧
color_set_sep(".Plist",4);// 文字の色をランダムに変える
})
</script>

⑥　投稿日時
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".articleTime time","Atime");// 投稿日時
color_set_sep(".Atime",40);// 文字の色をランダムに変える
})
</script>

⑦　投稿者名
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".articleName .name","Aname");// 投稿者名
color_set_sep(".Aname",50);// 文字の色をランダムに変える
})
</script>

⑧　テーマ名(リンク部分)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".articleTheme a","Athemen");// テーマ名
color_set_sep(".Athemen",30);// 文字の色をランダムに変える
})
</script>

⑨　コメント(記事下)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentLink","Fcomment");// コメント
color_set_sep(".Fcomment",4);// 文字の色をランダムに変える
})
</script>

⑩　ペタ(記事下)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".petaLink","Fpeta");// ペタ
color_set_sep(".Fpeta",3);// 文字の色をランダムに変える
})
</script>

⑪　サイドバーメニュータイトル
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".skinMenuTitle","TitleC");// サイドバーメニュータイトル
color_set_sep(".TitleC",20);// 文字の色をランダムに変える
})
</script>

⑫　コメントのコメントの表示
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentTitle","CTitle");// コメントのコメントの表示
color_set_sep(".CTitle",4);// 文字の色をランダムに変える
})
</script>

⑬　コメントの題名（連番部分も含む)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentHeader","CHead");// コメントの題名（連番部分も含む)
color_set_sep(".CHead",30);// 文字の色をランダムに変える
})
</script>

⑭　コメント内容
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentBody","CBody");// コメント内容
color_set_sep(".CBody",300);// 文字の色をランダムに変える
})
</script>

⑮　コメント投稿者
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentAuthor","CAuthor");// コメント投稿者
color_set_sep(".CAuthor",20);// 文字の色をランダムに変える
})
</script>

⑯　コメント投稿時間
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentTime","CTime");// コメント投稿時間
color_set_sep(".CTime",30);// 文字の色をランダムに変える
})
</script>

⑰　コメントボタン（コメントする）
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>
<script type='text/javascript'>
$(document).ready(function(){
title_sep1(".commentBtn","CBtn");// コメントボタン（コメントする）
color_set_sep(".CBtn",6);// 文字の色をランダムに変える
})
</script>

・　下記はフリープラグインの先頭に１つあればOKです。

<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>

・下記がフリープラグインに設定されていれば、下記は不要です。

<script type='text/javascript' src='http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css'></script>

・　TitleB　は、記事タイトルを１文字毎に、分けた場所につけた
　　場所の名前です。
　　（TitleB は自由に変えてOKです。但しユニークな名前をるけてください）

　　例：ABC　というタイトルの場合は、下記のようにHTMLが自動的に変わります

　　　　<span class="TitleB1">A</span><span class="TitleB2">B</span><span class="TitleB3">C</span>

　　　あとは、TitleB1～TitleB100 までランダムに色を変えるCSSをスクリプトで
　　　発行します。

・　color_set_sep(".TitleB",100);　の　100 は最大文字数を指定します。
　　100 くらいあれば十分です。

②　文字の大きさをランダムに変えたい場合

◆　追加説明

・　fsize_set_sep(".TitleB",100,12,34);　の　12 と　34 は
　　最小の文字サイズ（px)　と　最大の文字サイズ（px)　を指定します。
　　上記では、 12px ～　34px の範囲でランダムに文字の大きさを変えます。

・　①　との違いは、　color_set_sep　と　fsize_set_sep　との違いと
　　最小・最大フォントサイズの指定部分です。

③　文字の色・文字の大きさをランダムに変えたい場合

●　その他

・　今後は、文字を虹色にグラデーションさせたりするスクリプトを作成してみる？