Movable Type 3.3 テンプレート(XHTML 1.0 Strict)

Movable Type 3.3 テンプレート(XHTML 1.0 Strict)

Posted at May 11,2007 2:00 AM
Tag:[MovableType, Template, WebStandards, XHTML]

当サイトで配布中の Movable Type テンプレートを 3.3 用にバージョンアップしました。新しいテンプレートは下記の「Movable Type テンプレート」のページからダウンロードしてご利用ください。

Movable Type テンプレート

主な変更点は下記の通りです。

1.XHTML 1.0 Strict

これまで配布していたテンプレートのXHTML 1.0 文書型は「XHTML 1.0 Transitional」でしたが、今回「XHTML 1.0 Strict」に変更しました。

XHTML 1.0 Strict では XHTML のお作法が XHTML 1.0 Transitional より少し厳しくなります。例えば引用を示す blockquote 要素では、その直下にインライン要素・テキストを記述するのではなく、ブロックレベル要素(p 要素など)を記述することになります。ブラウザではブロックレベル要素が欠落しても問題なく表示されますが、XHTML 1.0 Strict のお作法に少しずつ慣れていくと良いでしょう(このサイトは XHTML 1.0 Transitional ですが)。

この変更に伴って下記の修正も実施しました。

  • form 要素に fieldset 要素追加
  • textarea 要素に初期値設定(エントリー・アーカイブ)

2.各アーカイブページの title 要素を「記事名+ブログ名」に変更

これまで各アーカイブページの title 要素は「ブログ名+記事(アーカイブ)名」で表示されるようにしていましたが、SEO を考慮して「記事名」が先頭に表示されるよう変更しました。タイトルやアーカイブ名に検索キーワードが含まれていると有利です。

3.サイドバーの XHTML マークアップ変更

div 要素を多用していたサイドバー、および各メニューリストのマークアップを定義リスト(dl/dt/dd)に変更しました。(X)HTMLでは文書の構造を明確にするためのもので、無意味に div を多用することは推奨されていません。この点に関しては反省を踏まえて見直しを行ないました。

4.float 解除を after 擬似要素に変更

これまで固定レイアウトの float による流し込み解除は br 要素に clear プロパティを与えておりましたが、適切なマークアップではありませんでしたので、after 擬似要素による流し込み解除に修正しました。

関連記事:CSS の after 擬似要素で回り込みを解除する

5.フォントサイズを % 指定に変更

px 指定だったため、IE6 での文字サイズ変更が有効にならなかったのですが、% 指定に変更することで有効になります。参考サイトは下記です。ありがとうございました。

また JavaScript によるフォントサイズ変更が多少簡単に設定できるようになります。

関連記事:Slider によるフォントサイズ変更でアクセシビリティを向上させる

この変更により、デフォルトのフォントサイズはこれまでよりかなり大きくなっています。これまでのフォントサイズを再現するには IE6 で「小」にしてください。デフォルトのフォントサイズを変更したい場合は、スタイルシート冒頭の

body {
    font-size: 100%;
}
html>body {
    font-size: 12pt;
}

の赤色部分を変更してください。他で指定している部分はこの値の相対値として変動します。ちなみにこれまでのテンプレートと近いデフォルト表示をするには、

body {
    font-size: 83.3%;
}
html>body {
    font-size: 11pt;
}

にしてみてください。

6.line-height の単位を削除

line-height は行間を指定するプロパティです。これまでは % 指定を行っていましたが、このプロパティに単位を与えると、子孫要素のフォントサイズを変更すると、期待する行ボックスにならないとのことです。
良い例が「タグクラウド」で、line-height に単位を与えていると、大きな文字が現われた時、フォントサイズによっては小さな文字に重なり、小さな文字のリンクが有効にならない可能性があります。

参考サイトは下記です。ありがとうございました。

7.エントリータイトルにパーマリンクを設定

これまでエントリー本文下の投稿時刻にのみパーマリンクを設定していましたが、ユーザビリティおよびSEO(内部リンクには意味のある文言があう方が良い)を考慮し、エントリータイトルにもアンカーを追加しました。

8.エントリータイトルの目印を border プロパティに変更

ある意味このテンプレートのトレードマークだった「●」印から border プロパティによる罫線に変更しました。

9.pre 要素用 CSS 追加

プログラムコード等を表示する場合を考慮して、pre 要素用の CSS を追加しました。

10.バナーの class 属性名変更

先人の方々の意見を参考に「banner」から「header」に変更しました。

11.カレンダーのマークアップおよびセレクタ名変更

thead および tbody を追加。またセレクタ名が混沌としていたので全面的に見直しました。

12.追記部分の MTEntryIfExtended タグを MTIfNonEmpty に変更

3.3 では MTIfNonEmpty が推奨されているので変更しました。

13.エントリー画像用CSS設定削除

