Last.fmの最近聴いたトラックを表示するWordPressプラグイン：Last.fm RPSを導入してみた
自宅では、音楽を聴きながらネットサーフィンをする事が多く、自分聴いている曲は、IMの表示メッセージに表示する様にしているよ。でも、それだけじゃ物足りなくて、ブログのサイドバーにも表示出来たらとふと思いついてしまったので、今日は、それを実現する方法を探してました。
導入したのは、Last.fm RPS。Last.fmの最近聴いた曲をサムネイル画像付きでサイドバーに表示してくれるプラグイン。導入はとても簡単。
- ダウンロードしたプラグインをwp-content/pluginディレクトリにアップ
- 管理画面の[プラグイン]から、Last.fm RPSをアクティブにする
- 管理画面の[デザイン]の[ウィジェット]で、サイドバーに表示する様に設定する
導入にあたり、少し困ったのは、デザイン面。Last.fmのロゴを表示するところのCSSが原因でサイドバーのデザインが崩れてしまってたよ※1。
だから、少しPHP本体とCSSに修正を加えてみたよ。
ロゴを非表示にする
wp-content/plugin/lastfm-rps/lastfm.phpの469行目を以下の様に修正する。CSSで見えなくしてもいいけど、邪魔なんでコードを修正して出力されない様にしたよ。
echo "<span>".$options['title']."</span>";
<li>タグの見栄えを変更する
プラグインが出力する部分はCSSでデザインが可能になっているよ。でも、i3Themeの場合は、プラグインのCSSよりも、WordPress本体のCSSが優先されてしまい、見た目の変更が出来なかったので、プラグインのCSSが優先される様に、コードに少し手を入れてみた。
wp-content/plugin/lastfm-rps/lastfm.phpの274行目を以下の様に修正する。通常、プラグインの出力は<li>タグに空のクラスを設定しているので、ここを任意のクラス※2を設定する様にしたよ。
$newclass = "lastfm_recent";
その上で、CSSを修正する。hamasakuは以下の様にしてみたよ。
#lastfm_recent {padding:0;margin:0;margin-bottom:10px;display:block;}
#lastfm_recent li {padding:2px;margin-bottom:2px;height:55px;border:0px;}
#lastfm_recent li.lastfm_recent {background:none transparent;padding-left:0px;line-height:110%}
#lastfm_recent li a.lastfm_recent_title {font-size:12px;}
#lastfm_recent li span.lastfm_recent_date {padding:0;margin:0;font-size:11px;color:gray;}
#lastfm_recent li span.lastfm_recent_artist a {padding:0;margin:0;font-size:11px;color:brown;}
#lastfm_recent li p {padding:0;margin:0;}
#lastfm_recent li p.lastfm_recent_image {padding:0px;margin:1px 1px;}
#lastfm_recent li p.lastfm_recent_image a {border:0px;}
#lastfm_recent li p.lastfm_recent_image img {padding:0px;margin:0px;width:50px !important;height:50px;border:0px !important;}
.lastfm_recent_recent {background:#eef !important;border:1px solid #eee !important;}
.lastfm-recent-left {float:left;}
.lastfm-recent-left img {margin-right:3px !important}
.lastfm-recent-right {float:right;}
.lastfm_recent_realname {font-size:12px;}
.lastfm_recent_logo {width:62px;height:24px;margin:0;padding:0;padding-right:3px;}
#lastfm_recent_userbadge {padding:0 5px 5px;margin:0;margin-bottom:10px;display:block;font-size:11px;}
#lastfm_user_image {width:80px;height:80px;margin:0,padding:0;}
#lastfm_recent_userbadge img {padding:0;border-color:white;}
.lastfm_badge_content {float:right;margin:0;padding:0;padding-left:3px;width:57%;}
これで少しすっきりしましたよ。
Loading ...
(No Ratings Yet)
ヨッシー on 7月 8th, 2008
携帯から書いてみます。
確か、cssは最後に読み込んだプロパティが優先されるようになってたかと・・・
hamasaku on 7月 8th, 2008
調べたところによると、セレクタとかクラス毎に重みがついていて、重みの合計で優先順位が変わるらしいです。
優先順位が同じ場合は、後から読み込まれたCSSが適用されます。
●CSS解説 -カスケード (The cascade)-
http://anslasax.net/css-make/cascade.html