2008年7月| 1 2 3 45678910111213141516171819202122232425262728293031
トップに戻る | 2008年1月 < 2008年2月のアーカイブ > 2008年3月

今日のSEO:Movable Type 4.1で簡単楽々SEO

2008年2月26日 06:14

Movable Type はSEOに強いといわれるが?

それはSEOやYSTに重要な「description」や「keywords」をテンプレートタグを使って自動生成できるからだ。以下は、Movable Type 4.1用の条件分岐を使った「description」や「keywords」を自動生成するコード例を紹介したい。便利だなと思った方はヘッダーに埋めて使ってもらえばいいと思う。

各ページ別に表示が異なる「description」の設定

各テンプレートの概要には以下のテンプレートタグを使用することとする。

  • メインページの概要は「MTBlogDescription」を使用する。
  • ブログ記事の概要は「MTEntryBody words="N"」を使用する。
  • ブログ記事リストの概要は「MTCategoryDescription」を使用する。
  • ウェブページの概要は「MTPageExcerpt 」を使用する。
<MTIf name="entry_template">
<meta name="description" content="<$MTEntryBody words="80"$>" />
<MTElseIf name="category_archive">
<meta name="description" content="<$MTCategoryDescription$>" />
<MTElseIf name="page_template">
<meta name="description" content="<$MTPageExcerpt remove_html="1"$>" />
<MTElseIf name="main_index">
<meta name="description" content="<$MTBlogDescription$>" />
<MTElse>
<meta name="description" content="<$mt:var name="title"$>" />
</MTIf>

概要は、読者にウェブを見てもらうためのリード文であることもを忘れてはならない。

ブログページの概要には「MTEntryExcerpt」を使う手もあるが、僕は毎回書くだけで精一杯なのだからブログでは概要を書く気がおこらない。最初から書かないなら、文頭からN文字(僕は経験上100文字を使用しているが不安を感じるなら80文字)を自動で「description」に記述してくれる「MTEntryBody words="N"」を使う。このタグを利用した場合は、「ブログ記事の設定」に字数が左右されないという利便性もある。まぁ、「description」はサーチエンジンで、Webサイトに誘導するためのリード文であることも忘れていないなら、どちらを使うかは場合と好みによるだろう。

各ページ別に表示が異なる「keywords」の設定

ブログページやウェブページのタグを”keywords”に挿入してくれるコード。タグがない場合は、予め用意したキーワードのみ表示される。
※キーワード1,キーワード2,キーワード3は個々のサイトに合わせて予め入力しておくこと。

<MTSetVarBlock name="metakeywords">
<MTEntryIfTagged>,<MTEntryTags glue=","><$MTTagName$></MTEntryTags></MTEntryIfTagged><MTIfNonZero tag="MTEntryKeywords">,<$MTEntryKeywords$></MTIfNonZero>
</MTSetVarBlock>
<meta name="keywords" content="キーワード1,キーワード2, キーワード3<$MTGetVar name="metakeywords"$>" />

中身を充実させてこそ、SEOは生きてくる。

もちろん、Movable Type 4.1で、これらのコードを実装したからといって、Googleのトップページに表示される保証はない。あくまでも多少有利になるというだけだ。他にもタイトルを工夫するとか、URLを工夫するとか、キーワードマッチできるよう文章を組み立てるとかおこなうべきことは多くある。とはいえ、SEOの本来の目的が読者誘致をおこないWebからの効果をあげることにあるとすれば、やたらGoogleやYahoo!の順位にばかりを追いかけるのではなく、コンテンツをより有益なものにする工夫は忘れてはならない。真のSEOは中身を充実させてこそ生きてくる。

参考になれば幸い。

投稿者: Dakiny 日時: 2008年2月26日 06:14 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(1)  | トラックバック (2)

今日のMovable Type 4.1:MTOS4.11のNightly Buildをローカルサーバーでテスト

2008年2月25日 22:17

藤本さんのブログで、MTOS4.11のNightly Buildが出たことを知り、「mt.cgiの軽量化が進められてる」ということなので、ローカル環境でテストしてみた。

DFで差分検証してみる。

MTOS4.1とMTOS4.11の差分

いつものようにDFで差分をとってみる。左が「MTOS-4.1-en」、右が「MTOS-4.11-en-release-30-r1379-20080219」。cgi関係は「mt-check.cgi」以外の変更はない。

「mt.cgi」の軽量化がはじまったということなので…

「mt.cgi」の本体である、「CMS.pm」は/liv/MT/Appにあるので、/liv/MTを差分で確認すると、CMSというディレクトリが新たに追加されていた。

CMSディレクトリ

CMSディレクトリには21のファイルがあった。僕の知識では、これらの新規ファイルが何をするものかはわかならいので、他の方のレポートを待つことにしよう。

Appディレクトリの中身

CMS.pmは731KBから、118KBに軽量化されていた。

全体的に大きく変更があったのが、libの中身と、template関係。差分は全部で6.15 MB、ファイル数299 フォルダー数42という大幅な変更だ。
※差分作業に間違いがあり微妙に数字が違うかもしれないが、大幅な変更といっていいだろう。

アップグレードしてみる。

差分ファイルを作って上書きしてみた。mt.cgiにアクセスすると、「アップグレード開始」が表示され、簡単にアップグレードは終了し、再構築も無事完了。

動作検証をしてみる。

 エラー表示

いろいろ開いたり閉じたりしてみた。気持ち的に管理画面のキビキビ感は増したように思える。では、次に新しいブログを作り保存しようとすると、下記のエラーが表示された(汗)。CMS/Entry.pmて新しく追加されたファイルだ。

クリーンインストールしてみる。

差分ファイルに原因があったのかもしれないので、全く新たにクリーンインストール(ローカルなら10分で終わる)すると今度は途中で止まる。エラーが起きたのは、僕のローカル環境だけかもしれないが、4.11にアップグレードしてみる方は、くれぐれもローカルテストを行ってからのほうがよいと思う。

参考になれば幸い。

投稿者: Dakiny 日時: 2008年2月25日 22:17 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のMovable Type 4.1:テンプレートの分割化はデザイン変更を合理的にする

2008年2月23日 23:53

dakiny.com

MTOS4.1のアップグレードに併せて、テンプレートの分割化をしたら、修正が楽になった。

RSSリーダーで読んでいる人はわからないと思うが、少しずつデザインの修正をしている。せっかくMovabel Type Open Souce 4.1にアップグレードしたのだから、まずテンプレートの分割化をおこなったのだが、これが正解だった。

(それで修正する気になったわけだが、)MT3.17以来引き継いでいる1枚のテンプレートでは、面倒でやる気が起こらなかった修正がすごく楽になった。使い回しが可能なパーツは共有化されているから、従来はテンプレートごとにおこなわなかればならない修正をしなくていい。これは時間を節約してくれると共に、修正漏れも防いでくれるから合理的。

