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

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 おまけ1: サンプル 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

"lfls.php を,CSS を使用できるように改良" へのコメントを書く

お名前
メールアドレス
ホームページアドレス
コメント

※ブログオーナーが承認したコメントのみ表示されます。