エントリーに表示する画像を想定して CSS を設定していましたが、左上に表示する場合しか対応していなかったので削除しました。

14.コメントエリアの div 要素整理

コメント部分のマークアップはデフォルトテンプレートの構造をある程度継承していましたが冗長な div 要素を削除しました。なおコメント・トラックバックに関してはサイドバー並みのマークアップ見直しはできておりません。予めご容赦ください。

15.コメントアウトされたマークアップをMTIgnoreで括る

コメント・トラックバックのポップアップ画面用のアンカーを簡単に切り替えられるよう、コメントアウトした状態で記述していましたが、冗長なマークアップとして残ってしまうのを避けるため、MTIgnore を利用して、ページに表示されないように変更しました。

16.その他

あまり大がかりな変更を行うと、これまでのカスタマイズ記事も大幅に修正しないといけなくなるため、例えばSEO的に有利な、3カラム固定レイアウトで中央カラムを XHTML 文書の先頭にする、というような変更は行っておりません。
また、左右サイドバーのスタイルに対応する links-left / links-right といった属性名も、同様の理由によりそのままの名称にしています(文書構造にデザインを示す単語を用いるのが適切でないことは理解しています)。

関連記事
トラックバックURL


トラックバック

Movable Type Template from PARADISE CLUB
小粋空間様にて、配布されている 「Movable Type」 テンプレートをバー... [続きを読む]

Tracked on May 12, 2007 9:10 AM

3カラムにしました from 匠悟録
またしても、小粋空間さんのテンプレートを使わせていただきました。 でもねぇ、in... [続きを読む]

Tracked on May 20, 2007 4:27 PM

