| 2012 / 11 «« ■ »» |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
meaning of mark ::
nothing ,
comment
Pageview
Online Status
Profile
Menu
RSS & Atom Feed
Pickup Photo!
2009/12/02 :: YouTube をホームページに載せる方法!!
[YouTube] ブログ村キーワード
YouTube をホームページに載せる方法!!
今回ホームページにYouTubeの動画を載せたいと問い合わせがあったので
載せ方をメモしておきます!!
今回は携帯でまぁくんの店の雰囲気を撮影しました
画像が小さいのです
まず、撮影した動画をYouTubeに登録します
今回の動画のアドレス
マイページで動画を確認します
動画の画像をクリックします
!!$photo1!!
クリックすると動画の詳細ページに移動します
!!$photo2!!
右側にある埋め込みの欄にあるタグをコピーしてホームページに貼り付けます
カスタマイズしてみる
埋め込みの文字をクリックすると
!!$photo3!!
上記のように大きさが選べるようになります
その他の方法は
コピーしたタグの中身を直接変更します
変更箇所はwidth="425" height="344"を2箇所変更します
参考比率
【横幅180】
320×265 ⇒ 180×150
480×295 ⇒ 180×110
【横幅200】
320×265 ⇒ 200×165
480×295 ⇒ 200×122
【横幅250】
320×265 ⇒ 250×207
480×295 ⇒ 250×153
今回は320×265 ⇒ 180×150に変更しました
清き一票をお願いします
別ウインドウで開きます!!
下記はまぁくんの店の情報です
記す
!!$more!!
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)
雑貨 格安 低価格 販売 新商品なんでも雑貨サイト商品検索
こどもの本なんでもデジモン屋雑貨屋2茶道日記
[YouTube] ブログ村キーワード
YouTube をホームページに載せる方法!!
今回ホームページにYouTubeの動画を載せたいと問い合わせがあったので
載せ方をメモしておきます!!
今回は携帯でまぁくんの店の雰囲気を撮影しました
画像が小さいのです
まず、撮影した動画をYouTubeに登録します
今回の動画のアドレス
マイページで動画を確認します
動画の画像をクリックします
!!$photo1!!
クリックすると動画の詳細ページに移動します
!!$photo2!!
右側にある埋め込みの欄にあるタグをコピーしてホームページに貼り付けます
カスタマイズしてみる
埋め込みの文字をクリックすると
!!$photo3!!
上記のように大きさが選べるようになります
その他の方法は
コピーしたタグの中身を直接変更します
変更箇所はwidth="425" height="344"を2箇所変更します
参考比率
【横幅180】
320×265 ⇒ 180×150
480×295 ⇒ 180×110
【横幅200】
320×265 ⇒ 200×165
480×295 ⇒ 200×122
【横幅250】
320×265 ⇒ 250×207
480×295 ⇒ 250×153
今回は320×265 ⇒ 180×150に変更しました
清き一票をお願いします
別ウインドウで開きます!!
下記はまぁくんの店の情報です
記す
!!$more!!
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)
雑貨 格安 低価格 販売 新商品なんでも雑貨サイト商品検索
こどもの本なんでもデジモン屋雑貨屋2茶道日記
all photo
Recent Diary
ホームページ作成 寝屋川市new!
Recent Comments
2009/06/27
ロールオーバーの仕方
[ロールオーバー] ブログ村キーワード
rollover.jsを使ったロールオーバー
特に設置が難しくなくソースもきれいです
まずrollover.jsをダウンロードしてきてサイトのjsフォルダーに保存します
ロールオーバーしたいページの
を足します
ロールオーバーしたい画像(123.gif)のクラスをimgoverにして下さい
他にページがない場合は#を指定します
#(ヌルリンク)はジャンプはしないけどページの先頭に飛びます
リンク先に#を使うのはjavascriptを試す時に良く使われます
今回は
クラスが複数ある場合は半角スペースを入れます
後はロールオーバー後の画像名を123_o.gif"
(_oはアンダーバー小文字のオーです
ゼロではないので気をつけてください)
にするとマウスを画像に持っていくとロールオーバーします
備考
ヌルとは(コンピュータ)(null) 、 (架空の生物) です
hrefとはHyper REFerenceの略です
「Hypertextとは他のページなどにジャンプできるテキスト
REFerenceとは参照(すること), 照合, 参考
さらに付けたし
mailtoで題名や本文を最初に入れておきた場合の記述
ちなみにモバイルサイトで
はクリックすると電話をかけることができます
下記はまぁくんの店の情報です
記す
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)
rollover.jsを使ったロールオーバー
特に設置が難しくなくソースもきれいです
まずrollover.jsをダウンロードしてきてサイトのjsフォルダーに保存します
ロールオーバーしたいページの
<head></head>の間に
<script type="text/javascript" src="js/rollover.js"></script>
を足します
ロールオーバーしたい画像(123.gif)のクラスをimgoverにして下さい
<img src="123.gif" alt="" width="137" height="44" class="imgover" />ロールオーバーですのでリンク先を設定しなくてはなりません
他にページがない場合は#を指定します
#(ヌルリンク)はジャンプはしないけどページの先頭に飛びます
リンク先に#を使うのはjavascriptを試す時に良く使われます
今回は
<a href="#"><img src="123.gif" alt="" width="137"です
height="44" class="imgover" /></a>
クラスが複数ある場合は半角スペースを入れます
後はロールオーバー後の画像名を123_o.gif"
(_oはアンダーバー小文字のオーです
ゼロではないので気をつけてください)
にするとマウスを画像に持っていくとロールオーバーします
備考
ヌルとは(コンピュータ)(null) 、 (架空の生物) です
hrefとはHyper REFerenceの略です
「Hypertextとは他のページなどにジャンプできるテキスト
REFerenceとは参照(すること), 照合, 参考
さらに付けたし
mailtoで題名や本文を最初に入れておきた場合の記述
<a href="mailto:メールアドレス?
subject=件名&body=本文">メールアドレス表示用</a>
ちなみにモバイルサイトで
<a href="電話番号(ハイフンなしです">電話番号表示用</a>
はクリックすると電話をかけることができます
下記はまぁくんの店の情報です
記す
大阪府 四條畷市 まぁくんの店(印鑑・名刺・印刷 ホームページ作成 SEO対策)
posted at 2009/06/27 14:36:30
lastupdate at 2009/06/27 14:53:42
【修正】
Comments
Post your Comment



MyYahoo!に追加
Googleに追加