lfls.php -- last.fm listing [m adv]

lfls.php -- last.fm listing

もっと進んだ使い方

css オプションで CSS を指定することにより， lfls で表示される各要素の色などをカスタマイズすることができます．
CSS そのものについては各自で調べていただくことにして，ここでは，いくつかの指定例を紹介します．
なお，lfls は，デフォルトで適度な色付けが行われるように次の CSS が適用されますが，
css オプションを指定したときにはこれらが適用されなくなりますので，そのことに注意して css オプションを指定してください．

また，lfls の css オプションにおいては， background: よりも background-color: を使用したほうが問題なく色が付きますので，これにも注意してください．

文字色と背景色のカスタマイズ（css オプション）

文字色と文字背景色を変更するには，次のように css オプションで CSS を指定します．
ここでは，文字色を青，背景色を白に変更する例を紹介します．

body 要素の色指定だけでも十分ですが，ユーザ名や曲名は<a> タグによるリンクになっており，一度訪れると body の色とは異なる色になることがあります．
そのため，ここでは body 要素だけではなく，a 要素の色も指定しています．

値を指定するときに # をつけないことに注意してください． # を書くと，うまく反映されません．

ユーザ名や曲名の下線を消すカスタマイズ（css オプション）

ユーザ名や曲名は，<a> タグによるリンクになっているため，デフォルトで下線が付いています．
ここでは，下線を消す設定を紹介します．

リンクの上にマウス・ポインタが来たときに文字飾りを変更するカスタマイズ（css オプション）

ユーザ名や曲名の下線を消すカスタマイズを設定していると，それらがリンクでありクリック可能であることがわかりづらくなってしまいます．
そこで，リンクの上にマウス・ポインタが来たときに文字色を白，文字背景色を青に変更する設定を紹介します．

CSS を駆使した表示のカスタマイズ（css オプション）

lfls.php での各表示要素は，なるべく異なる span class になるようにしてあり， CSS で可能な範囲で表示をカスタマイズすることができます．
mode オプションごとの表示と span class，カスタマイズ例を示しますので，参考になさってください．

mode=rt
Recent Track の span class

mode=ar

mode=al

mode=tt

CSS を外部ファイルにして lfls.php に与える（cssfile オプション）

複数の CSS を css オプションにずらずらと並べて書いていく方法は間違いを起こしやすく，作業の見通しもあまりよくありません．
もし，自分でファイルを置けるサーバをお持ちであれば， CSS を外部ファイルにし，lfls.php の cssfile オプションで与えることができます．

http://noike.info/~kenzi/cgi-bin/lfls/lfls.css に，次の内容の CSS ファイルがあります．

これを，lslf.php に cssfile オプションで与える例を紹介します．

参考になるかどうかわかりませんが，ほかにも外部 CSS ファイルの例を作成しましたので，紹介します．

http://noike.info/~kenzi/cgi-bin/lfls/mz80c.css

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

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

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

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

.lflstrack  {color:#000000; background-color:#00ff00;}
.lflsartist {color:#00ff00; background-color:#000000;}
.lflsalbum  {color:#000000; background-color:#00ff00;}

.lflsacnt   {color:#000000; background-color:#00ff00;}
.lflstcnt   {color:#000000; background-color:#00ff00;}

.lflsuser:hover {color:#00ff00; background-color: #000000; text-decoration: underline}
.lflstitle:hover {color:#00ff00; background-color: #000000; text-decoration: underline}
.lflstrack:hover {color:#00ff00; background-color: #000000; text-decoration: underline}
.lflsartist:hover {color:#000000; background-color: #00ff00; text-decoration: underline}
.lflsalbum:hover {color:#00ff00; background-color: #000000; text-decoration: underline}
.lflsacnt:hover {color:#00ff00; background-color: #000000; text-decoration: underline}
.lflstcnt:hover {color:#00ff00; background-color: #000000; text-decoration: underline}

[←さらに進んだ使い方] [↑目次へ戻る] [携帯電話からの使い方→]

http://noike.info/~kenzi/noike_bn.png