Daily life record scribble !!

Last.fmの最近聴いたトラックを表示するWordPressプラグイン:Last.fm RPSを導入してみた

by
4 Comments

Posted in Plugin

自宅では、音楽を聴きながらネットサーフィンをする事が多く、自分聴いている曲は、IMの表示メッセージに表示する様にしているよ。でも、それだけじゃ物足りなくて、ブログのサイドバーにも表示出来たらとふと思いついてしまったので、今日は、それを実現する方法を探してました。

導入したのは、Last.fm RPSLast.fmの最近聴いた曲をサムネイル画像付きでサイドバーに表示してくれるプラグイン。導入はとても簡単。

  1. ダウンロードしたプラグインをwp-content/pluginディレクトリにアップ
  2. 管理画面の[プラグイン]から、Last.fm RPSをアクティブにする
  3. 管理画面の[デザイン]の[ウィジェット]で、サイドバーに表示する様に設定する

導入にあたり、少し困ったのは、デザイン面。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%;}

これで少しすっきりしましたよ。

Last.fmをサイドバーに表示する


  1. i3Themeの場合[]
  2. 今回はlastfm_recent[]

4 Responses

  1. ヨッシー says:

    携帯から書いてみます。
    確か、cssは最後に読み込んだプロパティが優先されるようになってたかと・・・

  2. hamasaku says:

    調べたところによると、セレクタとかクラス毎に重みがついていて、重みの合計で優先順位が変わるらしいです。

    優先順位が同じ場合は、後から読み込まれたCSSが適用されます。

    ●CSS解説 -カスケード (The cascade)-
    http://anslasax.net/css-make/cascade.html

  3. Pingback: 参考サイト | Lazy-planet

  4. Pingback: iTunesで再生した曲をブログ(wordpress)に表示する | memocon

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です