ホーム > もちこらむ: 検索結果

タグ「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="https://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分

記事の個別ページに関連する記事を表示する。

久々のmovavletypeねた。

記事の個別のページに関連記事を表示するようにしました。

kanren.jpg

ここにあるテンプレートモジュールをいただきました。ありがとうございます。

投稿した記事の関連記事を表示するタグ&カテゴリ対応のMTモジュールを書いた - はげログ.as

このモジュールのよいところは、tagを読み込んで、同じものを読み込むとき、同じタグのエントリーを優先しつつ、さらに同じカテゴリーからもある程度引っ張ってきてくれるところです。

mt 4.3での設置手順

  1. mobavletyeの管理画面にログインする。
  2. 「デザイン」から「テンプレート」を選ぶ
  3. 「テンプレートモジュール」の下の「テンプレートモジュールを作成」を選ぶ
  4. モジュールの名前を決めて、入力。私は「関連記事」としました。
  5. http://okamot.com/mt/archives/2008/11/mt-3.htmlにあるソース部分の一番上に書いてある、「view plain」という小さいリンクをクリックすると、プレーンなソースがでてくるので、これをコピーして、テンプレートモジュールに貼り付けます。kanren2.jpg
  6. テンプレートモジュールを保存します。
  7. もう一度「デザイン」から「テンプレート」を選んで、アーカイブテンプレートの中にある、個別記事のテンプレートを開きます。私の場合は「ブログ記事」でした。
  8. 関連記事を表示したい場所に<$MTInclude module="関連記事"$>と書きます。=の後は、4で決めた名前です。
  9. 保存して再構築 を行います。

2009年11月29日 22時49分

iphone用もちこらむつくってみる:iPhoneテンプレートfor MT

もちこらむ for iphoneを作ってみました。

http://www.mochimochi.com/i/

私はiphoneもipodtuchも持ってないのですが、、iphoneからのアクセスが結構あるのを発見しまして遊んでみました。

movabletypeにcrema designさんのiphone用のテンプレートを設定しています。

参考サイト

最初にiPhoneテンプレートfor MTをダウンロードしたときに同梱されていたreadmeファイルの説明に沿って設置したら、iPhone用トップページは動いたんですが、iPhone用個別ページがうまく、動かなくて調べました。

どうやらこのサイトはページの拡張子がphpにしてあるのが問題だった用で、19740308(TM)さんのページの中ほどにある、「ページの拡張子が.htmlではない場合」をそのまま適用させていただいたら動きました。感謝

にしても、、、ちょっと前まで「/i」といえば「i-mode」だったのが、、、今は「iphone」だということにびっくりしてみました。

iphone.jpg

2009年8月28日 22時19分

ページ分割のやり直しとw3c validator check完了

いちおう全部のページでcheckが完了な感じ。(追記あり)のページで保留していた、ページ分割をやり直して、全部のページでw3c validator checkが完了しました(のはず)。

ページ分割をmt-search.cgiを使ったものをやめて、スタティックなページを生成するプラグインにかえました。

参考サイトにしたサイト。

というわけで今度こそサイドバーにはりました。でも、、、これがチェック終わっちゃうと、ちょっと楽しかったので、さびしい気が。。まあ、、またバリバリ壊しては作り直すことにしますか。。

Valid XHTML 1.0 Transitional

2009年8月28日 19時53分

いちおう全部のページでcheckが完了な感じ。(追記あり)

Valid XHTML 1.0 Transitional

正当なCSSです!

ということでサイドバーにも張ってみた。

しかしながらですね、このサイトにこられる方は、こちらからこられる方がものすごく多いんですが、、犬と娘のサイトかとおもいきや、飛んでくる皆さんをみますと。。。。。。。えーっと。。。まあ。。恥ずかしくてもうW3Cがどうのとかいえない感じ。。。。。でしたとさ。えーーーー、抜け、漏れ、間違い等ございましたらご指摘いただけましたら幸いです(いつものやつ)。今後ともご指導のほど宜しくお願い致します。。。。

続きを読む: いちおう全部のページでcheckが完了な感じ。(追記あり)

2009年8月20日 0時13分

validなblogを書くのに役に立ちそうなもの。

W3Cの標準に準拠しているかどうかは、あまり追い求めると、なにか捨てないといけないこともあるようですし、blogは中身書いてなんぼだとおもいます。しかしこれはやり始めたら、、、地味な作業ではあるのですが、調べることがたくさんあって、やればやるだけエラーの数が減っていくのをみるのが、純粋におもしろいのです。

