Bill is a funny painter.

スティッカム「プロフ」のカスタマイズ

あらかじめ用意された『サイトテンプレート』に飽き足らない方の為の
『プロフ』カスタマイズの仕方解説 ： （ﾒｯｾｰｼﾞ編集・番外編）

このページでは、CSSの編集以外のHTMLを使った「メッセージ編集」絡みの記事を載せます。

番外編（メッセージの編集）

YouTubeの貼り付け方と枠の表示

    
上の画像はプロフのイメージです。
青と緑の枠に囲まれたYouTubeの貼り付け画面がメッセージ欄に表示されています。

下記にそのプロフのメッセージの「青枠」のYouTube貼り付けコードをコピーいたしました。

上記のコードをコピーして、プロフィールメッセージ編集画面に貼り付けると同じように反映されます。
<embed src="http://www.youtube.com/〜">の行の""内をお好みの映像のアドレスに書き換えれば使えると思います。
ただ、ノーマルなYouTubeのコードを貼り付けるより、枠がつくと多少見栄えがすると思いませんか？
是非お試しください。



以下は、HTMLコードの解説です。（貼り付けコードの箇所のみ）

貼り付けコードの入手・編集の手順

1.まずYouTubeのサイトで「お好みの映像」のページより、右上「埋め込み」にある、コードを丸ごとコピーします。

2.とりあえず編集画面に貼り付けたあと、その中の<embed src=http://www.youtube.com/〜>より前のコードは
  必要ないので削除します。 下は、必要のない部分を削除したコードです。
<embed src="http://www.youtube.com/v/dALKDBXj9rk&hl=ja&fs=1&color1=0x006699&color2=0x54abd6&border=1" type="application/x-shockwave-flash" width="230" height="190"></embed>
この部分のアンダーラインの部分は「青色」の枠の設定です。

この&color1=0x006699&color2=0x54abd6&border=1"の、x以降の数字は色コードを表しています。
&color1=0x006699に書かれている006699を変えることにより枠の色が変わります。
&color2=0x54abd6に書かれている54abd6は操作部の色とグラデーションに関係しています。
&border=1に書かれている 1 は、枠の幅に関係しています。（枠が不要の場合は0を入力して下さい。）
例えば色コードを&color1=0x00CC00&color2=0x33FF00&border=1"に入れ替えると「緑色」の枠が表示されます。
注意：枠の色がすべての色コードに対応しているかは不明です。

色コード設定は、http://www.tohoho-web.com/wwwcolor.htmこのページを参考にしてください。
ただし入力時は#を抜いて下さい。

width="230" height="190"のwidthは横幅、heightは縦幅を表しています。
""内の数値を変えることで画面の大きさを変えることが出来ます。ただしアスペクト比には気を付けてください。
2008.10.24現在  YouTubeプレーヤーの表示変更があった模様です。枠をつけた場合、画面サイズは、 width="260" height="215"位に変更した方がよいでしょう。

ページのTopへ

番外編（メッセージの編集）

スティッカム「プロフ」でも使える！  MP3プレイヤーの貼り付け方法

    
上の画像はプロフのイメージです。
月の画像が貼られている枠内にMP3プレイヤー「Pickle Player」が表示されています。


こちらは、実際に動作するMP3プレイヤーのサンプルです。
（サンプルに入っている音源はお粗末ですが使ってみてください。）

★オリジナル音源1★ ドビュッシー作曲　月の光 Soft Theremin performed by "びる" ソフトテルミンは、マウスで操作します。 自分では全く納得のいかない演奏ですが、単なる余興としてお聴きください。 ★こちらも覗いてみてください。 「びる」のオリジナル音源集

びるのHPにも数種類設置している、Web上で動作するMP3プレイヤー  通称「WebPlayer」と呼ばれるそうですが、JavaScriptを使うため「スティッカムプロフ」では動作しないことが多いです。
またflashのswfファイルをアップロードしたりテキストで書かれたPlaylistのファイルを別に作る必要がありました。
そこで、手軽に使えるMP3プレイヤーは無いかと探していたところ、外国のサイトで見つけました。
今回紹介する「Pickle Player」は1曲のみの再生で音量の可変がソフト上では出来ませんが、簡単なコードを貼り付けるだけで利用することができます。

下記にそのプロフのメッセージのMP3プレイヤー「Pickle Player」貼り付けコードをコピーいたしました。

上記のコードをコピーして、プロフィールメッセージ編集画面に貼り付けると同じように反映されます。
URI=http://****.mp3&instantLoad=1"の行の=以降のアドレスをMP3ファイルのあるアドレスに書き換えれば使えると思います。

また、<img src="http://****.jpg">の行の=以降のアドレスを画像ファイルのあるアドレスに書き換えれば「別の画像」に置き換えることができます。
<td valign="top" bgcolor="#99ff99">の#以降の数字は色コードを表しています。数字を変えれば色の変更ができます。
是非お試しください。
（言わずもがな、手軽に使える音楽再生ツールですが、著作権にはくれぐれもご注意下さい。）



以下は、HTMLコードの解説です。（貼り付けコードの箇所のみ）

貼り付けコードの入手・編集の手順

1.本家のサイトPodcast Pickle HPでもコードを入手できます。

2.「MP3ファイルのアドレス」と「背景色のコード」と「プレイヤーのサイズ」を指定して「Get Your Free Single Episode Player!」をクリックすると表示されます。   とりあえず編集画面に貼り付けたあと、その中の<embed src=http://www.podcastpickle.com/〜>より前のコードは必要ないので削除します。
下は、必要のない部分を削除したコードです。
<embed src="http://www.podcastpickle.com/media/podPlayer/pcpp.swf?URI=http://****.mp3&instantLoad=1" quality="high" bgcolor="#000000" width="300" height="30" name="pcpp" align="middle" type="application/x-shockwave-flash" ></embed>
※<table>枠が不要の方は、上記のコードのみを貼り付けてください。
おそらく入手したコードには、最後の</embed>の後さらに</object>が付いていると思うので削除を忘れずに。

背景色のコードは黒(#000000)を使っています。
コード中にある bgcolor="#000000"の、#以降の数字は色コードを表しています。
色コードについては、YouTube貼り付けの章を参考にしてください。

色コード設定は、http://www.tohoho-web.com/wwwcolor.htmこのページを参考にしてください。

サンプルにある様に、MP3プレイヤーをHTMLの<table>タグを使って枠内に設置しました。
（何故か、「プロフ」では、background（背景画像）やbordercolor（罫線色）の指定ができないのですが・・・）
<table>タグについて、今回は解説いたしませんが「とほほのWWW入門」のページを参考にしてください。

ページのTopへ

お知らせ：びるのホームページ | CMS分室 - alternativeは、いろいろなコンテンツを用意しております。よかったら覗いてみてください。