各箇所の文字を分割する

★　各箇所の文字を分割する

●　各箇所の文字を１つ１つ分割して１つ１つにスタイル（CSS）を指定する。


◆　下記記事と同様なものです。
　　関数化しています。

ブログタイトルの文字の色や大きさなどを１文字ごとに変える
http://ameblo.jp/new-blue-777/entry-11311974694.html

記事タイトルの文字の色や大きさなどを１文字ごとに変える
http://ameblo.jp/new-blue-777/entry-11194661184.html


◆　改良点

　特殊記号に対応しました。

アメブロでは、下記の特殊文字が下記のように内部的に変わります

&　　& 　アンド
<　　&lt;　　小なり
>　　&gt;　　大なり
"　　&quot;　　ダブルクォーテーション
　　&nbsp;　　半角スペース
<br/> 改行・・・スクリプト内では、<br> または　<BR>（IEでは　<BR>)


<br/> には、クラス名はつかないので、連番はつきません。
<br/> は、ブログ説明とコメント内容で使われています。


　例として、アンドの場合は、内部的には、下記のように変換されます。
　　　画面に表示される場合は、　& で表示されます。

<span class="クラス名">&amp;</span>


　下記の特殊記号については、アメブロでは、そのままなですが、
　　　スクリプト内に組み入れています。

®　　&reg;
¬　　&not;
©　　&copy;







◆　分割可能なもの

①　ブログタイトル
②　ブログ説明
③　記事タイトル
④　ブログ画像一覧を見る
⑤　記事一覧(記事上下にあるページナビ)
⑥　投稿日時
⑦　投稿者名
⑧　テーマ名(リンク部分)
⑨　コメント(記事下)
⑩　ペタ(記事下)
⑪　サイドバーメニュータイトル
⑫　コメントのコメントの表示
⑬　コメントの題名（連番部分も含む)
⑭　コメント内容
⑮　コメント投稿者
⑯　コメント投稿時間
⑰　コメントボタン（コメントする）




◆　やり方

①　下記をCSSへ追記する。
（分割したくない場合は、分割したくない行を消すこと）

<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");// ブログタイトル
title_sep1(".skinDescription","DescA");// ブログ説明
title_sep1(".skinArticleTitle","TitleB");// 記事タイトル
title_sep1(".imagelistLink a","Ilink");// ブログ画像一覧を見る
title_sep1(".pagingList","Plist");// 記事一覧
title_sep1(".articleTime time","Atime");// 投稿日時
title_sep1(".articleName .name","Aname");// 投稿者名
title_sep1(".articleTheme a","Athemen");// テーマ名
title_sep1(".commentLink","Fcomment");// コメント
title_sep1(".petaLink","Fpeta");// ペタ
title_sep1(".skinMenuTitle","TitleC");// サイドバーメニュータイトル
title_sep1(".commentTitle","CTitle");// コメントのコメントの表示
title_sep1(".commentHeader","CHead");// コメントの題名（連番部分も含む)
title_sep1(".commentBody","CBody");// コメント内容
title_sep1(".commentAuthor","CAuthor");// コメント投稿者
title_sep1(".commentTime","CTime");// コメント投稿時間
title_sep1(".commentBtn","CBtn");// コメントボタン（コメントする）
});
</script>

◆　説明

　赤字部分はユニークな名前をつけます。
（最初の一文字は英字であること。　以降は英数字）
　赤字部分がCSSで指定するセレクタ名となります。

例　ブログタイトルの場合（TitleA)・・・CSSの例

.TitleA1{color:#ff0000;}/* ブログタイトルの１文字目 */
.TitleA2{color:#00ff00;}/* ブログタイトルの２文字目 */
.TitleA3{color:#0000ff;}/* ブログタイトルの３文字目 */






②　CSSへ下記を追記（ブログタイトルの例）
（文字数分指定してください。TitleA1の1は１文字目を意味します)

.TitleA1{/* ブログタイトル１文字目 */
color:#000000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA2{/* ブログタイトル２文字目 */
color:#999999;/* 色 */
font-size:12px;/* 大きさ */
}
.TitleA3{/* ブログタイトル３文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA4{/* ブログタイトル４文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA5{/* ブログタイトル５文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA6{/* ブログタイトル６文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA7{/* ブログタイトル７文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA8{/* ブログタイトル８文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA9{/* ブログタイトル９文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA10{/* ブログタイトル１０文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA11{/* ブログタイトル１１文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}

◆　下記はフリープラグインの最初に１つあれば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>




　http://usrcss.ameblo.jp/skin/templates/6d/7d/10030757386.css　の
　　該当するスクリプト内容




function title_sep1(selector1,selector2){// タイトル等の１文字単位のの分割
$(selector1).each(function(){
var T0;var T1="";var Seq=0;
if($(this).html().indexOf("<!-- google_ad_section_start(name=s2, weight=.1) -->")!=-1){
T0=$(this).html().replace( "<!-- google_ad_section_start(name=s2, weight=.1) -->", "" ).replace("<!-- google_ad_section_end(name=s2) -->", "");
}else{
T0=$(this).html();
}
for(j = 0; j < T0.length; j++){
Seq=Seq+1;
if((T0.substring(j,j+5)=='&amp;') || // &
(T0.substring(j,j+5)=='&reg;') || // ®
(T0.substring(j,j+5)=='&not;')){ // ¬
T1=T1+'<span class="'+selector2+Seq+'">'+T0.substring(j,j+5)+'</span>';
j=j+4;
}else{
if((T0.substring(j,j+4)=='&gt;') || // >
(T0.substring(j,j+4)=='&lt;')){ // <
T1=T1+'<span class="'+selector2+Seq+'">'+T0.substring(j,j+4)+'</span>';
j=j+3;
}else{
if((T0.substring(j,j+6)=='&quot;')|| // "
(T0.substring(j,j+6)=='&copy;') || // ©
(T0.substring(j,j+6)=='&nbsp;')){ // スペース
T1=T1+'<span class="'+selector2+Seq+'">'+T0.substring(j,j+6)+'</span>';
j=j+5;
}else{
if((T0.substring(j,j+4)=='<br>')||(T0.substring(j,j+4)=='<BR>')) { // 改行
T1=T1+'<br>';
j=j+3;
Seq=Seq-1;
}else{
T1=T1+'<span class="'+selector2+Seq+'">'+T0[j]+'</span>';
}
}
}
}
}
T1=T1+T0.substring(j);
$(this).html(T1);
});
};