● 内容
① ブログの説明は改行を使えるので、複数行に説明を表示することができます。
行単位に要素に名前を付けて、文字色や文字の大きさをＣＳＳで変更できる
様にします。
● 例
● やり方
① フリープラグインへ下記を追加する
<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() {
desciption_tagset('desc');
});
</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>
・ desciption_tagset('desc'); の descはクラス名です。変更が可能です。
クラス名は下記の様につけられます。
ブログ説明１行目・・・desc0
ブログ説明２行目・・・desc1
ブログ説明３行目・・・desc2
ブログ説明４行目・・・desc3
ブログ説明５行目・・・desc4
：
：
② ＣＳＳへ下記の様に記述します。(各値は変えてください）
/* ブログの説明 行単位の指定 */
.desc0{
color:#ff00ff;
font-size:12px;
}
.desc1{
color:#ff00ff;
font-size:12px;
}
.desc2{
color:#ff00ff;
font-size:12px;
}
.desc3{
color:#ff00ff;
font-size:12px;
}
.desc4{
color:#ff00ff;
font-size:12px;
}
.desc5{
color:#ff00ff;
font-size:12px;
}
● スクリプトのソースコード
function desciption_tagset(tag_first_name){// ブログの説明を１行ごとにタグを追加
// ブログの説明のHTMLの<br>を改行に置き換えて、不要タグを消し、改行で分割する
var d_html = $(".skinDescription").html().replace(/<br>/g, "\n").replace(/<\/?[^>]+>/gi, "").split("\n");
var d_new_html = "";
for(i=0;i<d_html.length; i++){ // HTML作成
d_new_html += '<span class="'+tag_first_name+i+'">'+d_html[i]+'</span><br>';
}
$(".skinDescription").html(d_new_html);// HTML変更
}