とらんちょのブログ一覧

画像重なりテスト２

コメント付けてみた。

画像重なりテスト

ブログで音楽を鳴らす方法。

youtube をオートスタートさせてるだけなんでブログ内（日記）にそのままＵＰすれば
簡単に出来るのですが・・・

たとえばゲームのＹｓⅡのＢＧＭ　http://www.youtube.com/watch?v=YNiEKg95Vm8　を流す場合、

<embed src="http://www.youtube.com/v/YNiEKg95Vm8&autoplay=1" width=0 height=0>

で出来ます。
&autoplay=1　でオートスタート。　&autoplay=true　でもいいんですが文字数短縮で。
width=0 height=0　は youtube の非表示。
hidden=true でも非表示になるんですがブラウザによって対応してないことがあります。

だけどこのやり方だとそのブログのページを開いた時にしか鳴らせなくてプロフィールページや
愛車紹介などのぺージでは鳴りません。

ってことでヘッダーのタイトルに入れるという方法になります。

基本の embed タグは

<embed src="http://www.youtube.com/v/YNiEKg95Vm8&autoplay=1" width=0 height=0>

youtube のページのＵＲＬ
http://www.youtube.com/watch?v=YNiEKg95Vm8
の後ろの YNiEKg95Vm8 をタグ内に入れます。

タイトルを入れる場合は embed タグの前に

ひっそりと・・・<embed src="http://www.youtube.com/v/YNiEKg95Vm8&autoplay=1" width=0 height=0>

という感じに入れます。
タイトルは全角で９文字程度までしか入らないです。

動画を表示させたい場合は

<embed src="http://www.youtube.com/v/YNiEKg95Vm8&autoplay=1" width=470 height=290>

というふうに。
ちなみに曲名を 「お友達募集メッセージ」 の所に表示させてます。

↓　サンプル画像です。


さて、出来るかな？

サイドメニューに　「ユーザー内検索」　が追加されたのでそれの変更のやり方。


入力フォームの変え方

スタイルシート詳細編集の　［サイドメニュー］　に
「ユーザー検索ボックス　div#BodyBlockSide .searchBox」
が追加されたのでそこにそれぞれ追加を。

・縦幅変更
height:25px;

25px で幅指定。
横幅はブラウザによって変わってしまうので変更しないほうがいいです。

・入力文字色変更
color:black;

・ボックス内の色変更
background-color:skyblue;

・ボックスの枠色変更
border:solid 2px blue;

2px で枠の太さ
solid は枠の形式。
他に
dotted　dashed　groove　ridge　double　inset　outset
がありますが見た感じは solid がいいみたいです。

・ボックス内の画像背景
background:white url(http://carview- ～ .jpg) no-repeat;

黄色のアドレスで画像を。
画像を入れる場合は　「ボックス内の色変更」　は追加しないで
赤色の white で色変更。

画像を右寄せにする場合は　no-repeat　の後ろに　right　を追加。
～) no-repeat right;


色はカラー１、カラー２で参考にしてください。

※カラー１は Windows と Macintosh の共通の２１６色です。

---

検索ボタンの変え方

「ユーザー検索ボタン　div#BodyBlockSide .searchButton」　にそれぞれ追加を。

・縦幅変更
height:25px;

25px で幅指定。
入力フォームより 6 プラスぐらいがいいです。

・検索文字色変更
color:black;

・ボタンの色変更
background-color:skyblue;

・ボタンの枠色変更
border:solid 2px blue;

2px で枠の太さ
solid は枠の形式。
他に
dotted　dashed　groove　ridge　double　inset　outset
がありますが見た感じは solid がいいみたいです。


色はカラー１、カラー２で参考にしてください。

※カラー１は Windows と Macintosh の共通の２１６色です。

画像ポップアップテスト