タグ「StyleCatcher」が付けられているもの

MovableType 3.3 Base Web標準テンプレートベータ

MovableType 3.3ベータ用の Base Web標準テンプレートを作ってみました。

powered by @style

StyleCatcherが使えるように、前回のMovableType 3.2 Base Web標準テンプレートと同様の仕様となっていますが、MovableType 3.2 Base Web標準テンプレートでは無視していたエントリーアーカイブテンプレートにおけるコメントフォームにvalueを指定しました。

XHTML 1.0 Strictのテンプレートも作成の予定です。

現在はMovableType 3.3がベータの状態ですのでテンプレートの公開・配布が出来ません。MovableType 3.3が公開される2006年6月27日までお待ちください。

Movable Type 3.3 ベータ2

Movable Type 3.3 ベータ1では有料テンプレートがうまく適用できるか心配で、デフォルトテンプレートを細部まで確認していなかった。本日公開されたMovable Type 3.3 ベータ2をいじってみた。

テンプレートでの最も大きな違いは、メインページ以外でもサイドバーが存在することだ。
エントリーアーカイブには【About】の見出しの下に以下のような記述がある。

About

他にも多くのエントリがあります。メインページやアーカイブページも見てください。

【たくさんのエントリが無かったら困りますね...】

もう一つはメインページのエントリータイトルにエントリーアーカイブへのリンクがある。見出し(h2)の見た目もこのリンクによってメインページとエントリーアーカイブでは大きく違っている。

タグが利用できますが、アットスタイルの【Simple Style】も含めて3.2までのスタイルキャッチャーを利用した場合には、タグがリスト(li)で縦に並ぶことになります。デフォルトのようにdisplay: inline;を利用して横並びにしたほうがよさそうです。

タグ

タグをクリックすると、mt-search.cgiを利用して表示されるので、検索テンプレート内容が大きく変わっている。

あるサイトで会員向けに無料ダウンロードが決まっているMovableType 3.2 Base Strict テンプレートMovableType 3.2 Base Web標準テンプレートと同様の3.3向けのテンプレートを作らなければ...

Movable Type 3.3 ベータ

早速、アットスタイルの最新のテンプレート(050)を適用してみました。

mt33.png

3.3からは検索結果のテンプレートがdefault.tmplからsearch_results_template.tmplに替わり、複数のブログを作成した際にも簡単に適用できるようになったようです。
*default.tmplをsearch_results_template.tmplにリネームして、default_templatesディレクトリにアップし、更新するだけで利用可能です。

アットスタイルでは、default.tmplとsearch_results_template.tmplの両方を(同じものなんですが…)を用意する予定です。

メールフォーム

アットスタイルのMovableType 3.2 テンプレート @Style2.0バージョンではお問い合わせのメールフォームCGISYNCK GRAPHICAさんの【メールフォームCGI Jcode版】を利用しています。

このメールフォームCGI Jcode版は設置も簡単で、CGIとJSファイルをアップして属性を変更、後はテンプレートに適切な情報を記述するだけという、テンプレート配布などに最適な物です。

実はテンプレートをご購入いただきました方から、「良いメールフォームCGIがないか」と相談を受け、SYNCK GRAPHICAさんに配布されているものを利用したくお願いしたところ、快く了解していただきました。

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

*エントリー中にお問い合わせを作成する場合にも利用できます。お問い合わせのメールフォームにお困りの方はご相談ください。

pre要素

無料テンプレート配布ページでコードの表示をtextarea要素のreadonly属性を利用してマークアップしていた。コピーする際に簡単なのでtextarea要素を使用していたのだが、最近になって気なり始めた。やはりpre・codeでマークアップしなければ構造上間違いである。

ところが、私はCSSを書く際に水平タブ文字を空白文字としている部分がかなりあり、このままではpre要素に変更が出来ない。

9.3.4 Preformatted text: The PRE element

The horizontal tab character

The horizontal tab character (decimal 9 in [ISO10646] and [ISO88591] ) is usually interpreted by visual user agents as the smallest non-zero number of spaces necessary to line characters up along tab stops that are every 8 characters. We strongly discourage using horizontal tabs in preformatted text since it is common practice, when editing, to set the tab-spacing to other values, leading to misaligned documents.

