ヘアサロン店長の独り言♂

美容、ヘアスタイルについてや、PC・クルマなど・・・イロイロと 気になる事を載せていこうと思ってます。モバイルコンテンツ

2010-05-23

人気ヘアケアブログランキング 先頭の文字を大きくする

先日タグリストを造る時に、先頭の文字を強調するよう
BLOGGERからの移行完了にphpで取り出しを書いたが、

css で 

a:first-letter{font-size:125%;}

なんて簡単なのもあるが、思うようにできず、サクッとjqueryでやってみた。


$("a[rel='tag']").each(function() {#a タグに rel=tagをつけた場合で、$("a")ならリンクタグ全て、$("a.inpact")ならclass=inpactのあるaタグという意味です。
var first_letter = $(this).text().substr(0,1);
var after_letter = $(this).text().substr(1,$(this).text().length);

// ランダムカラーの場合 右サイドのタグリスト
//var color = Math.round(0xffffff * Math.random());
//$(this).html("<b style='color:rgb(" + (color >> 16) + "," + (color >> 8 & 255) + "," + (color & 255)+");font:bold 120%/1.2em \"HG丸ゴシックM-PRO\"'>"+first_letter+"</b>"+after_letter);

//英数字と日本語を分ける場合。
if(first_letter.search(/\w/i) != -1){
$(this).html("<b style='color:#c09;font:130%/1em \"Comic Sans MS\",\"Times New Roman\"'>"+first_letter+"</b>"+after_letter);
}else{
$(this).html("<b style='color:#60f;font:bold 125%/1em \"HG丸ゴシックM-PRO\"'>"+first_letter+"</b>"+after_letter);
}

});

コメントをどうぞ

VISAカード

楽天カード