タイトルは、ＨＰやブログの顔ともいえる部分であり、サイトを作るうえで最も重要な部分です。
また、検索エンジン最適化（SEO対策）の上でも非常に重要なウェイトがおかれている部分です。
画像を使うよりも、JavaScriptやスタイルシートでテキストタイトルに変化を与えてみましょう。
■手順その壱
<HEAD>〜</HEAD>に以下のスクリプトを記入する
<script type="text/javascript">
<!--
function mochiya1() {
var str_color = (area1.style.color == "red") ? "yellow" : "red"
var back_color = (area1.style.backgroundColor == "yellow") ? "red" : "yellow"
var str_trans = area1.filters.revealTrans.transition + 1
if(str_trans == 23) {
str_trans = 0
}
area1.filters.revealTrans.transition = str_trans
area1.filters.revealTrans.apply()
area1.style.color = str_color
area1.style.backgroundColor = back_color
area1.innerText = "JavaScript＆Css Title Sample 4"
area1.filters.revealTrans.play()
setTimeout("mochiya1()",1500)
}
//-->
</script>
■手順その弐
<BODY>に「onload=mochiya1()」を追加する。 ※記入例 ： <BODY onload=mochiya1()>■手順その参
<div id=area1 style="position:absolute;left:10px;top:10px;font-size:36px;font-weight:bold;filter:revealTrans(transition=0,duration=0.5);color:red;background-color:yellow;text-align:center;padding:2px 10px 0px 10px;">無料ブログ比較・評価 - FC2BLOG 編</div>
※position:absolute;left:10px;top:10px; は、タイトルを表示させる位置
※トランジション効果の説明
※サンプルページ ⇒ 無料ブログ比較・評価 - FC2BLOG 編