Showing posts with label music. Show all posts
Showing posts with label music. Show all posts

2/21/2013

ブラコチェビッチとポール・ギルバートが似ている件

軽い話題を。

ワクフバンク(バレーボール・トルコリーグ)のブラコチェビッチと、世界屈指のギタリスト、ポール・ギルバートがよく似ている...。

ブラコチェビッチ
ポール・ギルバート

11/26/2010

MySpace が使いづらくなった件について

先日、MySpace のユーザーページがリニューアルされた。しかし、とても使いづらくなってしまった。あまりにもそういう点が多いので、纏めてみる。

1) Twitter や Facebook を意識し過ぎて、逆に見づらくなった HOME 画面

MySpace が SNS である以上、コミュニケーションツールとして、他のユーザーの動向を見られる場所があるのは当然だと思うけど、それのエリアが広過ぎる。例えば Twitter や Facebook はこういうエリアは 1 列だけなのに対して、MySpace では 2 列もあり、視界に入り過ぎて逆に煩雑感があるように思う。

#これはこの近況エリアの左上にアイコンがあり、それを押すことで解消できた。

2) ブログの閲覧数や Kudo が消えた

ブログの管理画面では、自分のエントリーがトータルで、週で、当日で、どれくらい閲覧されたかが表示されていたのに、これがなくなっている。さらに、Facebook の like に当たる「Kudo」もなくなっており、どれくらい押されたかも判らないし、押すこともできなくなっている。なんか、残念な感じだ。

3) アップロードした曲の場所移動ができない

これはブラウザのせいかもしれないが(それでも Safari / Chrome / Firefox / Opera で試した)、曲の移動ができそうなインターフェイスなのに、曲をドラッグできるのに、ドロップできない。なんじゃこれ。

#「Public Songs」にしたらドロップできることが判った。。。つーかなんで「All Songs」でドロップできんのじゃ?

4) フレンド管理での AtoZ がなくなった

フレンド管理の画面では、A から Z まで(その他、記号とかも)のリンクがあり、例えば W を押すと、W から始まるフレンドに絞り込むことができたけど、このリンクがないので、絞り込めない。F から始まったけど、名前なんだっけって時に使えたんだけど。。。

5) フレンド管理でのカテゴリがなくなった

これが個人的には一番痛い。私は自分の曲をアップしたときにお知らせするフレンドを集めたカテゴリと、ただたまに挨拶を書きに行くフレンドを集めたカテゴリを作成して、そういう場面になったら活用していたけど、それが完全にできなくなってる。さっきは久しぶりに挨拶回りをしたけど、この機能がなくなっていたから、一つ一つブラウザのブックマークに突っ込みながらやっていった。かなりめんどくさい。

#HOME 画面にはセレクトボックスみたいな UI のところにカテゴリのリンクがあったけど、
#それを押したからと言って、カテゴリ内のフレンドを一覧で出してくれるわけではない。


もちろんリニューアルって大事なことだと思うけど、ここまで機能が削られると正直ヘコむわ。。。なんでこうなったんだろ。次回のリニューアルでは「使いやすく」なってほしいな。

11/19/2010

Safari/Chrome Extension "hideMySpaceAds" を公開してみた

先日、MySpace のユーザーが使用する画面がリニューアルされたけど、普段チェックする「Artist Dashboard」が下の方に追いやられてしまい、確認するのにスクロールが必要になってしまった。。。さらに、左上の「my[___]」ってロゴにカーソルをあわせると、アニメーションが始まるという遊び心も用意してくれてるけど、こんな感じで広告が邪魔。
MySpace の広告が邪魔

別にアニメーションが隠れるのは大した問題じゃないけど、広告を消す機能拡張を作ってみた。これで「Artist Dashboard」がだいぶ上に来る。

hideMySpaceAds

hideMySpaceAds

良かったら、下記からどうぞ。

Chrome:
hideMySpaceAds - Google Chrome 拡張機能ギャラリー
Safari:
hideMySpaceAds | Prime Design Works | Webサイト制作・開発 | 京都市内・京都府

9/30/2010

マイク・ポートノイの DREAM THEATER 脱退の件について

Mike Portnoy leaves Dream Theater (Press Release) - Mike Portnoy's MySpace Blog