よみやすさの向上、表示速度向上、更新の合理化をポイントに修正をおこなった。

  • レイアウトの変更:サイドバー、コンテンツ、サイドバーから、順番をコンテンツ、サイドバー、サイドバーへ変更
  • カレンダーを一列カレンダーへ変更
  • 左右のサイズを940pxにワイド化
  • サイドバーを統一
  • フッターの追加
  • 従来H2には日付があてられ、エントリータイトルはH3であったが、エントリータイトルをH2に変更し、日付はタイトル下に変更
  • 長い文章に「追記」を使用しトップページの表示を短くした
  • コンテンツ内の各要素でおこなっていた左右のpaddingを、コンテンツのpaddingで一括調整し、左側のラインを揃えた。
  • アクセス結果に基づきカテゴリーを整理
  • 折りたたみメニューによるJavaScriptを使用を辞め、表示の速度をあげた
  • 従来エントリー内の見出しは文字を120%に拡大し強調しており、FCKeditorで文字の強調と文字の拡大の2回の操作をおこなう必要があったが、エントリー中でH3をつかえるように変更、見出しはFCKeditorで「H3」を選ぶだけになった
  • 従来<P>以外のブロックタグの間は「Shift+Enter」を押すことにより<br />でスペース調節していた。論理的には正しくないので、各ブロックタグの「margin-bottom: 2em;」を設定。論理的にも正しくなる上、「Shift+Enter」を押す必要なし
  • その他CSSの合理化

わずかな時間を惜しんでテンプレートの分割化をしないのは馬鹿馬鹿しいことだ。

Mt3.3以前からMT4.0やMT4.1にアップグレードしたもの、未だにテンプレートの分割化をおこなわずにいる人や、MT4.1を使っているにもかかわらずテンプレートの分割化をおこなわずに構築している人が、おそらく分割化しない理由は「めんどう」か「わからない」のいずれかだろう。めんどうな方、テンプレートモジュール化にしておけば、デザイン修正や変更がすごく楽になる。わからない方「今日のMovable Type 4.1:MT4.1はテンプレートタグより先にテンプレート分割をマスターせよ」「今日のMovable Type 4.1:超簡単!見よう見まねで覚えるMT4.1テンプレート分割方法」を読んでほしい。

参考になれば幸い。

投稿者: Dakiny 日時: 2008年2月23日 23:53 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のMovable Type 4.1:CSSを使ったデザインはもっと自由であるべき

2008年2月22日 07:12

andreasviklund.com

日本のビジネステンプレート屋さんは、もう少し勉強したほうがいい。

SEが本業の相方がMODxでサイト構築していて発見したサイト、「andreasviklund.com」がじつに気に入った。このサイトはXHTML+CSSでデザインされたクールなWebテンプレートを30$以下で販売している。

感心したのは、デザインがクールで、CSSの組み方が上手いということより、Webがよくわかっていることだ。目的に合わせてデザインをまったく変えているのがすばらしい。

それにくらべ、日本のビジネステンプレートの多くは、単にイメージ画像を変えたり、カラム数を変えたり、色を変えている程度にすぎず。バリエーションが少なすぎる。

Andreas氏の手がけるテンプレートをいくつか紹介してみよう。


▲汎用ブログ向けテンプレート

上記は無料で配布されているが、応用性がありそうなベーシックデザイン。ただの2カラム、3カラムではないことに注目。こういうのをシンプルで美しいデザインというのだ。

andreasviklund.com
▲音楽ポータル

このレイアウトは音楽ポータルだけでなく、ポータルサイト全体に向いている。

andreasviklund.com
▲医療サイト

清潔感があり、かつオシャレ。

andreasviklund.com
▲通販サイト

トップページはあれもこれもと欲張らず、目玉商品にしぼりこんだことで購買欲をそそる。

andreasviklund.com
▲不動産

このデザインは楽しい!機能性もよさそうだ。

これらのデザインテンプレートはXHTML+CSSでデザインされており、WordPressやMovable Typeであれば、テンプレートにタグを入れるだけで使えるようになっている。リクエストも受けつけるとのことなので、希望がある人はAndreas氏に問い合わせてみるといいだろう。

CSSを使ったデザインはもっと自由であるべき。

日本のデザイナーは2カラム、3カラムにとらわれすぎ。グローバルメニューをつけたら、即企業サイト向けかといえばそうではない。レイアウトのバリエーションはそれこそ数限りなくある。CSSを正確に組む人デザイナーは増えてきたが、CSSを使って自由にデザインすることを知るデザイナーは少ない。テーブルレイアウト主体の時代のほうがまだ自由であったと思うのは気のせいか。デザイナーは、CSSを使ったWebデザインはもっと自由なものであることを考えるべきだろう。

andreasviklund.com
andreasviklund.com

参考になれば幸い。

投稿者: Dakiny 日時: 2008年2月22日 07:12 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のSEO:Webの戦闘力を測定できるWeb スカウターでライバルサイトを知れ

2008年2月21日 22:52

Web スカウター

SEOを優先するか、正しいHTMLを優先するか?

僕は迷うことなくSEOを優先する。なんのためにWebを開設するのかを考えれば、自然に導かれる答えだ。Another HTML-lintで高得点にこだわるあまり、毎回エントリーの都度チェックしてエラーをつぶすのも考え物で、そんなことに時間を費やすなら、その時間を、より有益な情報を提供することに費やしたほうがいい。ターゲット読者層のより多くの人に見てもらい評価され、結果に導いてこそWeb開設の意味がある。

さて、本題。「Movable Type 備忘録」さんのWebを読んでいたら、見知らぬバナーがあり、「これなんだ?」とクリックして「Web Scouter」にたどりついた。 なんでもWebの戦闘力を計ってくれるらしい。

どうやって、戦闘力を計るというのだろう?公式サイトにはどこにも説明がないが、ITmedia Biz.ID:サイトの“戦闘力”を計測する「Web Scouter」によれば

Googleのページランクをはじめ、はてなブックマークやdel.icio.usなどのソーシャルブックマークへの登録数、livedoor ReaderなどRSSリーダーでの購読数などを元に、独自の指標で各サイトの影響力をポイント化する。

とのことだそうだ。ネーミングはアレだが測定結果はかなり信用できるとみた。

早速、このサイトの戦闘力を「Web Scouter」で測定!

Web スカウター

チープではあるが(苦笑)、ドラゴンボールに出てくるようなスカウターがWeb上に表示される。

Web スカウター

測定結果は「戦闘力2571 ランキング:1,409位 / 51,667」、すごいというほどではないけど、まぁ、個人ブログとしては健闘しているほうかな。

根拠のある結果を基に戦闘力を判断してだけに、ライバルサイトと比較してみるのもよいかもしれない。わかりやすいのが気に入った。

SEOの成果をあげるには、まずさまざまな角度からの分析が重要だ

Web スカウター
ウェブページの戦闘力を測定できる「あの」ツール
http://ja.webscouter.net/