Movable Type 3.35に引越し作業中 from White Wing version2.0
小粋空間さんの「Movable Type 3.3 テンプレート(XHTML 1.... [続きを読む]

Tracked on June 12, 2007 10:25 PM

Googleサイトインデックス時間差 from Y乃助
しばらく悩んでいた、Google検索だが、その道のエキスパート 小粋空間のyuj... [続きを読む]

Tracked on June 15, 2007 11:44 PM

Movable Type 3.35に引越し作業中 from White Wing version2.0
小粋空間さんの「Movable Type 3.3 テンプレート(XHTML 1... [続きを読む]

Tracked on August 26, 2007 4:30 PM
コメント

こんばんは、yujiroさん 
テンプレートの作成お疲れ様です。

記事タイトルでは WordPress と同じ仕上に替わったのですね
まだ、全部は理解していませんが昨日記事を読ませて頂きました。

色々参考になります
何時も、ありがとうございます。

[1] Posted by mituru : May 15, 2007 1:05 AM

>mituruさん
こんにちは。
トラックバックありがとうございます。
ちなみにフォントサイズ辺りの設定等、WordPress 版よりさらに進化しています。

[2] Posted by yujiro : May 16, 2007 1:52 AM

いつもテンプレートありがとうございます、大変重宝して使わせていただいてます。
今回の3.3-xhtml1.0-Strict、待っていましたのでさっそく使わせていただいてるのですが、template_3.3_utf8のzipとlzhの両方ですが、index/ のmaster_archive_index.tmplがStrict版ではなくて、transitional版が入っています。それを入れますとアーカイブ・ページの画面で組ずれが起こります。これは何か意図があってmaster_archive_index.tmplだけTransitionalなのでしょうか?よろしくご教授下さい。

[3] Posted by Kazuo KOBAYASHI : June 2, 2007 11:28 PM

>Kazuo KOBAYASHIさん
こんばんは。
ご利用&ご指摘ありがとうございました。
アーカイブミスです。申し訳ございませんでした。

先程入れ替えましたので、再度ダウンロード願えますでしょうか。
それではよろしくお願い致します。

[4] Posted by yujiro : June 3, 2007 3:25 AM

お忙しい中にさっそく対応してのアーカイブ入れ替え、
さっそくダウンロードさせていただきます。
ありがとうございました。

[5] Posted by Kazuo KOBAYASHI : June 8, 2007 8:27 PM

>Kazuo KOBAYASHIさん
こんばんは。
ご利用ありがとうございます。
また何かございましたらご連絡ください。
ではでは!

[6] Posted by yujiro : June 11, 2007 12:36 AM

こんにちは、
以前、スタイルシートでお世話になったものです。その切は有難うございました。

現在、色々な方?のシートを参考にカストマイズしております。
ただ、少し焦った事態になってしまい、お伺いします。

こちらのエントリーシートでは「記事名+サイト名」の記述になっているかと思います。

当方のサイト内でのキーワードを、Google検索した場合 「サイト名」だけになってしまう、かなりマズイ状態となってしまいました。

Googleβモバイル版は造りが違うと思うのですが、ここではタイトル名が出ます。

とすると、ping送信先に問題があるのか?テンプレートに問題があるのか?設定に問題があるのかの何れかだと想像しているのですが、ちょっとわからない状態です。
二日ほど調べてみたのですが…無念な結果です

現在、title…の記述 (エントリーアーカイブ) は小粋空間さまの設定にしております。

長文申し訳ありません。できれば、ご教授ください。

[7] Posted by マコ♂ : June 14, 2007 12:06 PM

>マコ♂さん
こんにちは。
お世話になります。
ご質問の件ですが、そのキーワードでヒットしたページがトップページなのか、エントリー・アーカイブなのか分からないので、具体的な検索キーワードをお知らせ願えますでしょうか。
それではよろしくお願い致します。

[8] Posted by yujiro : June 14, 2007 1:14 PM

>yujiroさんへ

早速のご返信有難うございます。かなり途方にくれていました。

検索キーワード

上記でワタシが、愚かに修正しているのは、3-1?3-4以外全部デス(ウッホ

スミマセン(汗。変なキーワードでして…。

ご指摘通り、エントリーアーカイブにヒットせず、トップページを指してしまっているようです (Google。

http://makotoda.s53.xrea.com/archives/2007/06/10190729.php

本来は、テンプレート選び:Y乃助

と出て欲しいところなのですが…。

いつも初歩的な質問で申し訳ありません。

これは改善できるのでしょうか?

[9] Posted by マコ♂ : June 14, 2007 4:11 PM

>マコ♂さん
こんにちは。
分かりました。
投稿してから日が経っていないので、Google の検索対象としてインデックスされていないと思われます。
一番古い記事の任意のキーワードで検索してみてください。
それではよろしくお願い致します。

[10] Posted by yujiro : June 14, 2007 4:38 PM

>yujiroさんへ

こまめに見ていただいて、本当に有難いです。助かります。

一番古い記事は、仰る通り、Googleに登録する前に書いた記事だったので、検索がうまくヒットすると勝手に予想していました。

その後、ジタバタ5枚のテンプレートや、アーカイブを弄っていた経緯があったので、これはマズイ!と思い、先日、一回アーカイブフォルダーを削除して、再作成しました。

>投稿してから日が経っていないので、Google の検索対象としてインデックス
>されていないと思われます。

ということは、日にちが経過するとインデックスされるということなのでしょうか?

FC2ブログも行っているのですが、ここでは比較的速くに、記事タイトル+サイト名になったのですが、これはMTとレンタルブログサーバーの違いと考えれば宜しいのでしょうか?

またしても長文で申し訳ありません

では失礼いたします

[11] Posted by マコ♂ : June 14, 2007 5:21 PM

>yujiroさんへ

お粗末な展開で申し訳ありませんでした

通常版Googleにて、違う検索ワードを入れると 記事タイトル+サイト名になっているものがありました。

ご指摘通り、サイトインデックスの時間差攻撃のようです。

低レベルなお話にお付き合いいただき、申し訳ありませんでした(汗 汗。

[12] Posted by マコ♂ : June 14, 2007 9:58 PM

>マコ♂さん
こんにちは。
数日経てばヒットするかもしれません(Googleの社員ではないので確約できませんが)ので、お待ちください。

[13] Posted by yujiro : June 15, 2007 1:40 PM

>yujiroさんへ

本当に初歩的質問にお答えいただき、感謝の言葉がみつかりません。
時間差で、記事名+サイト名になったり、サイト名+記事名になるGoogleさんの面白い展開になりましたwww

今日は、半角マイナス5以上を記事+コメント等にしていると、インポートで失敗するフィーバーで、暑い日を過ごしておりました(FC2)

あと恐縮なのですが、家のサイトでは「 MTカスタマイズ法収集ブログ」さまのテンプレートとこちらのテンプレートをミックス?した状態になっています。

そこで、こちらのバナーを指定外の場所に設定したのですが、問題ありますでしょうか?

では、今後もどうぞ宜しくアホを可愛がってください(^^;

[14] Posted by マコ♂ : June 15, 2007 11:54 PM

>マコ♂さん
こんばんは。
全然問題ありません。
ご自由にカスタマイズしてください!

[15] Posted by yujiro : June 17, 2007 11:55 PM

MT3.3用テンプレート使わせていただきました。
ありがとうございます。

調べてもわからないことがあったので、
質問させてください!

トップページとカテゴリーアーカイブとマンスリー
アーカイブの一部のページで
右サイドバーの項目がセンタリングされてしまいます。

左サイドバーのように左揃にしたいのですが・・・
いろいろと試してみましたが、直し方がわからないので
おしえてください。

(画像がはみだしているのは気にしないでください^^;)

[16] Posted by urakibi : September 17, 2007 5:17 PM

たびたびすみません。

上記の症状は
エントリー文をセンター揃えにしたくて
<center>タグをつかったページに
出ているようです。

サイドバーのセンタリングになっているところに
<div align="left">を入れると直ったみたいなのですが
こんな方法でいいんでしょうか?

Movable Typeでは他のブログのように
エントリーをセンター揃えにする方法はありますか?

[17] Posted by urakibi : September 18, 2007 8:59 PM

>urakibiさん
こんばんは。
ご質問の件ですが、スタイルシートに

.entry-content {
    text-align: center;
}

を追加してみて頂けますでしょうか(動作を確認した訳ではないので期待通りでない場合は再度ご連絡ください)。
それではよろしくお願い致します。

[18] Posted by yujiro : September 20, 2007 1:52 AM

お返事ありがとうございました!

私の方法だと
コメントもセンター揃えになってしまって
読みづらかったのですが、
教えて頂いた方法で直すことができました!!

ありがとうございました!

[19] Posted by urakibi : September 24, 2007 8:19 AM

>urakibiさん
こんにちは。
ご連絡ありがとうございました。
うまく直ったようで良かったです。
ではでは!

[20] Posted by yujiro : September 25, 2007 11:40 AM

yujiroさん、こんにちは!

またまたですが、おしえていただけませんか?
エントリー全体のセンター揃えは以前に教えていただいたのですが、
「エントリー(記事)の文章は左揃えで、画像だけセンター揃え」
なんてできますか?

1.
.entry-content {
text-align: left;
}
にして画像を<center></center>で囲んでみましたが
画像も文も左揃えになりました。

2.
.entry-content {
text-align: left;
}
を削除して
.entry text {
text-align: left;
}

.entry img {
text-align: center;
}
を入れてみましたが、両方左揃えになりました。

.entry-contentみたいに「-」が必要なんでしょうか?

画像はエントリー内の画像すべてがセンター揃えになってOKです。
何か方法はありますか?
よろしくお願いします。

[21] Posted by urakibi : November 5, 2007 5:59 PM

>urakibi さん
こんばんは。
ご質問の件ですが、スタイルシートに下記を追加してみてください(下記を丸ごと追加しても、同じセレクタにプロパティのみ追加しても、どちらでも結構です)。

.entry img {
    display:block;
    margin-right:auto;
    margin-left:auto;
    text-align: center;
}

この回答はエントリーでも取り上げたいと思います。
それではよろしくお願い致します。

[22] Posted by yujiro logo : November 9, 2007 7:56 PM

>yujiroさん

回答ありがとうございました!!
追記してみたら、できましたっ!!
とってもうれしいです。ありがとうございました!
ブログがどんどん自分の理想に近づいていくので楽しいです。
これからも、たくさん質問すると思いますがよろしくお願いします。

[23] Posted by urakibi : November 10, 2007 7:29 PM

>urakibiさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようでよかったです。
ではでは!

[24] Posted by yujiro logo : November 10, 2007 10:47 PM

yujiroさん、こんにちは。
いつもすみません^^;

上記で「エントリ−内のすべての画像をセンタリングする」
方法をおしえていただいたんですが、
部分的に横並びでセンタリングしたい時はどうすればいいでしょうか。

例えば、ブログのエントリー最下部の「♥ 応援して頂けると嬉しいです ♥」のすぐ上の2つの画像です。

他にも小さな画像(■)を続けて書くと、
│   ■   │       
│   ■   │ となりますが 

│   ■■   │ ←このようにしたいのです。

あと前回の回答に「エントリーでとりあげる」とありましたが
どこに掲載されているのか、わかりませんでした…
お時間のある時におしえてください。
よろしくお願いします。

[25] Posted by urakibi : April 4, 2008 3:21 PM

>urakibiさん
こんばんは。
ご返事遅くなってすいません。
ご質問の件ですが、下記のように全体をp要素で括って、p要素とimg要素にstyle属性を追加してください。

<p style="text-align:center">
<a href="http://blog.with2.net/link.php?514248" target="_blank"><img style="display:inline" src="http://mmmix.sakura.ne.jp/aquarist/hidalank.jpg" width="150" height="45" border="0" alt="人気blogランキングへ" /></a><a href="http://aquarium.blogmura.com/tropical/" target="_blank"><img style="display:inline" src="http://mmmix.sakura.ne.jp/aquarist/migilank.jpg" width="150" height="45" border="0" alt="にほんブログ村 観賞魚ブログ 熱帯魚へ" /></a>
</p>

エントリーはまだ未公開でした。すいません。
それではよろしくお願い致します。

[26] Posted by yujiro logo : April 15, 2008 12:57 AM

できました!! いつもありがとうございます!

[27] Posted by urakibi : April 21, 2008 1:04 PM

>urakibiさん
こんばんは。
ご連絡ありがとうございました。
うまくできたようで良かったです。
ではでは!

[28] Posted by yujiro logo : April 24, 2008 12:56 AM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)