2008年06月30日

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 おまけ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

--


【コンピュータの最新記事】
posted by NOIKE at 23:42 | Comment(2) | TrackBack(5) | コンピュータ | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
ついにCSSを使えるようになったんですね!
ありがたく使わせて頂きます!
--
Posted by べに at 2008年07月02日 23:17
はーい.まだ不具合があると思いますが,ぜひ,試してみてください.
そのうち,取扱い説明書を 1 枚の Web ページにまとめます.

--
Posted by NOIKE at 2008年07月03日 21:16
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

lfls.php に,「もっと見る」リンクを追加
Excerpt: lfls.php に,「もっと見る」リンクを追加しました. --
Weblog: とりあえずコーヒーを飲もう
Tracked: 2008-10-30 12:55

lfls.php 取扱い説明書
Excerpt: lfls.php を初めて使う人向けの取扱い説明書を, --
Weblog: とりあえずコーヒーを飲もう
Tracked: 2008-10-30 12:56

lfls.php の artist count 値の表示の桁揃えをしてみた
Excerpt: lfls.php で, --
Weblog: とりあえずコーヒーを飲もう
Tracked: 2008-10-30 12:56

lfls.php 取扱い説明書を複数ページに分割
Excerpt: lfls.php 取扱い説明書を単一ページで書いたら非常に重たいページになってしまったので(^^;),複数ページに分割しました. --
Weblog: とりあえずコーヒーを飲もう
Tracked: 2008-10-30 12:58

Last.fm のラジオが有料化へ.
Excerpt: Last.fm、米・英・独以外で月額3ユーロの有料制に移行 http://internet.watch.impress.co.jp/cda/news/2009/03/25/22898.html ..
Weblog: とりあえずコーヒーを飲もう
Tracked: 2009-04-03 21:37
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。