DREAM THEATER をこよなく愛する身としては、このことに対してなにも触れずにおくことはできない。先日、MySpace 上にて本件を知ったんだけど、あんまり MySpace の他人のブログを読まない身としては、発表日から遅れて知った有様だった。その時点より前に、Versaiiles のドラマー YUKI のブログ(改行が多いのは日本語文として非常に違和感があるから、なんとかしてほしい)で「マイクさんの件」とされている一文を見て、なにか判らなかったけど、なにが起こったかを知るとさすがに「マイクさんの件」の意味を理解できた。

マイクは DREAM THEATER のリーダーであり、そもそも DREAM THEATER というバンド名はそもそもマイクの父親が付けたもので、彼も今回のメッセージでは冒頭に「今まで考えたこともなかったようなことを言わなければならない」としている。

彼を含めたメンバーでヴォーカル以外は全て音楽学校を卒業しており、複雑な音楽構成ではあるけど緻密な計算によって流れるような展開を実現している。この点に私は昔からとても魅力を感じており、尊敬をしていた。ただ、ここ 2 作で言えば、マイクの好みによりラップを少しだけ入れていることからも、他のメンバーとの方向性の差異が表面化しているように感じていた。脱退については非常に驚き、落胆したけど、そう考えると仕方なかったのかもしれない。

それよりも、DREAM THEATER の骨格を成すマイクの後を埋められるドラマーを探せるのかどうかが少し不安だ。Burrn の広瀬和生は、新しいドラマーに「雇われか?」という、かつてのジェイムズ・ラブリエ(Vo.)に向けた幼い質問をするのだろうか。

9/17/2010

Ben Johnson というミュージシャン

この前 YouTube を徘徊してるときに、初めて Ben Johnson というミュージシャンを認識した。以前にも一度聞いたことがあった気がするけど、「走る人と同じ名前ね」と思って大して気にしていなかった。

ところが、私が YouTube 内に Bach の BWV1043 をギターで弾いてる人がいないかなと思って見ている内に、彼の動画を目にした。圧巻とも言えるプレイだが、特筆すべきは、この BWV1043 は「2 つのヴァイオリンのための」という題が付けられているが、その 1 本をギターで、もう 1 本をキーボードで弾いているのである。同じ Ben Johnson 自身が。どちらも素晴らしいプレイだった。彼のウェブサイトによると、初めはピアノを習っていて、そのあとギターを弾けるようになったという。ギターの音のセンスや左手の動かし方(オーディエンスに対する魅せ方)も私の好みに合い、ギターを後付けで学習したようには到底思えない。もちろん、この BWV1043 をチョイスした時点で Bravo なんだけど。

百聞は一見に如かず。
Ben Johnson - "Double" Concerto in Dm by J.S. Bach, BWV 1043, 1. Vivace
BenJohnson. NET - Home

9/10/2010

iTunes で同じアルバムなのに 1 つにまとめられない問題の解決法

以前から気にはなっていたけど、何故だかよく判らなかったので放置していたこの問題。友人も同じことを言っていたので、結構同じ問題を抱えている人はいるんだろうなぁと思っていたけど、放置していた。で、ふと思って検索してみると、アップルのサポートに載っていた。

同じアルバムアートの曲がひとつにまとめれない理由

正式のサポートページなのに、タイトルで「ら」抜きとは如何なものかと思ったが、(今見たらタイトル直ってました)とりあえず記事を読んでみた。このページに書いてある原因は以下の 3 種類。

  1. アルバム名が少し異なる
  2. アルバムに収録されている曲のアーティストが異なる
  3. アルバムに収録されている曲の「アルバムアーティスト」が異なる


1. と 2. は記事に書いてあるようなことはない。今では CD を挿し込むと情報を書き込んでくれるけど、昔の iTunes ではそんな便利なことをしてくれなかった。しかし CD から取り込んだ後に 1 曲だけ情報を入力して、あとは曲名だけ完全に入力し、残りの部分はサジェストで表示されるものを使っているから、間違う訳がない。3. に至っては、「アルバムアーティスト」という項目を使っていないので、全部空欄。