投稿者: Dakiny 日時: 2008年2月21日 22:52 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のコラム:お金を貯めてから買う予定のモノなんて、本当は必要のないモノだ

2008年2月18日 23:19

自転車のカゴ

自転車のカゴがこわれた。

僕が通勤に使っている自転車は、高校時代を卒業した長女が在学中に駅から学校まで通うのに利用した自転車で、元々中古であったのでかなり古い。

カゴは食料品の買い出しに行くのに重宝していたのだが、この1年間。支える金具が順番に腐食して折れていき、とうとう全てが折れ、カゴとして用をなさないばかりか、走行中にも邪魔なものになった。カゴを新しくするか、とりはずすか考えた末、ふと思いついて、前後逆にとりつけることにした。若干傾いてはいるが重いモノを運ぶわけではないから、しばらくはこれでいい。

まぁ、かようにしてボロ自転車に乗っていて、もう少しまともな自転車への買換も考えていないのではないのだが、待てよ?と、思いとどまった。

モノを購入する場合、安物なら買わない、お金を貯めてから本物を買うという人が、僕も含め多いと思うが、それは、今すぐ必要のないものだから買わずに我慢できるのだ。つまりなくても困らないものなのである。

本当に必要なものなら、お金を貯めて高級品を買えるまで我慢するなんて言わない。

たとえば、Web制作者である僕が1台しかPCを持ってなくて、それが壊れた場合。30万円のPCがほしいけど、準備できるお金が15万円しかないとする。その場合、僕は30万円のPCを買えるまで我慢するか?仕事ができなくなるのに、そんなことをするわけがなく、15万円以下のPCを買うだろう。つまり、そういうことだ。

僕にとっての自転車は、通勤や駅まででかけるためのものなので、たとえボロでもなくては困るものだ。いや、盗まれても痛くないだけ、ボロ自転車のほうがいいかもしれない(笑)。

投稿者: Dakiny 日時: 2008年2月18日 23:19 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のMovable Type 4.1:MT4.1はテンプレートタグより先にテンプレート分割をマスターせよ

2008年2月15日 06:14

変数タグとテンプレートの分割を一緒に考えるからむずかしくなるのだ。

先日、書いた『超簡単!見よう見まねで覚えるMT4.1テンプレート分割方法』でも、よくわからなかったという方に今日のコラムをおくる。

テンプレートの分割がわからない理由は、おそらく、テンプレートタグとテンプレートの分割を一緒に覚えようとするからだと思う。

オリジナルのテンプレートを見ればMTSetVarではじまる変数タグが何行か書かれているから誤解があるが、これらは条件分岐するのに必要な記述であり、テンプレートの分割だけなら記述する必要はない。

安心していい、MTSetVarの使い方を知らなくてもテンプレートの分割はできる。

どちらを先にマスターする必要があるかといえば、もちろんテンプレートの分割で、テンプレートを分割なくしてMT4.1を使いこなすことはできない。

まず!テンプレートの分割をマスターしよう

以下、サンプルを例に解説する。こんなレイアウトのページを分割する方法を2種類紹介する。

ヘッダー+バナー
コンテンツ サイドメニュー サイドメニュー
フッター

◆MT4.0からの変数タグと条件タグの基本的使い方がわかっている人の一般的な分割方法

<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock>
<$MTInclude module="ヘッダー"$>
<$MTInclude module="コンテンツ"$>
<$MTInclude module="フッター"$>

はこうだが、分割するだけなら、こんな書き方をする必要はない。以下の方法をおすすめする。

◆MT3.3xまでの一般的な分割方法

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard" lang="ja" xml:lang="ja">
<head>
</head>
<body>
<div id="container">
<$MTInclude module="バナー"$>

<$MTInclude module="コンテンツ"$>
<$MTInclude module="左サイドバー"$>
<$MTInclude module="右サイドバー"$>
<$MTInclude module="フッター"$>

意外と知られてないがテンプレートの分割はMT3.2系から可能になり、MT3.3x系までは僕たちは、この方法でテンプレートを分割していた。最初はこれで充分である。

ポイント1:ヘッダー情報を共通化すると、meta情報等に条件分岐が必要となるの、XML宣言からコンテナまでは残しておくのがポイント

ポイント2:Movable Type 4.1からには月別アーカイブがなく、カテゴリーアーカイブ、月別アーカイブがブログ記事リストにまとめらえているが、変数を指定してあげないと使えないので、MT3.3x時点のようにカテゴリーリストと月別リストを作ってあげる。

ポイント3:分割は行間であればどこで切っても問題ないが、<div id=""><div>で区切るのが管理しやすい。

上記をおこなうだけでもずいぶんと、制作や更新管理は楽になる。

分割をマスターして、はじめてテンプレートタグのさまざまな使い道が生きてくる。

参考になれば幸い。

投稿者: Dakiny 日時: 2008年2月15日 06:14 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のコラム:椅子で眠る過酷な日々

2008年2月14日 23:55

Movable Type プロフェッショナル・スタイル『Movable Type プロフェッショナル・スタイル』の入稿日が決まり、Amazonの予約開始日もほぼ決まった。毎日佳境。途中椅子での仮眠を含み、3日に1度くらいしか家に帰らぬ日々が続く。早くあがった原稿はすでにPDFとなるやも、僕はまだ調整2本と、自分の原稿に悩んでいる状態だ。連日のMTネタは本の原稿下記の過程における産物。変数を多用するテンプレートをわかりやすく、昨日のブログはそういう意志の元に書いたのだが、平易に書くのはすごく難しい。

投稿者: Dakiny 日時: 2008年2月14日 23:55 | このエントリーをはてなブックマークに追加 このエントリーのはてなブックマーク被リンク数 |  このエントリをdel.icio.usに追加 | このエントリをlivedoorクリップに追加 このエントリーのlivedoorクリップ被リンク数 |  | コメント(0)  | トラックバック (0)

今日のMovable Type 4.1:超簡単!見よう見まねで覚えるMT4.1テンプレート分割方法

2008年2月13日 07:16

MT4.1はテンプレートを分割できないとポテンシャルを引き出せない

MT4.0は不完全な代物であったから、「まだ安定してないですから…」とか顧客先にいいわけができたが、MT4.1は完成度も高く、MT3.3x系と比べると比較にならない高機能だ。となれば、Movable Typeで糧を得るなら、テンプレートの分割を覚えるなければ未来はない。

技術的な説明抜き、見よう見まねで覚えるテンプレート分割方法のはじまり、はじまり

今日のコラムはテンプレートをどうしても分割できないという人に贈る。『理屈抜き見よう見まねで覚えましょう』といういい加減なやさしいテンプレート分割教室。MTSetVarMTSetVarBlockがよくわからない方でもOK!でも、たぶんにできあがったソースが完璧とは言い難いので、後はご自分で勉強して調整してほしい。

MT4.1[規定のブログ]

