● 各箇所の文字を1つ1つ分割して1つ1つにスタイル(CSS)を指定する。
◆ 下記記事と同様なものです。
関数化しています。
ブログタイトルの文字の色や大きさなどを1文字ごとに変える
http://ameblo.jp/new-blue-777/entry-11311974694.html
記事タイトルの文字の色や大きさなどを1文字ごとに変える
http://ameblo.jp/new-blue-777/entry-11194661184.html
◆ 改良点
![1](https://stat.ameba.jp/blog/ucs/img/char/char2/269.gif)
アメブロでは、下記の特殊文字が下記のように内部的に変わります
&
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
<
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
>
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
"
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
<br/>
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
<br/> には、クラス名はつかないので、連番はつきません。
<br/> は、ブログ説明とコメント内容で使われています。
![2](https://stat.ameba.jp/blog/ucs/img/char/char2/270.gif)
画面に表示される場合は、 & で表示されます。
<span class="クラス名">&</span>
![3](https://stat.ameba.jp/blog/ucs/img/char/char2/271.gif)
スクリプト内に組み入れています。
®
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
¬
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
©
![右矢印](https://stat.ameba.jp/blog/ucs/img/char/char2/283.gif)
◆ 分割可能なもの
① ブログタイトル
② ブログ説明
③ 記事タイトル
④ ブログ画像一覧を見る
⑤ 記事一覧(記事上下にあるページナビ)
⑥ 投稿日時
⑦ 投稿者名
⑧ テーマ名(リンク部分)
⑨ コメント(記事下)
⑩ ペタ(記事下)
⑪ サイドバーメニュータイトル
⑫ コメントのコメントの表示
⑬ コメントの題名(連番部分も含む)
⑭ コメント内容
⑮ コメント投稿者
⑯ コメント投稿時間
⑰ コメントボタン(コメントする)
◆ やり方
① 下記を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>
<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>
◆ 説明
![1](https://stat.ameba.jp/blog/ucs/img/char/char2/269.gif)
(最初の一文字は英字であること。 以降は英数字)
![2](https://stat.ameba.jp/blog/ucs/img/char/char2/270.gif)
例 ブログタイトルの場合(TitleA)・・・CSSの例
.TitleA1{color:#ff0000;}/* ブログタイトルの1文字目 */
.TitleA2{color:#00ff00;}/* ブログタイトルの2文字目 */
.TitleA3{color:#0000ff;}/* ブログタイトルの3文字目 */
② CSSへ下記を追記(ブログタイトルの例)
(文字数分指定してください。TitleA1の1は1文字目を意味します)
.TitleA1{/* ブログタイトル1文字目 */
color:#000000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA2{/* ブログタイトル2文字目 */
color:#999999;/* 色 */
font-size:12px;/* 大きさ */
}
.TitleA3{/* ブログタイトル3文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA4{/* ブログタイトル4文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA5{/* ブログタイトル5文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA6{/* ブログタイトル6文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA7{/* ブログタイトル7文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA8{/* ブログタイトル8文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA9{/* ブログタイトル9文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA10{/* ブログタイトル10文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA11{/* ブログタイトル11文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
color:#000000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA2{/* ブログタイトル2文字目 */
color:#999999;/* 色 */
font-size:12px;/* 大きさ */
}
.TitleA3{/* ブログタイトル3文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA4{/* ブログタイトル4文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA5{/* ブログタイトル5文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA6{/* ブログタイトル6文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA7{/* ブログタイトル7文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA8{/* ブログタイトル8文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA9{/* ブログタイトル9文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA10{/* ブログタイトル10文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
.TitleA11{/* ブログタイトル11文字目 */
color:#ff0000;/* 色 */
font-size:32px;/* 大きさ */
}
◆ 下記はフリープラグインの最初に1つあれば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>
![ヒミツ](https://stat.ameba.jp/blog/ucs/img/char/char2/137.gif)
該当するスクリプト内容
function title_sep1(selector1,selector2){// タイトル等の1文字単位のの分割
$(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)=='&') || // &
(T0.substring(j,j+5)=='®') || // ®
(T0.substring(j,j+5)=='¬')){ // ¬
T1=T1+'<span class="'+selector2+Seq+'">'+T0.substring(j,j+5)+'</span>';
j=j+4;
}else{
if((T0.substring(j,j+4)=='>') || // >
(T0.substring(j,j+4)=='<')){ // <
T1=T1+'<span class="'+selector2+Seq+'">'+T0.substring(j,j+4)+'</span>';
j=j+3;
}else{
if((T0.substring(j,j+6)=='"')|| // "
(T0.substring(j,j+6)=='©') || // ©
(T0.substring(j,j+6)==' ')){ // スペース
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);
});
};