ということで、記事の最後に書いてある方法をやってみる。「コンピレーション」にチェックを付けるというもの。ただ、これをすると iTunes の「カラムブラウザ」欄の「アーティスト」に「コンビレーション」という謎の「アーティスト」ができてしまい、美しくない。しかし今回は「同じアルバムなのに 1 つにまとめられないという問題を解決する」という目的なので、コンビレーションを「はい」にしてみた。手順は以下の通り。

  1. 本来同じアルバムとして登録される筈の曲を全部選択する
  2. Command キーと i キーの同時押し、もしくは右クリックの「情報を見る」、もしくはメニューバーの「ファイル」から「情報を見る」を選択する
  3. 「複数項目の情報」という画面が表示されるので、「オプション」タブをクリックする
  4. 「コンビレーションの一部」の右にあるセレクトボックスを「はい」にして、「OK」をクリックする


これで確かに 1 つにまとまったけど、やっぱり「コンビレーション」という謎のアーティストができてしまう。そこで、上記の操作をもう一度やり、最後の「コンビレーションの一部」右のセレクトボックスを「いいえ」に戻す。すると、謎の「コンビレーション」というアーティストは消えるが、アルバムは 1 つにまとめられたままの状態で残る。これで美しくまとめられた。

7/23/2010

「ギタリスト」という定義

もうここ何年も、コードをかき鳴らすだけで「ギタリスト」とか自称してる人が多過ぎるように感じる。例えば、コードを押さえて音を出すだけの人を「ピアニスト」と呼ぶだろうか。やはり楽器でメロディーを奏でることができてこそ、ギタリストやらピアニストやらを自称できると個人的には思う。だって、それだけで自称できるなら、巷に溢れ返ってしまう。今は正に「ギタリストのインフレーション現象」となっている気がする。

私もギターは所有しているが、ただ興味があってちょろっとやっただけなので、自称なんてしないし、自分で「ギタリスト」だと思ったことは一度もない。「楽器はなにかできますか?」という問いは今まで生きていて何回かあるけど、「ピアノです」と答えている。「ギターは弾けますか?」と訊かれても、「持ってはいますが、ロクに弾けません」と言ってきた。駅でたまにみかける路上の人なんて、大概ギターを持っている。そして、大概コードをかき鳴らすだけ。メロディーとコードなんて音楽的な魅力はほとんどない。遭遇したこっちが恥ずかしいわ。まぁメロディーがある分、ヒップホップよりマシだけど。

ちなみに、こういう人をギタリストと呼ぶんだと思う。
YouTube - Destiny - Kelly SIMONZ
YouTube - Yngwie Malmsteen Acoustic Guitar Solo

6/08/2010

[MySpace のデザインを変更する:第十一回] MySpace に Google Analytics を適用する

MySpace に Google Analytics を利用できないかと思って調べたところ、紹介しているブログを発見した。MySpace ではコメントタグやら ID 指定に使うシャープや Javascript も認識しない。だから Google Analytics を利用したくても、これが Javascript なので無理だと思ってやらないでいたが、Flash を使えばなんとかできるみたい。

Google Analytics for Myspace

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
上記のブログから抜粋すると、下記を挿入すればいいらしい。
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" height="1" width="1">
<param name="movie" value="http://www.edzis.com/random/myspaceGA.swf?account=UA-XXXXXXXX-Y" />
<param name="bgcolor" value="080808" />
<embed type="application/x-shockwave-flash" src="http://www.edzis.com/random/myspaceGA.swf?account=UA-XXXXXXXX-Y" height="1" width="1" bgcolor="080808" />
</object>


さて、実際に稼働させるには赤字のところを自身の認識番号に変える必要が勿論ある。Google Analytics にサインインし、「Analytics 設定」ページで MySpace ページのプロファイルを新規作成し、作成後に現れた「UA-」で始まる認識番号を赤字のところと差し替え、MySpace ページに埋め込む。それだけでできる。

この Analytics を MySpace ページで表示させたくない場合は、上記ソースを <div> 等でくくり、ID を付け、その ID に対して display: none !important; を設定する。まぁ width / height 共に 1px なので目立つことはないけど、私が実際に記述したものは下記の通り。
div[id="GA"] {display: none !important;}
<div id="GA">上記のソース</div>


やってうまくいったら、このブログにコメントを書いてあげると、たぶんこのブログの人は喜びます。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

