ホーム > movabletype

youtubeの埋め込みをXHTML Validに。かつHTML5対応でIpadやIphoneでも表示させる。

僕のBlogは無駄に(?)Validatorチェックを通すのをポリシーに作っているが故に、youtubeの埋め込みコードを、せっせとEmbedタグをobjectタグに直して使っていましたが、、、それだとiphoneやipadではobjectタグの代替テキストが表示されるだけになってしまいます。

でもサムネイルはやっぱり出てほしい。。ということで、、ちょいと調べましたところ、いくつかxhtml1できれいに埋め込むブックマークレットはあったものの、いまいち、、、、

ということで、思い切ってyoutube html5。あたりでググってみたところ。ありました。

HTML5 に対応した Youtube 動画を貼る方法

情報いただきます。ありがとうございますっ

iframeを使います。

今後はこれをお手本に貼り付けようかと思いますので自分用にメモ。

<iframe class="youtube-player" src="http://www.youtube.com/embed/NdBptlmu7kA" title="a BMW motorcycle story- WITH RIGHTS APPROVAL NOW! " width="480" frameborder="0" height="385"></iframe>

基本的に、書き換えるところは、src=のURLのところと、title=のところ。場合によってはwidthと heightでしょうか。

あと、これは一回やればOKですが、CSSに以下を足しておきます。

.youtube-player {
border: none;
}

するってーと。こうなりました。いぇい。

photo

で。

まだまだがんばっております。

Valid XHTML 1.0 Transitional

正当なCSSです!

[Valid Atom 1.0]

[Check result of Another HTML-lint]

youtubeを埋め込むときの過去の記事

2011年1月23日 23時16分 | Tweet this icon

iphoneの Bookmark Icon

娘が昼寝したので、iPhone Bookmark Iconを作ってみました。

つくりかた

適当な写真とか絵を、「iPhone / iTouch icon generator」でiconにしておきます。

ダウンロードした60x60pixelのiconを、ftpとかで、imagesとか適当なところにほうりこみます。

Movable Typeの管理画面から「デザイン」→「ブログのテンプレート」→「HTMLヘッダー」

で、ヘッダの適当なところに、以下を入れます。

<link rel="apple-touch-icon" href="<$MTBlogURL$>/images/apple-touch-icon.png">

iconを光らせたくない時はこう書くそうです。

<link rel="apple-touch-icon-precomposed" href="<$MTBlogURL$>/images/apple-touch-icon.png">

再構築。

でiphoneのsafariからアクセスして、「+」マークをタップしてブックーマーク

IMG_1206.PNG

「ホーム画面に追加」

できあがり。

IMG_1205.PNG

2010年8月15日 15時36分 | Tweet this icon

こっそりバナーを変えてみた

バナーヘッダにいれたブログタイトルに誤字。死ぬかと思った。

誤:我唯知足

正:吾唯知足

口の字がなきゃだめじゃん。。ということで修正。

800px-Ryoanjitemple.JPG

画像はwikipediaから。

吾唯知足か、吾唯足知か。

2010年8月 4日 1時54分 | Tweet this icon

検索テスト

右側に検索窓をつけました。googleでつくったタグには、tpye属性がないので、type="text/javascript"と付け足しておきました。

2010年4月25日 17時03分 | Tweet this icon

blogの更新をtwitterに投げ込むtestエントリ その3

MovableType用PostToTwitterプラグイン v2.0.0

にしてみた。

4回目の保存テスト

ふむふむ。

2010年4月25日 13時30分 | Tweet this icon

1234
About..もちこらむ
  • 1)柴犬・富士山と、家族の件
  • 2)吾唯足知といいつつ物欲と戦う
  • 3)自分用の覚書メモ
  • 4)コンピュータとインターネット
  • 5)カメラとビデオ
  • 6)工作その他
  • 7)なぜか月
  • というblog。
Flickr Pickup
Categories
Feed
Tags
Archives
Moon
  • moon
Bookmarks
Count
  • nakanohito
Meta
Twitter
Powered by
Ad