9.3.4 Preformatted text: The PRE element

400個程ある全ての水平タブ文字をスペースに書き換えた。

TinyMCE Plugin for Movable Type Ja

(有)ITプロフェッショナルさんのTinyMCE Plugin for Movable Type Ja プラグインを入れてみた。
ボタンがたくさん付いて、エントリー画面がこんなに賑やか!

TinyMCE Plugin for Movable Type Ja

WYSIWYGエディタはWindows98時代のIE5.5のおまけソフトFrontPage Express位しか弄った事が無いので、「どうか?」と聞かれてみても・・・ うんうん、確かに、ボタンだけで簡単に編集できる。

Wordと同じような感覚で編集が出来そうです。「字下げ」はblockquoteなのか・・・どうしてもソースを見ないと気がすまない性格は、しょうがないですね。

Remember Meが見つかりません

最近アクセスログを見ていると、「Remember Meが見つかりません」との検索フレーズが目立つ。MovableType 3.2以降用のテンプレート配布は数少なく、未だ3.171以前の対応のサイトが多いからでしょうか。

アットスタイルでは有料テンプレートは全て3.2ですが、無料テンプレートは3.2のデフォルトを改善したものしかない為に3.171以前のテンプレートを3.2以降で使用できるようSix ApartよりRemember Meをテキストとしてダウンロードしてください。

作成方法

  1. テンプレート名:Remember Meの新しいモジュールを作成する
  2. モジュールの内容にコピーしたRemember Meの内容をペーストする

mt-db-convert.cgi

このブログも2005年5月より開始いたしましたが、データーベースがBerkeleyDBのまま運用していました。テンプレート公開ブログが20を超えるくらいからエラーが頻発するようになり、データーベースを変更してみることにしました。

別のブログは、XREAでMySQLを利用しておりますが、3.2になったことですしこちらではSQLiteを利用します。Ogawa::Memorandamt-db-convert.cgiを使い、5分程度ですべて完了。

SQLiteに変更後、このエントリーが最初の再構築です。(今からSQLiteを体感いたします。)そろそろ、MTPaginate.plも使わないといけませんね。

Template Backup and Refresh

テンプレート配布サイトを調べているうちにおかしなことに気付いた。ほとんどのサイトがTemplate Backup and Refreshプラグインの使用を解説していない。

たとえば・・・

管理画面よりテンプレート一覧画面を表示し、「テンプレートジャンル」に対応したタブをクリックし、対応するテンプレートを探して上書き保存してください。その際、書き換え前のソースを残したり上書きの際にペーストし忘れたりしないように注意してください。

ペーストして、テンプレートを適用したとすると、これ以降Template Backup and Refreshの利用ができなくなるので、デフォルトテンプレートに戻す際は大変なことになる。また適用する際にもTemplate Backup and Refreshを利用すれば、全ての操作は、FTPと数回のクリックで済んでしまう。

テンプレートの変更はTemplate Backup and Refreshを利用しましょう。

Nucleus CMS Skin Contest

Nucleus CMS Skin Contest

Nucleus CMS is proud to present its first ever Skin Design Contest!

Wouter "karma" Demuynck, founder and primary developer of the Nucleus CMS has generously offered $600 USD in total prizes for the first ever Nucleus CMS Skin Design Contest!

Nucleus CMS Skin Contest

Nucleusのスキンコンテストが始まります。賞金は40ドルから140ドルとあまり多くないのですが、応募してみる価値あり?

This division is for designers familiar with or would like to learn Nucleus' skins and templates system. Entrants must submit a fully working skin in a single .zip file that can be downloaded and imported by users.

Nucleus CMS Skin Contest

NucleusやWordPressではスキン・テンプレートのコンテストが行われ、その後テンプレートはユーザーがダウンロードして利用できます。

MovableTypeのStyleCatcherは簡単にスタイルシートを適用できるのですが、StyleCatcher自体がプラグインとなっており、その設置もパスなどの設定があり不慣れな方にとっては容易ではありません。
スタイルシートやテンプレートの適用がもう少し簡単だったら、こういうのも可能かもしれませんね。