6/06/2010

朝鮮人のヴォーカリスト

昨日、西九条ブランニューで行われた METAL SESSION VOL.34 に行ってきた。友人のバンドが出演するため、誘われて行ったのだが 10 年ぶりくらいに行ったので非常に懐かしかった。

この日は 8 バンドが出演したのだが、6 番目に出たバンドのヴォーカリストが朝鮮人だった。別に歌って盛り上げていればここに書くことはなかったが、余りにも厚かましいので書くことにした。

まず、日本語が結構ペラペラなのだが、これはこれで凄いと思う。大嫌いな日本の言葉を覚えて使っているし、なによりバイリンガルというのは正直凄いと思う。しかしだ。これだけペラペラなのに「今日のためにわざわざ覚えた」とか連呼し、それを真に受ける客層への同乗アピール。うるさいほど連呼された。

さらに、メンバー紹介は後回しでまずは自己紹介。まぁ上述の連呼はこの時に起こったのだが、自分の名前をこれまた連呼していた。もちろん私はそんなもん覚える気はサラサラなかったので、今となっては幸運にも覚えていないが、客に名前の大合唱を要求していた。今までいくつもライヴやライヴ映像を観てきたが、自分の名前を連呼させるヴォーカリストはいなかった。正直、虫酸が走った瞬間だった。

さらにさらに、「辛ラーメンを食べたことある人!?」と客に問いかける。バンドとなんか関係あるのか、それ。バンドならバンドの宣伝とか音楽に対する想いだとか言うことあると思うが、関係あるのか、それ。そこで数名が挙手すると「君たちは愛される」と訳の判らないことを言う。もう南朝鮮の工作員としか思えない発言だらけだ。反日なのに親日ぶって興味を向けようとする。これを工作員と言わずになんと言う。もし本当に親日なら「日本が好きだ」「ずっと住んでいたい」「できれば帰化したい」とか言う筈。ちなみに私は辛ラーメンなど当然口に入れるわけはないのだが、昔 Samsung に出向していた際、このラーメンでとてつもない臭いを発している現場にはほぼ毎日遭遇していた。お前らそんなにそれが好きなのかと思うほど、多くの朝鮮人がそれを食べていた。オフィス一体がそれでかなりキツいことになっていた。そんな嫌な思い出が辛ラーメンにはある。

友人のバンドが出演したという嬉しさも、一瞬でかき消されるような MC だった。このバンドは他の人が上手かっただけに、残念でならない。

また、この日はゲストとしてメキシコのバンドも来ていたのだが、彼らはミュージシャン然としていた。「日本でプレイできて嬉しい」「盛り上がっていこうぜ」「ありがとう!」とかまぁ普通と言えば普通の、でもやっぱり、「ここでプレイできることを喜んでいる」というのが伝わってきた。いくつか日本語を話してはいたが、「今日のためにわざわざ覚えた」なんてもちろん言わなかった。

6/04/2010

J.S.Bach の天才たる所以

J.S.Bach は私にとって神に等しい存在に思っている。音楽という芸術を恐ろしい程の高みで完成させているからだけど、その神ほどに天才と思う事象をひとつ挙げてみる。

五線譜で見かけるシャープ記号、#。これはドイツ語では十字架をも意味する。おそらく # の形が似ているからだと思うけど、実際、ドイツ語の音楽用語のシャープは「Kreuz」となり、十字架も「Kreuz」となる。

さて、Bach は、曲で唯一神を表す手段として、このシャープを五線譜の一番上の線に一つだけ書いたホ短調を用いたと言われている。はっきり言って下世話な表現となるが、そんなことまで気にして作曲している人が現代いるだろうか。ひとつひとつの音符はもちろんのこと、五線譜上の見た目でも表現するなんて、そうそうできることではないと思う。私もそのような高みに昇りたいとは思うが、Bach の足の爪の垢にも遠く及ばない。

あと、よく長調は明るい音楽で短調は暗い音楽と思われるが、Bach は違った。確かに短調で哀しみを表現することもあるが、基本的に長調は喜びを、短調は祈りを表していたと思う。そしてそれに見合った音符をつけ、芸術性が極めて高い音楽へと昇華させている。

