2007/09/29

検索対策

googleなどの検索エンジンでは、動的ページはリスティングされないそうなので
.htaccessを使ってmod_rewriteを記述してルールを設定すれば静的ページとして表示されます。

読んで字のごとくRewriteEngineを起動させます。
RewriteEngine on
RewriteRule 『...』
以降にルールを設定して、〜.htmlとか入れておけば
htmlで作った風なアドレスになります。

2007/09/08

cssでロールオーバー

Javaでのロールオーバーも簡単なのですが、ヘッダーと分離していて面倒なので
メニューの部分をcssのロールオーバーで書いてみた。

リンクする所のバックグラウンドに画像(menu_a.gif)を敷いて上から文字を入れる。
枠の端から文字が近いので、text-indentで調整。

div#contentsleft dd.icon a:link{
display:block;
width:200px;
color:#333333;
text-indent: 12px;
background:url(../images/menu_a.gif) no-repeat;
height:30px;
line-height:30px;
text-decoration:none;
}

ポインタを乗せると(hover)バックグラウンドの画像が入れ替わり(menu_hover.gif)
バックグラウンドの画像は濃い青なので文字の色も白に変わるようにします。

div#contentsleft dd.icon a:hover{
color:white;
background:url(../images/menu_hover.gif) no-repeat;
}


訪問後の画像も変えることが出来ますがあえてそのままで。
文字の色だけ変えても良かったかも?

div#contentsleft dd.icon a:visited{
display:block;
width:200px;
color:#333333;
text-indent: 12px;
background:url(../images/menu_a.gif) no-repeat;
height:30px;
line-height:30px;
text-decoration:none;
}

SmartyでJavaScriptを使う

テンプレートエンジンであるsmartyを使ってみる、
javascriptなどでロールオーバーを作成すると
<script>〜</script>の所でエラーが出る。

ここはsmartyに解釈させないように
<script>〜</script>を{literal}{/literal}で括ると回避される。