配布する側もそちらの方がやりやすいのですが・・・

Nucleus CMS Skin Contest

Nucleus CMS Skin Contest

Nucleus CMS is proud to present its first ever Skin Design Contest!

Wouter "karma" Demuynck, founder and primary developer of the Nucleus CMS has generously offered $600 USD in total prizes for the first ever Nucleus CMS Skin Design Contest!

Nucleus CMS Skin Contest

Nucleusのスキンコンテストが始まります。賞金は40ドルから140ドルとあまり多くないのですが、応募してみる価値あり?

This division is for designers familiar with or would like to learn Nucleus' skins and templates system. Entrants must submit a fully working skin in a single .zip file that can be downloaded and imported by users.

Nucleus CMS Skin Contest

NucleusやWordPressではスキン・テンプレートのコンテストが行われ、その後テンプレートはユーザーがダウンロードして利用できます。

MovableTypeのStyleCatcherは簡単にスタイルシートを適用できるのですが、StyleCatcher自体がプラグインとなっており、その設置もパスなどの設定があり不慣れな方にとっては容易ではありません。
スタイルシートやテンプレートの適用がもう少し簡単だったら、こういうのも可能かもしれませんね。

配布する側もそちらの方がやりやすいのですが・・・

MovableType 3.2 でのテンプレート適用方法

先日、公開した【MovableType 3.2 Base Web標準テンプレート】の適用方法をダウンロードページに追加しました。基本的にバックアップを取り、ダウンロードしたテンプレートをFTPするだけでOKです。これにあわせてファイル名も変更しました。

このBlogにも記載しておきますので、よろしくお願いいたします。

テンプレートの適用方法

  1. FTPクライアントで default_templatesディレクトリにある18のテンプレートのうち、 以下のテンプレートをダウンロードしバックアップを取る。
    • main_index.tmpl
    • master_archive_index.tmpl
    • category_archive.tmpl
    • datebased_archive.tmpl
    • individual_entry_archive.tmpl
  2. search_templatesディレクトリのdefault.tmplをダウンロードしバックアップを取る。
  3. 解凍済みのフォルダ内に以下のテンプレートをdefault_templatesディレクトリにアップする。
    • main_index.tmpl
    • master_archive_index.tmpl
    • category_archive.tmpl
    • datebased_archive.tmpl
    • individual_entry_archive.tmpl
  4. ブラウザで管理画面にログインし、テンプレートの編集を選択する
  5. メインページとアーカイブページのチェックボックスにチェック を入れ「その他の操作」 のドロップダウンメニューから「テンプレートを更新する」 を選択。 「Go」 ボタンをクリックする
  6. 更新を確認し、戻る
  7. アーカイブタブをクリックしエントリー・アーカイブ、カテゴリー・アーカイブ、日付アーカイブの全てのチェックボックスにチェックを入れ「テンプレートを更新する」を選択して 「Go」 ボタンをクリックする。
  8. 更新を確認しサイトを再構築する
  9. default.tmplをsearch_templatesディレクトリへFTPする

MovableTypeの小技(微技)

MovableTypeをAnother HTML-lint gatewayで検証した場合、【<div> と </div> の間が空です。】や【<a> と </a> の間が空です。】と指摘されます。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<$MTEntryMore$>
</div>

ここに0pxのスペーサー画像を挿入します。スペーサー画像はMovableTypeにはじめから用意されています。

MovableType 3.171の場合

<div id="a<$MTEntryID pad="1"$>more">
<img src="<MTCGIPath>images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

MovableType 3.2の場合

<div id="more" class="entry-more">
<img src="<MTCGIPath>mt-static/images/spacer.gif" alt="ここから続き" width="0" height="0" />
<$MTEntryMore$>
</div>

これでAnother HTML-lint gatewayをごまかすことが出来ます。

spacer.gifは【トップへ戻る】等のナビゲーションアンカーにも使えますので重宝します。

【追記】

小夜鳴鳥様よりご指摘いただき、本Blogを以下の通り修正いたしました。

<MTEntryIfExtended>
<div id="a<$MTEntryID pad="1"$>more">
<$MTEntryMore$> </div>
</MTEntryIfExtended>