あらゆる観点で音楽で世界観や宗教観を表していた、Bach は天才だと思うし、神だと思う。

6/02/2010

聖バフォ教会のオルガン

私の音楽の好みを知る人(数少ないが)は、どれだけオルガンの音色にこだわりを持ち、愛しているかを知っている。その中でも前になんかの放送でやっていた、オランダの聖バフォ教会のオルガンが言葉に表せない程好きだ。
オルガンのの音色は、普通は眠くなる音として認識されるかもしれないが、視点を変えれば、これほど神々しい音はないと思う。これには私が幼少の頃より J.S.Bach を好み、ミッションスクールに通っていたのでキリスト教的文化に傾倒していることも大きな要因だとは思うし、他の宗教を信じている人にとっては、神々しいとは思えないかもしれない。ただ、私にとっては、オルガンの包まれるような、それでいて威厳があり、無限の広がりを感じる、この音を愛してやまない。
聖バフォ教会の他にも、デンマークのイエスボー教会のオルガンもかなり好み。それと、年に 1〜2 回オルガンコンサートを聴きに行く、京都コンサートホールのオルガンもまた素晴らしい。YouTube にそれらしき動画がなかったので下記には列挙していないので、興味ある人は是非一度足を運んでみては如何だろうか。京都コンサートホールの屋根を見れば、どれだけ音響にこだわったホールの設計をしているかがよく判ると思う。

◆聖バフォ教会のオルガン(オランダ)
Bach Chorale Prelude at St. Bavo

◆イエスボー教会のオルガン(デンマーク)
J.S. Bach: Prelude and Fugue in B minor BWV 544 (K. Richter)/1

5/18/2010

Ronnie James Dio Passes Away at 67

Twitter / Mike Portnoy: RIP Ronnie James Dio...one ...

17 日の明け方、私の大好物のバンドである DREAM THEATER のドラマー、Mike Portnoy の tweet が twitter のホーム画面に流れてきた。先頭に RIP (Requiescat in Pace もしくは Rest in Peace) と書かれていた。まさかと思ったが、日中には色々な記事で取り沙汰されていた。。。

私は彼の歌声を正直、声や曲調が私の好みと少し違うというのもあるが、あまり聴いたことがない。しかし、偉大なことは知っている。もちろん「大御所」と呼ばれるに相応しい活躍をされていたことも知っている。非常に残念。

おそらく、彼は現世での活動をやり切ったんだと思う。もう今は天国のステージできっと歌っていることだろう。

5/12/2010

Logic Express であるパート全体のスコアを表示させたい

私の音楽の作業は Apple の Logic Express でやっているのだが、今回ヴォーカルに歌ってもらうために全体のスコアを表示したいと思っていた。しかし、選択したリージョンのスコアは表示させられるのだが、全体のスコアを表示できないでいた。

ちなみにスコアの表示の仕方は下記の通り。
  1. 「ウィンドウ」->「スコア」もしくは「command + 3」でスコアウィンドウを表示

  2. スコアウィンドウ内の「表示」->「ページビュー」もしくは「control + p」もしくは「スコアウィンドウ内左上のアイコン類の一番右」


さて、色々と触っている内に望み通り、全体のスコアを表示できた。
スコアウィンドウ内左上のアイコン類の一番左(矢印のやつ)をクリック!


これで滞りなく作業ができる、、、が、明日はクライアントの事務所で DTP の作業、、、早く寝ないと。

5/01/2010

[MySpace のデザインを変更する:第十回] 「フレンドコメント」のデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
「フレンドコメント」部分で、各コメントの間に破線の白い区切り線を入れ、コメント部分をメインコンテンツ部分の幅いっぱいに表示したい場合はこんな感じ。
<style>
.friendsComments, .friendsComments table {
width: 100% !important;
}
.friendsComments table table td {
border-bottom: 1px dashed rgb(255, 255, 255) !important;
}
.columnsWidening {
width: 650px;
max-width: 650px;
margin-left: 20px;
}
</style>