オリジナルのMovable Type 4.1のメインページのテンプレートはHTMLを、まず3つ分けている。サイドメニューとフッターが同色に分けられているのは意味がある(後でわかる)。

ヘッダー+バナー
コンテンツ サイドメニュー サイドメニュー
フッター

まず、メインページのソースを見てみよう

<MTSetVar name="body_class" value="mt-main-index">
<MTSetVar name="main_template" value="1">
<MTSetVar name="main_index" value="1">
<MTSetVar name="sidebar" value="1">
<MTSetVarBlock name="title"><$MTBlogName encode_html="1"$></MTSetVarBlock>
<$MTInclude module="ヘッダー"$>
<MTEntries>
    <$MTEntryTrackbackData$>
    <$MTInclude module="ブログ記事の概要"$>
</MTEntries>
<div class="content-nav">
    <a href="<$MTLink template="archive_index"$>">アーカイブ</a>
</div>

<$MTInclude module="フッター"$>

最初にMTSetVarではじまるMovable Type 4.1から登場したタグがあって、<$MTInclude module="ヘッダー"$>の下に少しテンプレートタグがあって、<$MTInclude module="フッター"$>で終わるけど、見慣れている<html><head></head><body></body></html>がどこにもない。MT3.3xを使い慣れた方でも戸惑ったに違いない。

コードを見るだけで分割方法を理解するのは難しいと思うので、このブログ(ローカルサーバー版)で実際に試してみた。ブログのレイアウトが変わったことに気づいた人、あなたは鋭い。モジュール化する上でサイドメニューが左右にあるのは面倒なので右にまとめたのだ(笑)。

分割の基本はHTMLソースを3つに分けること

3.3x以前にポピューラーであった1枚のHTMLテンプレートを分割してみよう。下記はこのブログのメインページのHTMLソースだ。文字背景色を上と同じ配色にしてあるのでどこで分割するのかわかると思う。スクロールしてご覧いただきたい。大事なのはどこで分割するかであって全体のソースは見なくてもいい。
#というより見ないでほしい(汗)。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard" lang="ja" xml:lang="ja">
<!-- HEAD --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<meta name="dc.title" content="<$MTBlogName encode_html="1"$>" />
<meta name="keywords" content="Accessibility, Web標準, W3C, Google, SEO, SEM, Movable Type, XHTML, CSS, 三菱Jeep" />
<meta name="description" content="システム・クリエイター 蒲生トシヒロのコラム。夢をかなえる時間は余りに少ない。思想が合わない人と接すれば時間を失なう。少ない人生だから、理解してくれる人と共に生きよう。だから、世界中の1%の人々へ。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Dakiny" />
<meta name="copyright" content="Copyright (c) 2005 Dakiny" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />
<link rev="made" href="mailto:info@gamo.jp" />
<link rel="index" href="/index.html" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles-site.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<title><$MTBlogName encode_html="1"$></title>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="schema.CC" href="http://web.resource.org/cc/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="<$MTBlogURL$>ror.xml" />
<MTBlogIfCCLicense><$MTCCLicenseRDF$></MTBlogIfCCLicense>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-178574-1";
urchinTracker();
</script>
</head>
<!-- HEAD終了 --> <!-- BODY --> <body> <!-- コンテナ --> <div id="container"> <!-- バナー --> <div id="banner">
<div class="pad">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
<ul class="skip">
    <li><a href="#content" title="このブログの説明を飛ばして本文に進みます">本文へジャンプ</a></li>
    <li><a href="#right" title="このブログの説明を飛ばしてメニューに進みます">ページメニューへジャンプ</a></li>