音声ブラウザなどの読み上げ対応を検証しました後、改めてご報告いたします。

不具合もありそうです。次のエントリー・【ここから続き】のスペーサー画像 もご参照ください。

関連するエントリー:ナビゲーションとスペーサー画像

MovableType 3.2のテンプレート

やっと、MovableType 3.2 Base Weblogテンプレートの解析に取り掛かった。スタイルシートにはWin IEやMac IEにも対応させるような小技が見られますが、かなりひどい出来です。NucleusのDefaultスキンのほうがよっぽどよい。

今まで通りのトップページのみ2カラムですが、サイドバーにはブロックを作り、装飾を加えている。こんなものは望まない。posted回りも複雑になっている。

シンプルで手の加えやすいものが最善ではないのか?

文字サイズは、全て固定されている。IEなどの一部のブラウザで文字サイズを変更できないのではアクセシビリティ ガイドラインから大きく外れ、時代に逆行している。

この状態から作り直すと大変。
今までのテンプレートを修正する方向で行きます。

AccessibleでStrict

1columnテンプレート
昨日公開の1columnテンプレートは、究極ともいえるのではないでしょうか?

GUIでの見た目はよくありません。

スタイルシートを切ってみるとよくわかるのですが、h1にすぐ下にナビゲーションリンクを設定して、それぞれのエリアへスムーズに移動できるようにしました。

通常はWebInspectorのみのアクセシビリティの検証ですが、aDesignerの非常に厳しいチェックを行い、合格いたしました。音声ブラウザでも十分読み取れるページ構成となっています。

公共性の強いサイト・利用者の年齢層が高いサイトなどにご利用いただきたいと思います。

企業向けMovableTypeテンプレート

いろんなところのMovableType構築サービスを調べてみたのですが、Validなテンプレートは数少ないようです。

XHTML1.0なのにタグを閉じてなかったり、たくさんの問題が・・・

http://www.w3.org/MarkUp/2004/xhtml-faqによると

Can I just put the XML declaration on top of existing HTML documents? Can I intermix HTML 4.01 and XHTML documents?
(XHTML に移行するには)現在あるHTML文書の先頭にXML宣言を入れるだけでいいんでしょうか? また、文書中の記述においてHTML 4.01とXHTMLを混在させてもいいでしょうか?

http://www.w3.org/MarkUp/2004/xhtml-faq

No. HTML is not in XML format. You have to make the changes necessary to make the document proper XML before you can get it accepted as XML.
ダメです。HTMLはXMLの形式を取っていません。文書をXMLとしてアクセスさせる前に、HTML文書を XML に適合するように変更しなければいけません。

http://www.w3.org/MarkUp/2004/xhtml-faq

そんな訳で、企業のサイトに使用してもよいくらいのデザインを少々加えたStrictなMovableTypeテンプレートを制作いたしました。

Web標準 MovableType テンプレート 003

Iframeに泣く

只今、XHTML 1.0 StrictのMovableTypeテンプレートを製作中です。
今夜、大体のところが出来たので、Land.toサーバーの規約どおりに広告を張ってみました。

ところが広告タグはIframeだったので、XHTML1.0Strictには使えない。

そうだった、私が頼み込んで、どうにかTransitionalで使用できるようにしてもらったんだった。

また明日、XREAに移します・・・

3Column3テンプレート完成

5月まで当サイトにて使用していた3段カラムの装飾を全て削除したテンプレートです。本文・サイドバーのHTML記述順序。リキッドデザインのためサイドバーに多くのBlogPartsを挿入してもメインの幅は充分にあります。
カスタマイズ素材としてご利用ください。

3Column3テンプレート

2Column Flowerご利用の方へ

2Column Flowerご利用いただいている方へご案内いたします。

2Column Flowerのスタイルシート以外のテンプレートにおいて、エントリーの日付フォーマットに誤りがありましたので以下のように修正をお願いいたします。


%Y年 %e月 %B日

%Y年 %m月 %e日

現在公開中のものは修正がすんでおります。
よくわからない場合には、全てのテンプレートを修正をお願いいたします。

この場でお詫びいたします。
ご迷惑をおかけいたしますが、よろしくお願いいたします。