まず、.friendsComments, .friendsComments table でコメント部分の領域を広げる。これをしないと Firefox と Opera で幅いっぱいに広がらない。
次に .friendsComments table table td で各コメントの下に破線を引くよう指定する。
最後に、.columnsWidening で幅を 650px に指定する。まぁ私のページの大きさに併せているので、width の数値は各々違うと思う。また、max-width で width と同じ数値を指定しないと、WebKit 系ブラウザ Safari と Chrome でコメント部分の幅が異常に広がってしまう。これは長い URL を入れられた場合に改行できないために起こる現象を防ぐ。で、コメントした人の画像とコメントが近過ぎるので、margin-left で少し調整する。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する:第九回] 「コンタクトメニュー」のデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
「コンタクトメニュー」部分に独自の画像を使用し、「コンタクトメニュー」の文字を消す場合はこんな感じ。
<style>
.contactTable {
background:url("http://www.primedesignworks.com/myspace/contactTableBG.png") center center no-repeat;
}
.contactTable a img {visibility: hidden;}
.contactTable .whitetext12 {display:none;}
</style>


まず、.contactTable に背景として新しい画像を設定する。
次に .contactTable a img で「メッセージを送る」等の画像を非表示にする。新しい画像を貼るにはいいが、リンクを設定するのはめんどくさいので、既に「メッセージを送る」等の画像に貼られているリンクを活かすためにも、画像は display: none; で消してしまうのではなく、visibility: hidden; を使う。これなら画像の領域を活かせるので、リンクの場所を押さえるように画像を作れば良い。
最後に .contactTable .whitetext12 で「コンタクトメニュー」の文字を消す。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

4/30/2010

[MySpace のデザインを変更する:第八回] 「ランキング」「ライブ」「掲示板」のデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
「ランキング」「ライブ」「掲示板」のある部分の背景を黒の透明度 70%、リンクテキストの色が青、hover 時の色を赤に設定する場合はこんな感じ。
<style>
table[id="musicJVNav"] .subnavItems {
background-color: transparent !important;
}
table[id="musicJVNav"] {
background: rgba(0, 0, 0, .7) !important;
}
table[id="musicJVNav"] a:link, table[id="musicJVNav"] a:visited {
color: rgb(0, 102, 255) !important;
}
table[id="musicJVNav"] a:active, table[id="musicJVNav"] a:hover {
color: rgb(255, 0, 0) !important;
}
</style>


まず table[id="musicJVNav"] .subnavItems でMySpace 側で設定している背景を消す。
次に table[id="musicJVNav"] でこの部分の背景を設定する。
あとは文字色の設定を記述する。
ちなみに「music」って画像は透過画像ではないので、残念ながら変更はできない模様。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する:第七回] メニューバーのデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
バーの背景を黒の透明度 70%、枠線が黒、せせり出てくるメニューの背景を白の透明度 80%、マウスが重なった際にはさらに白くする感じだとこんな具合で。
<style>
div[id="topnav"] {
background: rgba(0, 0, 0, .7);
}
div[id="topnav"] ul, div[id="subnav"] ul {
border: 1px solid rgb(0, 0, 0) !important;
border-top: none;
background-color: transparent !important;
}
div[id="topnav"] ul li, div[id="subnav"] ul li {
border-bottom: 1px solid rgb(0, 0, 0) !important;
}
div[id="subnav"] li {
background: rgba(255, 255, 255, .8);
}
div[id="subnav"] li a {
width: 140px !important;
}
div[id="topnav"] ul li a:link, div[id="topnav"] ul li a:visited,
div[id="subnav"] ul li a:link, div[id="subnav"] ul li a:visited
{
color: rgb(0, 102, 255) !important;
background: none !important;
}
div[id="topnav"] ul li a:active, div[id="topnav"] ul li a:hover,
div[id="subnav"] ul li a:active, div[id="subnav"] ul li a:hover
{
background-color: transparent !important;
background: rgba(255, 255, 255, .8) !important;
color: rgb(255, 0, 0) !important;
}
</style>