</ul>
</div>
</div>
<!-- バナー終了 --> <!-- コンテンツ --> <div id="content">
<div class="pad">
<div class="result">
<MTEntries> <$MTEntryTrackbackData$> <MTDateHeader>
<h2><$MTEntryDate format="%x"$>(<$MTEntryDate format="%a"$>)</h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<div class="cate"> <MTEntryCategories>[<a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a>] </MTEntryCategories> </div>
<$MTEntryBody$>
<MTEntryIfExtended>
<p class="extended"><a href="<$MTEntryPermalink$>#more">続きを読む "<$MTEntryTitle$>"</a></p>
</MTEntryIfExtended>
<p class="posted">
投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$>&nbsp;|&nbsp;<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="<$MTBlogURL$>b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a>&nbsp;|&nbsp;
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&amp;title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="<$MTBlogURL$>archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a>&nbsp;|&nbsp;<a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&amp;title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ!"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a>&nbsp;|&nbsp;<a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive>&nbsp;|&nbsp;<a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive>&nbsp;|&nbsp;<a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
<MTEntries lastn="7" offset="3">
<MTDateHeader>
<h2 class="date-header"><$MTEntryDate format="%x"$></h2>
</MTDateHeader>
<h3 id="a<$MTEntryID pad="1"$>"><$MTEntryTitle$></h3>
<p><$MTEntryExcerpt$></p>
<p><a href="<$MTEntryLink$>" title="<$MTEntryTitle$>">続きを読む</a></p>
<p class="posted">
投稿者: <$MTEntryAuthorDisplayName$> 日時: <$MTEntryDate format="%X"$>&nbsp;|&nbsp;<a href="http://b.hatena.ne.jp/entry/<$MTEntryPermalink$>"><img class="zero" style="vertical-align: middle" src="<$MTBlogURL$>b_entry.gif" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加" height="12" width="16" /></a>&nbsp;|&nbsp;
<a href="http://del.icio.us/post?url=<$MTEntryPermalink$>&amp;title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" target="_blank" title="このエントリをdel.icio.usに追加"><img style="border: 0px solid; vertical-align: middle" src="<$MTBlogURL$>archives/delicious.med.gif" alt="このエントリをdel.icio.usに追加" title="このエントリをdel.icio.usに追加" height="12" width="12" /></a>&nbsp;|&nbsp;<a href="http://clip.livedoor.com/redirect?link=<$MTEntryPermalink$>&amp;title=<$MTBlogName encode_url="1"$>:<$MTEntryTitle encode_url="1"$>" class="ldclip-redirect" target="_blank" title="この記事をクリップ!"><img src="http://www.dakiny.com/archives/16_16_white.gif" width="16" height="16" alt="このエントリをlivedoorクリップに追加" title="このエントリをlivedoorクリップに追加" style="border: none;vertical-align:middle;" /></a>&nbsp;|&nbsp;<a class="permalink" href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>の個別表示">パーマリンク</a><MTIfCommentsActive>&nbsp;|&nbsp;<a href="<$MTEntryPermalink$>#comments" title="<$MTEntryTitle$>にコメントする">コメント(<$MTEntryCommentCount$>)</a></MTIfCommentsActive> <MTIfPingsActive>&nbsp;|&nbsp;<a href="<$MTEntryPermalink$>#trackback" title="<$MTEntryTitle$>にトラックバックする">トラックバック (<$MTEntryTrackbackCount$>)</a></MTIfPingsActive></p>
</MTEntries>
</div>
</div>
</div>
<!-- コンテンツ終了 --> <!-- サイドバー左 --> <div id="left">
<div class="pad">
<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー"><caption><$MTDate format="%B %Y"$></caption><tr><th abbr="S">S</th><th abbr="M">M</th><th abbr="T">T</th><th abbr="W">W</th><th abbr="T">T</th><th abbr="F">F</th><th abbr="S">S</th></tr><MTCalendar><MTCalendarWeekHeader><tr></MTCalendarWeekHeader><td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a> </MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar></table>
</div>
<h2>サイトについて</h2>
<ul>
<li>やるべきことはあまりに多い。決めた事を実現するには何よりもスピードが大切だ。過去にとどまり未知なる道を拒否する人に接すれば貴重な時間が失われ、精神的な疲労だけが残る。もはや40代後半、50も目前。残り少ない人生に夢の実現を賭けているから、理解ある人々と共に生きることにしよう。<br />
<em>だから、世界中の1%の人々へ</em></li></ul>
<ul>
<li><a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="「世界中の1%の人々へ」のはてなブックマーク数" title="「世界中の1%の人々へ」のはてなブックマーク数" width="75" height="14" /></a></li>
</ul>
<h2>作者について</h2>
<ul>
<li><img alt="ガモウトシヒロ" src="<$MTBlogURL$>archives/toshi.jpg" height="152" width="152" /> <br />
<strong>蒲生 トシヒロ</strong><br />
ハンドル:Dakiny<br />
生年月日:1959年9月2日 A型<br />
出  身:岐阜県岐阜市<br />
職  業:システム会社経営、システムデザイナー、マークアップエンジニア<br />
最終学歴:拓殖大学中退<br />
性  格:曲がったことが大嫌いで、仕事には厳しい職人気質。誰にでも言いたいことをいい。人にはよく変わり者と言われる。<br />
信  条:勉強するも仕事するも遊ぶが如し、さすれば本物<br />
夢   :南の島で童話作家になること。<br />
VoxURL:<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a><br />
アドレス:<a href="mailto:&#103;&#97;&#109;&#111;&#64;&#105;&#116;&#45;&#112;&#114;&#111;&#46;&#99;&#111;&#46;&#106;&#112;">&#103;&#97;&#109;&#111;&#64;&#105;&#116;&#45;&#112;&#114;&#111;&#46;&#99;&#111;&#46;&#106;&#112;</a></li>
</ul>
<h2>参加プロジェクト</h2>
<ul>
<li>・<a href="https://sourceforge.jp/projects/tinymce-ja/" target="_blank">Sourceforge.Jp TinyMCE Japan</a> Administrator</li>
<li>・<a href="https://sourceforge.jp/projects/tinymce-for-mt/" target="_blank">Sourceforge.Jp TinyMCE for Movable Typeプロジェクト</a> Administrator</li>
<li>・<a href="http://websig247.jp/" target="_blank" title="WebSig24/7(ウェブシグ・トウェンティーフォーセブン)">WebSig24/7</a> Moderator</li>
<li><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a></li>
</ul>
<h2>会社</h2>
<ul>
<li> <img alt="ITプロフェッショナル" src="<$MTBlogURL$>archives/office.jpg" height="114" width="152" /><br />
<a href="http://www.it-pro.co.jp/" target="_blank"><strong>有限会社ITプロフェッショナル</strong><br />
</a>W3C準拠、アクセシビリティ、ユーザービリティをテーマとするWebシステム会社。<br />
スタッフは社員というより仲間という存在で、よい仕事をしようと知恵を出しあってる。<br />
<a href="http://www.sixapart.jp/" target="_blank">シックスアパート社</a>のプロネット会員で、現在はMovable Typeによる構築や、W3C勧告に基づいたマークアップエンジニアリングが業務の中心。</li>
</ul>
<h2>車</h2>
<ul>
<li> <img alt="三菱JEEP J53" src="<$MTBlogURL$>archives/jeep.jpg" height="114" width="152" /><br />
<strong>三菱JEEP J53</strong><br />
存在感があり、タフな車である。 オーナーにもタフさを要求するので、憧れだけでは乗り続けることはできない。<br />
エンジン音や風切音は騒々しいし、振動が多く乗り心地も悪い。パワステもエアコンもなく、夏は暑く冬は寒い。<br />
実用にはほど遠いが、それでも!私はこの車を愛する。</li>
</ul>
<h2>カメラ</h2>
<ul>
<li> <img alt="SONY Cyber-shot DSC-F717 &amp; DSC-F828" src="<$MTBlogURL$>archives/digicame.jpg" height="114" width="152" /><br />
<strong>SONY Cyber-shot <br />
DSC-F717 &amp; DSC-F828</strong><br />
同じメーカーなのに性格の全く異なる2台のデジタルカメラ。<br />
DSC-F717は誰でも、きれいに撮れる愛嬌のある性格。<br />
DSC-F828は高機能だが、使い手を選ぶ気むずかしい性格。<br />
それぞれに一長一短があり、用途により使い分ける。 </li>
</ul>
</div>
</div>
<!-- サイドバー左終了 --> <!-- サイドバー右 --> <div id="right">
<div class="pad">
<!--
<h2>Search</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<p><input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索</label><br />
<input id="search"  class="fo" name="search" size="20" value="Keyword" tabindex="1" /><br /></p>
</form>
-->
<p><a href="http://mt4lp5.cssnite.jp/" target="_blank"><img src="http://mt4lp5.cssnite.jp/banner_mt4lp5_160-160.gif" alt="2008年4月5日開催、MT4LP5" width="160" height="160" /></a></p>
<!--blog_ajax_json_search.js start-->
<h2>Search</h2>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',
document.getElementById('search_box').value );">
<p><input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br />
キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br />
Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a></p>
</form>
<!--blog_ajax_json_search.js end-->
<h2 class="module-header">Download</h2>
<div class="px12">
<ul>
<li><a href="<$MTBlogURL$>tinymce/" target="_blank" title="TinyMCE fro Movabel Type">TinyMCE for MT</a></li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_typeajyaxmt/" title="Ajaxを利用したMT用高速検索システム">MT用高速検索システム</a>(MT3.3,MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_4_movable_type_41fckeditor/" title="FCKeditorカスタムキットVer.1">FCKeditorカスタムキットVer.1</a>(MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_41_fckedito_custom_kit_ver2/" title="FCKeditorカスタムキットVer.2">FCKeditorカスタムキットVer.2</a>(MT4.1)</li>
</ul>
</div>
<div class="module-tagcloud module">
<h2 class="module-header">Tag cloud</h2>
<div class="module-content">
<ul class="module-list">
<MTTags>
<li class="module-list-item taglevel<$MTTagRank$>"><a href="<$MTTagSearchLink$>"><$MTTagName$></a></li>
</MTTags>
</ul>
</div>
</div><br />
<MTIfArchiveTypeEnabled archive_type="Category">
<h2>Categories</h2>
<div class="px12"><MTTopLevelCategories><MTSubCatIsFirst>
<ul class="module-list">
</MTSubCatIsFirst> <MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryDescription> (<$MTCategoryCount$>)</a>
<MTElse>
<li><MTCategoryDescription> </MTElse> </MTIfNonZero> <MTSubCatsRecurse></li>
<MTSubCatIsLast>
</ul>
</MTSubCatIsLast> </MTTopLevelCategories> </div>
</MTIfArchiveTypeEnabled>
<h2>ArchiveList</h2>
<div class="px12">
<MTArchiveList archive_type="Monthly">
<MTArchiveDateHeader><div  id="archive<$MTArchiveDate format="%Y"$>name"><span style="font-size: 130%"><$MTArchiveDate format="%Y年"$></span></div><ul id="archive<$MTArchiveDate format="%Y"$>list"></MTArchiveDateHeader>
<li><a href="<$MTArchiveLink$>" title="<$MTArchiveDate format="%Y年%B月"$>のアーカイブページへ"><$MTArchiveDate format="%B月"$></a> (<$MTArchiveCount$>)</li><MTArchiveDateFooter></ul></MTArchiveDateFooter>
</MTArchiveList>
</div>
<script type="text/javascript">
//<![CDATA[
<MTArchiveList archive_type="Monthly"><MTArchiveDateHeader>FoldNavigation('archive<$MTArchiveDate format="%Y"$>','off',false);</MTArchiveDateHeader>
</MTArchiveList>
//]]>
</script>
<h2>Trackbacks</h2>
<div class="px12">
<ul>
<MTPings lastn="5">
<li> <a href="<$MTPingURL$>"><$MTPingTitle$></a><br />
from <$MTPingBlogName$></li>
</MTPings>
</ul>
</div>
<h2>Comments</h2>
<div class="px12">
<ul>
<MTEntries recently_commented_on="7">
<li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments> <$MTCommentAuthor$> [<$MTCommentDate format="%m/%d %X"$>]<br />
</MTComments> </li>
</MTEntries>
</ul>
</div>
<h2>Links</h2>
<div class="px12">
<ul>
<li><strong>僕の会社</strong><br />
<a href="http://www.it-pro.co.jp/" target="_blank">有限会社ITプロフェッショナル</a></li>
<li><strong>mixi URL</strong><br />
<a href="http://mixi.jp/show_friend.pl?id=1474285" target="_blank">http://mixi.jp/show_friend.pl?id=1474285</a></li>
<li><strong>Vox URL</strong><br />
<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a></li>
<li><strong>ブクログ URL</strong><br />
<a href="http://booklog.jp/users/dakiny" target="_blank">http://booklog.jp/users/dakiny</a></li>
<li><strong>Tumblr URL</strong><br />
<a href="http://dakiny.tumblr.com/" target="_blank">http://dakiny.tumblr.com/</a></li>
<li><strong>Twitter URL</strong><br />
<a href="http://twitter.com/Dakiny" target="_blank">http://twitter.com/Dakiny</a></li>
<li><strong>Flickr</strong><br />
<a href="http://www.flickr.com/photos/dakiny/" target="_blank">http://www.flickr.com/photos/dakiny/</a></li>
<li><strong>僕の旧Web</strong><br />
<a href="http://ex.dakiny.com/" target="_blank">Dakiny's Room</a></li>
<li><strong>このブログのフィードを取得</strong><br />
<a href="<$MTBlogURL$>atom.xml" target="_blank"><img alt="このブログのフィードを取得" src="<$MTBlogURL$>xml.gif" width="36" height="14" /></a></li>
<li><a href="http://r.hatena.ne.jp/append/<$MTBlogURL$>" title="はてなRSSに追加"><img src="http://r.hatena.ne.jp/images/addto_w.gif" alt="はてなRSSに追加" title="はてなRSSに追加" height="22" width="89" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://reader.livedoor.com/subscribe/<$MTBlogURL$>" target="_blank" title="Subscribe with livedoor Reader"><img src="http://image.reader.livedoor.com/img/banner/80_15_3.gif" width="80" height="15" class="zero" style="vertical-align: middle" alt="Subscribe with livedoor Reader" /></a></li>
<li><a href="http://www.bloglines.com/sub/<$MTBlogURL$>"><img src="http://static.bloglines.com/images/sub_modern8.gif" alt="Bloglinesで閲読登録" width="76" height="17" class="zero" style="vertical-align: middle" /></a></li>
<li><a href="http://www.technorati.jp/" target="_blank" title="Technorati JAPAN"><img alt="Technorati JAPAN" src="<$MTBlogURL$>archives/tn-tiny.gif" height="13" width="76" class="zero" /></a><br />
<a href="http://www.technorati.jp/search/www.dakiny.com" target="_blank" title="テクノラティ:「www.dakiny.com」のブログ記事検索結果">このブログの検索結果</a><br />
<a href="http://www.technorati.jp/profile/Dakiny" target="_blank" title="Technorati Profile for Dakiny">Dakinyのプロフィール</a></li>
<li><a href="http://del.icio.us/" target="_blank"><img src="http://images.del.icio.us/static/img/delicious.small.gif" alt="del.icio.us" width="10" height="10" class="zero" style="vertical-align: middle" /></a> <strong><a href="http://del.icio.us/Dakiny">my del.icio.us</a></strong></li>
</ul>
</div>
<p><a href="http://feedmeter.net/detail.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" target="feedmeter"><img src="http://feedmeter.net/image.php?r=http%3A%2F%2Fwww.dakiny.com%2Fatom.xml" class="zero" width="60" height="36" alt="人気ブログランキング - 世界中の1%の人々へ" /></a></p>
<p><a href="http://awasete.com/show.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" target="_blank"><img src="http://img.awasete.com/image.phtml?u=http%3A%2F%2Fwww.dakiny.com%2F" width="160" height="140" alt="あわせて読みたい" /></a></p>
<p><a href="http://trackfeed.com/"><img name="trackfeed_banner" id="trackfeed_banner"
src="http://img.trackfeed.com/img/tfg.gif" alt="track feed" width="80" height="15" class="zero" /></a>
<script  type="text/javascript" src="http://script.trackfeed.com/usr/4c5d10087a.js"></script></p>
<p style="clear:both;"><a href="http://www.one.org/" target="_blank"><img alt="ONE Campaign" class="zero" src="<$MTBlogURL$>one.gif" width="150" height="150" /></a><br />
<strong>ONE Campaign</strong>(貧困とエイズを撲滅するキャンペーン)</p>
<p><!-- クリエイティブ・コモンズ・ライセンス --><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank"><img src="http://i.creativecommons.org/l/by-nc-sa/2.1/jp/88x31.png" alt="クリエイティブ・コモンズ・ライセンス" class="imageleft" height="31" width="88" /></a><br />
この作品は、<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" target="_blank">クリエイティブ・コモンズ・ライセンス</a>の下でライセンスされています。<!-- /クリエイティブ・コモンズ・ライセンス --></p>
<p><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a><br />
<a href="http://validator.w3.org/check?uri=referer" target="_blank"><img src="<$MTBlogURL$>archives/valid-xhtml10.png" alt="Valid XHTML 1.0 Transitional" height="31" width="88" class="zero" /></a><br />
<a href="http://jigsaw.w3.org/css-validator/validator?uri=<$MTBlogURL$>" target="_blank"><img src="<$MTBlogURL$>archives/vcss.png" alt="Valid CSS!"  height="31" width="88" class="zero" /></a><br />
<a href="http://www.w3.org/WAI/WCAG1A-Conformance" title="Explanation of Level -A Conformance" target="_blank"><img src="<$MTBlogURL$>archives/wcag1A.gif" alt="W3C-WAI Level -A" height="32" width="88" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>index.xml" target="_blank"><img height="31" width="88" src="http://www.dakiny.com/archives/valid-rss.png" alt="[Valid RSS]" title="Validate my RSS feed" /></a><br />
<a href="http://feedvalidator.org/check.cgi?url=<$MTBlogURL$>atom.xml" target="_blank"><img src="http://www.dakiny.com/archives/valid-atom.png" alt="[Valid Atom 1.0]" title="Validate my Atom 1.0 feed" height="31" width="88" /></a><br />
<a href="http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on" target="_blank"><img src="<$MTBlogURL$>archives/kaz-ahl.png" alt="Another HTML-lint"  height="31" width="88" class="zero" /></a><br />
<a href="http://www.contentquality.com/" target="_blank"><img src="<$MTBlogURL$>archives/Ctested.gif" alt="Cynthia Tested!" height="31" width="88" /></a><br />
<a href="http://tinymce.moxiecode.com/" target="_blank"><img src="<$MTBlogURL$>archives/powered_by_tinymce.png" class="zero" width="88" height="32" alt="Powered by TinyMCE" /></a><br />
<a href="http://www.mozilla-japan.org/products/firefox/" target="_blank"><img src="<$MTBlogURL$>archives/get.gif" alt="Get Firefox"  height="31" width="88" /></a></p>
<p>Powered by<br /><a href="http://www.movabletype.jp" target="_blank"><img alt="Powered by Movable Type 4" src="<$MTBlogURL$>archives/mt4-bug-pbmt-white.png" height="75" width="120" class="zero" /><br />Movable Type <$MTVersion$></a></p>
</div>
</div>
<!-- サイドバー右終了 --> <!-- フッター --> <div style="clear: both;">
<script type="text/javascript" src="http://www.assoc-amazon.jp/s/link-enhancer?tag=dakinysroom-22"></script>
<noscript>
<img alt="Amazon" src="http://www.assoc-amazon.jp/s/noscript?tag=dakinysroom-22" height="0" width="0" />
</noscript>
</div>
<!-- フッター終了 --> </div> <!-- コンテナ終了 --> </body> <!-- BODY終了 --> </html> <!-- HTML終了 -->

背景色ピンクの部分がヘッダーモジュール、背景紫がメインページ、背景色黄色がフッターモジュールになるのだが、途中で遠慮無くHTMLがぶった切られている。まあ、どこをどう分割するのかを理解したら作業に入ろう。

テンプレートの分割作業

1. ヘッダーモジュールテンプレートの作成

モジュールテンプレートの作成

テンプレートモジュールから[モジュールテンプレートの作成]をクリック

ヘッダーモジュールテンプレートの作成

[ヘッダー]と名前をつけ、既存のソースをカット&ペースト

以下ソース

<!-- オリジナルテンプレートのヘッダーからペースト -->
<mt:setvarblock name="html_head" prepend="1">
    <MTIf name="main_template">
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTLink template="atom"$>" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTLink template="rss"$>" />
        <MTUnless name="main_index">
<link rel="start" href="<$MTBlogURL$>" title="Home" />
        </MTUnless>
<$MTCCLicenseRDF$>
    </MTIf>
</mt:setvarblock>

<!-- 元のテンプレートからペースト -->
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard" lang="ja" xml:lang="ja">
<!-- HEAD --> <head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta name="generator" content="Movable Type <$MTVersion$>" />
<meta name="dc.title" content="<$MTBlogName encode_html="1"$>" />
<meta name="keywords" content="Accessibility, Web標準, W3C, Google, SEO, SEM, Movable Type, XHTML, CSS, 三菱Jeep" />
<meta name="description" content="システム・クリエイター 蒲生トシヒロのコラム。夢をかなえる時間は余りに少ない。思想が合わない人と接すれば時間を失なう。少ない人生だから、理解してくれる人と共に生きよう。だから、世界中の1%の人々へ。" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="author" content="Dakiny" />
<meta name="copyright" content="Copyright (c) 2005 Dakiny" />
<meta name="CC.license" content="http://creativecommons.org/licenses/by-nc-sa/2.1/jp/" />
<link rev="made" href="mailto:info@gamo.jp" />
<link rel="index" href="/index.html" />
<link rel="stylesheet" type="text/css" href="<$MTBlogURL$>styles-site.css" media="all" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$MTBlogURL$>atom.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<$MTBlogURL$>index.xml" />
<title><$MTBlogName encode_html="1"$></title>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />
<link rel="schema.CC" href="http://web.resource.org/cc/" />
<link rel="alternate" type="application/rss+xml" title="ROR" href="<$MTBlogURL$>ror.xml" />
<MTBlogIfCCLicense><$MTCCLicenseRDF$></MTBlogIfCCLicense>
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-178574-1";
urchinTracker();
</script>
</head>
<!-- HEAD終了 --> <!-- BODY --> <body> <!-- コンテナ --> <div id="container"> <!-- バナー --> <div id="banner">
<div class="pad">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
<ul class="skip">
    <li><a href="#content" title="このブログの説明を飛ばして本文に進みます">本文へジャンプ</a></li>
    <li><a href="#right" title="このブログの説明を飛ばしてメニューに進みます">ページメニューへジャンプ</a></li>
</ul>
</div>
</div>
<!-- バナー終了 -->

ソースをペーストし終えたら、何も考えず保存して終了。

2. フッターモジュールテンプレートの作成

フッターテンプレートモジュール

[フッター]と名前をつけ、ソースをカット&ペースト

以下ソース

<!-- サイドバー左 -->
<div id="left">
<div class="pad">
<div id="calendar">
<table summary="投稿されたエントリーへのリンク付き月間カレンダー"><caption><$MTDate format="%B %Y"$></caption><tr><th abbr="S">S</th><th abbr="M">M</th><th abbr="T">T</th><th abbr="W">W</th><th abbr="T">T</th><th abbr="F">F</th><th abbr="S">S</th></tr><MTCalendar><MTCalendarWeekHeader><tr></MTCalendarWeekHeader><td><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a> </MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></td>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar></table>
</div>
<h2>サイトについて</h2>
<ul>
<li>やるべきことはあまりに多い。決めた事を実現するには何よりもスピードが大切だ。過去にとどまり未知なる道を拒否する人に接すれば貴重な時間が失われ、精神的な疲労だけが残る。もはや40代後半、50も目前。残り少ない人生に夢の実現を賭けているから、理解ある人々と共に生きることにしよう。<br />
<em>だから、世界中の1%の人々へ</em></li></ul>
<ul>
<li><a href="http://b.hatena.ne.jp/entrylist?url=<$MTBlogURL$>"><img src="http://b.hatena.ne.jp/bc/<$MTBlogURL$>" class="bcounter" alt="「世界中の1%の人々へ」のはてなブックマーク数" title="「世界中の1%の人々へ」のはてなブックマーク数" width="75" height="14" /></a></li>
</ul>
<h2>作者について</h2>
<ul>
<li><img alt="ガモウトシヒロ" src="<$MTBlogURL$>archives/toshi.jpg" height="152" width="152" /> <br />
<strong>蒲生 トシヒロ</strong><br />
ハンドル:Dakiny<br />
生年月日:1959年9月2日 A型<br />
出  身:岐阜県岐阜市<br />
職  業:システム会社経営、システムデザイナー、マークアップエンジニア<br />
最終学歴:拓殖大学中退<br />
性  格:曲がったことが大嫌いで、仕事には厳しい職人気質。誰にでも言いたいことをいい。人にはよく変わり者と言われる。<br />
信  条:勉強するも仕事するも遊ぶが如し、さすれば本物<br />
夢   :南の島で童話作家になること。<br />
VoxURL:<a href="http://dakiny.vox.com/" target="_blank">http://dakiny.vox.com/</a><br />
アドレス:<a href="mailto:&#103;&#97;&#109;&#111;&#64;&#105;&#116;&#45;&#112;&#114;&#111;&#46;&#99;&#111;&#46;&#106;&#112;">&#103;&#97;&#109;&#111;&#64;&#105;&#116;&#45;&#112;&#114;&#111;&#46;&#99;&#111;&#46;&#106;&#112;</a></li>
</ul>
<h2>参加プロジェクト</h2>
<ul>
<li>・<a href="https://sourceforge.jp/projects/tinymce-ja/" target="_blank">Sourceforge.Jp TinyMCE Japan</a> Administrator</li>
<li>・<a href="https://sourceforge.jp/projects/tinymce-for-mt/" target="_blank">Sourceforge.Jp TinyMCE for Movable Typeプロジェクト</a> Administrator</li>
<li>・<a href="http://websig247.jp/" target="_blank" title="WebSig24/7(ウェブシグ・トウェンティーフォーセブン)">WebSig24/7</a> Moderator</li>
<li><a href="http://sourceforge.jp/" target="_blank"><img width="96" height="31" alt="SourceForge.jp" class="zero" src="http://sourceforge.jp/sflogo.php?group_id=2230" /></a></li>
</ul>
<h2>会社</h2>
<ul>
<li> <img alt="ITプロフェッショナル" src="<$MTBlogURL$>archives/office.jpg" height="114" width="152" /><br />
<a href="http://www.it-pro.co.jp/" target="_blank"><strong>有限会社ITプロフェッショナル</strong><br />
</a>W3C準拠、アクセシビリティ、ユーザービリティをテーマとするWebシステム会社。<br />
スタッフは社員というより仲間という存在で、よい仕事をしようと知恵を出しあってる。<br />
<a href="http://www.sixapart.jp/" target="_blank">シックスアパート社</a>のプロネット会員で、現在はMovable Typeによる構築や、W3C勧告に基づいたマークアップエンジニアリングが業務の中心。</li>
</ul>
<h2>車</h2>
<ul>
<li> <img alt="三菱JEEP J53" src="<$MTBlogURL$>archives/jeep.jpg" height="114" width="152" /><br />
<strong>三菱JEEP J53</strong><br />
存在感があり、タフな車である。 オーナーにもタフさを要求するので、憧れだけでは乗り続けることはできない。<br />
エンジン音や風切音は騒々しいし、振動が多く乗り心地も悪い。パワステもエアコンもなく、夏は暑く冬は寒い。<br />
実用にはほど遠いが、それでも!私はこの車を愛する。</li>
</ul>
<h2>カメラ</h2>
<ul>
<li> <img alt="SONY Cyber-shot DSC-F717 &amp; DSC-F828" src="<$MTBlogURL$>archives/digicame.jpg" height="114" width="152" /><br />
<strong>SONY Cyber-shot <br />
DSC-F717 &amp; DSC-F828</strong><br />
同じメーカーなのに性格の全く異なる2台のデジタルカメラ。<br />
DSC-F717は誰でも、きれいに撮れる愛嬌のある性格。<br />
DSC-F828は高機能だが、使い手を選ぶ気むずかしい性格。<br />
それぞれに一長一短があり、用途により使い分ける。 </li>
</ul>
</div>
</div>
<!-- サイドバー左終了 --> <!-- サイドバー右 --> <div id="right">
<div class="pad">
<!--
<h2>Search</h2>
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<p><input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">サイト内の検索</label><br />
<input id="search"  class="fo" name="search" size="20" value="Keyword" tabindex="1" /><br /></p>
</form>
-->
<p><a href="http://mt4lp5.cssnite.jp/" target="_blank"><img src="http://mt4lp5.cssnite.jp/banner_mt4lp5_160-160.gif" alt="2008年4月5日開催、MT4LP5" width="160" height="160" /></a></p>
<!--blog_ajax_json_search.js start-->
<h2>Search</h2>
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>blog_ajax_json_search.js"></script>
<form action="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt',
document.getElementById('search_box').value );">
<p><input type="text" id="search_box" value="" />
<input type="button" id="search_button" onclick="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" onkeypress="javascript:blogAjaxJsonSearch( '<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" value="検索" /><br />
キャッシュ使用 <input checked="checked" name="ASuseReadCache" id="ASuseReadCache" type="checkbox" /><br />
Powered by <a title="暴想" href="http://java.cocolog-nifty.com/blog/" target="_blank">暴想</a></p>
</form>
<!--blog_ajax_json_search.js end-->
<h2 class="module-header">Download</h2>
<div class="px12">
<ul>
<li><a href="<$MTBlogURL$>tinymce/" target="_blank" title="TinyMCE fro Movabel Type">TinyMCE for MT</a></li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_typeajyaxmt/" title="Ajaxを利用したMT用高速検索システム">MT用高速検索システム</a>(MT3.3,MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_4_movable_type_41fckeditor/" title="FCKeditorカスタムキットVer.1">FCKeditorカスタムキットVer.1</a>(MT4.1)</li>
<li><a href="<$MTBlogURL$>archives/movable-type/movable_type_41_fckedito_cu