アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -89ページ目

アメばこアメンバー様に限定・・だってさ

≪緊急大募集≫
アメばこ限定★ピグ新エリア先行公開
アメばこアメンバー様限定!!
抽選で500名様!!
ピグ★新エリア
<動画配信エリア>
先行ご招待


まだアメばこのアメンバーになっていない方はお早めに~

http://ameblo.jp/morimori3/


アメばこはスタッフブログの中でもわたしたちに近い存在です

読者登録やアメンバーに是非・・・

記事に音楽を・・・

前に紹介したのはサイドバーに貼り付けるの・・
ブログに音楽を・・・・


今回は・・・YouTubeの音声を使ったシンプルプレイヤー
簡単に言えば・・ YouTubeの画像部分のないやつ?

じゃ~YouTubeでいいじゃん!

って~言っちゃったらおしまいなんですが・・・


記事で音楽とか紹介したい場合にいかがでしょう・・

Soundzit


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

Search for songs にキーワードを入れて検索します

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


検索で該当するYouTubeの一覧が・・・
YouTubeのタイトルですから・・検索キーワードとタイトルと内容が一致しているとは限りません

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

↑お目当てがあったらタイトル左の三角をクリック


↓四角にかわり・・右にプレーヤーが現れます・・・
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
プレーヤーの下にある 右矢印Export this song on your site/blog をクリック ↑


コードが表示されます(なぜか同じものが2つも?)
枠内でクリック・・反転させてから右クリックでコピー
アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!


コピーしたのが・・

<object width="300" height="30"><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed type="application/x-shockwave-flash" src="http://soundzit.net/player.swf" quality="high" allowfullscreen="false" allowscriptaccess="always" flashvars="file=http://www.youtube.com/watch?v=Gu_rsHZ9SqE&feature=youtube_gdata&skin=http://soundzit.net/skinout.swf&backcolor=#000000&lightcolor=#FF6600&frontcolor=#FFFFFF&abouttext=Go to Soundzit.com&aboutlink=http://soundzit.com" width="300" height="30"></embed></object>

必要なのは・・赤字部分だけです・・ height="30" の後ろの > も不要です

(A)

※注意
最後の > を使わない裏技的使用方法ですので
このプレイヤーより下にタグを使って文章を書くことは出来ません
(文字に色をつけたり、リンクを貼ったりはNG・・禁止タグで保存できません)



プレイヤの色を変更するには・・・(B)

<embed type="application/x-shockwave-flash" src="http://soundzit.net/player.swf" quality="high" allowfullscreen="false" allowscriptaccess="always" flashvars="file=http://www.youtube.com/watch?v=Gu_rsHZ9SqE&feature=youtube_gdata&skin=http://soundzit.net/skinout.swf&backcolor=#00cc66&lightcolor=#ff00cc&frontcolor=#0000ff&abouttext=Go to Soundzit.com&aboutlink=http://soundzit.com" width="300" height="30"


元のYouTubeの埋め込みコードは・・ (C)

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/Gu_rsHZ9SqE&hl=ja_JP&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Gu_rsHZ9SqE&hl=ja_JP&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>

つまり・・赤字部分さえわかれば・・サイトで検索して・・タグを・・行なわないでも
(B)の赤字部分を変更するだけでいつでもプレイヤが作れます・・



(A)・・赤字部分そのまま


(B)・・プレイヤの色を変更


同じものですがYouTubeだと・・・(C)




↓こちらは・・残念ながらブラウザーを選びます・・
FF以外ではBuffering...がいつまでも続いてスタートしないと思います・・


YouTubeとかからではなく音楽を検索して視聴やダウンロードができるサイトです
Booster http://www.boostermp3.com/ 
↑プレイヤの下にはタグが使えませんのでリンクを貼っていませんm(_ _)m
希望があれば記事にしますが・・・

性懲りもなく・・・

なんか・・

前にもこの記事タイトルを使った記憶がありますが・・


性懲りもなく・・・
アメブロに3度目の質問をしてしまいました・・・





すみません

過去の2回はまったく見当はずれの回答ですので3度目の質問になります・・


「CSS編集専用の画像のアップローダーがおかしい」という質問です
CSSの編集で何とかできる問題ではありません
アメブロ側の設定の問題なんです!


透過処理したPNG画像を画像フォルダにアップするときは問題ないのに
CSS編集専用の画像にアップすると透過でなくなってしまうんです
ナゼですか?
直す予定はありますか?
直さないのでしたら画像フォルダは透過処理OKで
CSS編集専用の画像はわざわざ透過処理NGにしている理由を教えてください



Ca et la *さえら* さまが実験してくださっています
PNG透過画像表示テスト
http://ameblo.jp/caetla-2008/entry-10496373936.html
どうなっているのかご確認下さい



宜しくお願いします





Ca et la *さえら* さま
ありがとうございます
そして
勝手に利用させていただいちゃいました
すみません m(_ _)m