結構色々と設定しなければならなかった。
まず div[id="topnav"] でメニューバーの背景を変える。
次に、div[id="topnav"] ul, div[id="subnav"] ul の背景を透過させ、黒の枠を付ける。MySpace 側ではこの部分の border-top を none にしているので、それに従う。この場合、border で枠全体を指定し、border-top で none にする方が短くて済むのでこうしてある。
加えて、div[id="topnav"] ul li, div[id="subnav"] ul li でborder-bottom を指定し、メニュー項目の分割線を決める。
続けて div[id="subnav"] li で、せせり出てくるメニュー項目の背景を変える。
さて、div[id="subnav"] li a の幅を 140px で定義しているのは、なにも定義しないとメニュー項目の右側に僅かな余白ができているので、それを潰す目的で設定してある。
最後はメニューの文字色を定義しているものの、肝心のせせり出てくるメニュー項目の文字色は MySpace 側で !important 指定がされているので変えられず、メニューバーにマウスが重なったときの文字色しか変更できなかった。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する:第六回] 検索ボックスのデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法(入力スペース)
背景を黒の透明度 50%、枠線は青だとこんな感じ。
<style>
form[id="formSearch_Header"] .srchfieldLayer {
background: rgba(0, 0, 0, 0.5);
background-color: transparent !important;
border: 1px solid rgb(0, 102, 255);}
</style>


background を使う場合は、background-color に !important を記述しないと反映されない。また、入力ボックスの背景や文字色は MySpace 側で !important が付いているために、残念ながら変更できない。

★変更方法(検索ボタン)
背景を黒の透明度 70%、枠線は青だとこんな感じ。
<style>
input[id="submit_Header"] {
background: rgba(0, 0, 0, .7) !important;
border: 1px solid rgb(0, 102, 255) !important;
}
</style>


background も border も !important を付けないと反映されない。

★変更方法(「MySpace」を押したときに出るドロップダウンメニュー)
平常時は黒の透明度 20% を背景に持ち、hover 時にベタ黒の背景になるようにするにはこんな感じ。
<style>
div[id="srchMenuListBox_Header"] li {
background: none !important;
padding: 0px !important;
}
div[id="srchMenuListBox_Header"] li a {
background: rgba(0, 0, 0, 0.2) !important;
display: block !important;
padding: 2px 5px 2px;
}
div[id="srchMenuListBox_Header"] li a:hover {
background: rgb(0, 0, 100) !important;
}
</style>


まず、div[id="srchMenuListBox_Header"] li で MySpace 側で設定している背景を消し、余白を消している。ここでいぢっている li の中にある a は背景が設定可能だが、li 自身はまた変えられないので、li の部分を見せないために、余白は消さないといけない。
次に div[id="srchMenuListBox_Header"] li a でメニューの背景等を設定する。display: block; でブロック要素にし、padding を有効にする。これをしないと左右が余りにも詰まった感じがして息苦しい。
最後に div[id="srchMenuListBox_Header"] li a:hover で背景色を設定する。

残念ながら文字色は !important 設定がなされているために変更できない。

★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する:第五回] 「About」「フレンド一覧」「フレンドコメント」のデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
幅 390px、テキストの先頭にアイコン(20px 20px)を付け、padding でアイコンなどとの余白を確保し、白い破線を下に引く場合はこんな感じ。
<style>
.orangetext15 {
width: 390px;
display: block;
background:url(背景画像の URL) left bottom no-repeat;
border-bottom: 1px dashed rgb(255, 255, 255);
padding-left: 25px;
padding-right: 10px;
padding-bottom: 2px;
}
</style>


「フレンドコメント」の部分は、「About」や「フレンド一覧」と幅が違うので、これだけ適用させたいものがある場合は下記を併せて記述する。
.friendsComments .orangetext15 {
長さなど;
}


★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads

[MySpace のデザインを変更する:第四回] アーティスト名のデザインを変更する

★変更を記述するページ
ホーム > プロフィール変更 もしくは デザイン変更 > アーティスト詳細の「バイオグラフィー」の「編集」
Profile > Edit Profile or Customize Profile > Musician Detail > Musician Bio > Edit


★変更方法
テキストの先頭にアイコン(20px 20px)を付け、padding でアイコンなどとの余白を確保する場合はこんな感じ。
<style>
.nametext {
background:url("http://www.primedesignworks.com/myspace/icon2.png") left bottom no-repeat;
display: block;
padding-left: 30px;
padding-bottom: 5px;
}
</style>


★確認環境
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

★サンプル画面
WINGS OF FALLEN ANGEL on MySpace Music - Free Streaming MP3s, Pictures & Music Downloads