SEOがどうとか、アクセシビリティの確保が、とかじゃなくて、ちょっとの間、いかにvalidなblogを書くか、という、そのこと自体を楽しむということにしてみます。

  1. The W3C Markup Validation Service
    htmlがここでpassするのを目標にしてみます。
  2. W3C CSS 検証サービス
    cssがここでpassするのを目標にしてみます。
  3. Another HTML-lint gateway
    W3CのValidationチェックは英語なので、日本語でできると助かりますね。
  4. 小粋空間: Youtube の貼り付け用 HTML を valid にするスクリプト
    ぼくはyoutubeではまりました。これを最初にみつけていれば。。。
  5. Amazon アソシエイト・リンクツール - be Valid Script
    youtube同様amazonのリンクも直さないといけない感じ。めんどくせ
  6. caramel*vanilla &raquo; Flickr badgeをValidにする方法
    Flickr badgeはまだなおしてないのでとりあえずはずしちゃいました。。
    やりました。これはけっこうややこしいです。
  7. Html Validator :: Firefox Add-ons
    ページのソースをみるときに文法チェックしてくれるfirefox add onです。
  8. HTML実体参照変換 : akiyan.com
    面倒な実体参照への変換をjavascriptでやってくれるツール
HTML & XHTML 第5版
HTML & XHTML 第5版
  • 原 隆文
  • ASIN: 4873111277
  • [単行本]
  • 価格: ¥ 6,090
  • オライリー・ジャパン
Amazon.co.jp で詳細を見る

2009年8月18日 21時53分

w3c validator check

とりあえず、いまこの瞬間のこのTOPページだけ、、

Valid XHTML 1.0 Transitional

正当なCSSです!

こんな感じになりました。

別にアクセシビリティを死ぬほど気にしている、というわけではなくて、単に標準とかという言葉に弱いので。。(どきっ)。やるだけやってみました。これまたいろんなblog editorをつかったり、plug-inを入れまくったりしたのと、最初のうちにいじくりまわしたごみを取りきれず。アーカイブページをはじめ、以前の記事はぼろぼろなまま、、

なので、W3Cマークは、とりあえず記念に。。記事中に張っておきます。

気をつけるべき点と、使えそうなツール、使えないツールはこのあとの記事で。

2009年8月18日 21時37分

movabletypeで特定のカテゴリだけ古い順に表示。


macminiをカラクラに入れる。
というカテゴリーだけを古い順に表示しました。

MTifタグにたどり着くまでこれまた結構たいへんだったのでメモ。

で、カテゴリ別ブログ記事リストのエントリーの部分をこんな感じにしています。

(実際には私のテンプレートにはページ分割用のタグがいっぱいはいってるんですが、それらは消して、この方法のために必要なことだけかいてシンプルにしてあります)

<mtifcategory name="macminiをカラクラに入れる。">
<mt:entries sort_order="ascend">
<$mt:Include module="ブログ記事の概要"$>
</mt:entries>
<mtelse>
<mt:entries>
<$mt:Include module="ブログ記事の概要"$>
</mt:entries>
</mtelse></mtifcategory>

MTIfタグでカテゴリー名がもし"macminiをカラクラに入れる。"なら、エントリーをsort_order="ascend"(古い順)で表示する、

MTElseタグで、それ以外の場合にはエントリーをディフォルト(新しい順)のソート順で表示する、という感じです。

2009年8月17日 1時04分

TOPページの分割[ 前の記事< メイン>後の記事]

 

このblogはmovabletypeを使っています。このページの一番下にこんなんつけました。


  < Previous  1 2 3 4  Next >


意外とよくみるけど、つけるのは結構面倒でした。これをつけるのに、調べたのでメモ。なんせググるときのキーワードが適切なものがなかなか見つからない。

[ movabletype 前の記事 後の記事]

とか

[ movabletype 前の記事 後の記事 カスタマイズ]

[ movabletype older post テンプレート]

[ movabletype < Previous tag] 

とかとか、、普通に使ってるから本文がヒットする。。。作り方というかtagの書き方を調べたいのに。。

 

で、どうやらほしいと思っている機能はmobaletype4.3以降に実装された新機能でいう、「ページ分割機能」というらしい。ということにたどり着き。

#この機能が「分割」って、、、調べるときのキーワードとしては浮かばなかった。。。いわれてみればああなるほどね。と。。


で、けっきょく探したら

http://www.koikikukan.com/archives/2009/07/29-005555.php

にたどり着きました。

 

ここのとおりにやったら、テンプレートモジュール名がここのテンプレートと違ったので、エラーがでました。"で囲われた

    <$mt:Include module="Entry Summary"$>

のEntry Summaryを自分の「ブログ記事の概要」に書き換えました。

あと、アーカイブページのほうの手順にある

<mt:Entries limit="$entries_per_page">
    <mt:Ignore><!-- Use the Entry Summary module for each entry published on this page --></mt:Ignore>
    <$mt:Include module="Entry Summary"$>
</mt:Entries>
<$mt:Include module="Search Navigation"$>

は、Search NavigationをSearch Paginationに書き換えたら出来上がりました。

ちょっと難しかった。。。

2009年8月13日 22時23分

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