lfls.php を，CSS を使用できるように改良

Web拍手：

lfls.php で CSS による文字飾りができるように，css オプションと cssfile オプションを追加しました．
また，style オプションは，多々の不具合があることがわかりましたので，徐々に廃止する予定です．
CSS を使うと，こんな文字飾りもできるようになります．


順に解説します．


o 文字色，文字背景色の変更方法
文字色や文字背景色を変更するには，css= で body と a の値を CSS で与えます．
文字色が color で，文字背景色が background です．
文字色を赤（ff000），文字背景色を白（ffffff）に変更する例を示します．

<iframe src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=knoike&mode=rt&time=ago&now=3&ud=false&td=false&css=body{color:ff0000; background:ffffff;} a{color:ff0000; background:ffffff;}" width="160" height="360">
</iframe>

o 曲名の下線を消す方法
曲名は，HTML の a タグによるリンクになっているで，デフォルトで下線が表示されてしまいます．
これを消すには，css= で a の text-decoration を none にします．

<iframe src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=knoike&mode=rt&time=ago&now=3&ud=false&td=false&css=body{color:ff0000; background:ffffff;} a{color:ff0000; background:ffffff; text-decoration:none}" width="160" height="360">
</iframe>

o 曲名の上にマウス・ポインタが来たときに色を変えるようにする方法
さて，曲名の下線は消えましたが，そのかわり，リンクになっていることがわかりづらくなってしまいました．
そこで，曲名の上にマウス・ポインタが来たときに（hover 状態になったときに）色を変えるようにしてみましょう．
css= で，a:hover の color, background を指定します．
これで，曲名の上にマウス・ポインタが来たときに色が変わり，リンクであることがわかります．

<iframe src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=knoike&mode=rt&time=ago&now=3&ud=false&td=false&css=body{color:ff0000; background:ffffff;} a{color:ff0000; background:ffffff; text-decoration:none} a:hover{color:ffffff; background:0000ff;}" width="160" height="360">
</iframe>

o CSS を外部ファイルにし，参照させる方法
凝った CSS を css= に続けて書いていくのは，結構，苦痛です(^^;)．
自作の CSS ファイルを置けるサーバを持っている方は，CSS を外部ファイルにしてサーバ上に置き，そのファイルの URL を cssfile= で指定することで，それを参照させることができます．

たとえば，外部 CSS ファイルの URL が
http://noike.info/~kenzi/cgi-bin/lfls/lfls.css
のときは，cssfile=http://noike.info/~kenzi/cgi-bin/lfls/lfls.css と書きます．

<iframe src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=knoike&mode=rt&cssfile=http://noike.info/~kenzi/cgi-bin/lfls/lfls.css" width="160" height="360">
</iframe>



http://noike.info/~kenzi/cgi-bin/lfls/lfls.css
の中身は，

a {text-decoration:none;}
a:hover {color:#ffffff; background:#ff0000;}

.lflsuser {color:#000000; background:#fffacd;}
.lflstitle {color:#ff0000; background:#ffccff;}

.lflsdate {color:#ff00ff; background:#ffffff;}
.lflstime {color:#ff0000; background:#ffffff;}
.lflstrack {color:#0000ff; background:#ffffff;}
.lflsartist {color:#000000; background:#d0ffd4;}

です．ここでは詳しく解説しませんが，表示のカスタマイズの参考にしてください．
またの機会に，詳しく解説します．


o おまけ１： サンプル CSS（MZ-80C 風）

<iframe src="http://noike.info/~kenzi/cgi-bin/lfls/lfls.php?user=knoike&mode=rt&time=ago&cssfile=http://noike.info/~kenzi/cgi-bin/lfls/mz80c.css" width="160" height="360">
</iframe>

body {color: #00ff00; background: #000000;}

a {color:#000000; text-decoration: none}
a:hover {color:#00ff00; background: #000000; text-decoration: underline}

.lflsuser {color:#000000; background:#00ff00;}
.lflstitle {color:#000000; background:#00ff00;}

.lflsdate {color:#00ff00; background:#000000;}
.lflstime {color:#00ff00; background:#000000;}
.lflstrack {color:#000000; background:#00ff00;}
.lflsartist {color:#00ff00; background:#000000;}

--

lfls.php に，項目の表示/非表示オプションと，「今」の範囲指定オプションを追加
http://cancoffee2.at.webry.info/200806/article_134.html

lfls.php を，「〜分前」形式の表示もできるように改良
http://cancoffee2.at.webry.info/200806/article_133.html

last.fm に scrobble した情報を表示する lfls.php
http://cancoffee2.at.webry.info/200806/article_91.html

--

Comments

ついにCSSを使えるようになったんですね！
ありがたく使わせて頂きます！
--

Posted by べに at 2008年07月02日 23:17

はーい．まだ不具合があると思いますが，ぜひ，試してみてください．
そのうち，取扱い説明書を 1 枚の Web ページにまとめます．

--

Posted by NOIKE at 2008年07月03日 21:16