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

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

Posted

ナビゲーションとスペーサー画像にトラックバックをいただきました。

『透明spacer.gifをアンカーに』は、使用方法を間違えると問題ありのようです。

有限会社ユニバーサルワークスさんのコラムが紹介されていた。こちらのサイトは、以前、別のBlogでも紹介している。

第29回　自治体サイトWebアクセシビリティ調査2005を終えて（上）（2005年9月1日掲載）では、さすが清家さんと思うところがある。

もうひとつ、特殊な発展形としては、上記の読み飛ばしリンクが透明gifであることに有頂天になった制作者が、この小手先のテクニックを駆使して、トップページ全体に不可視のナビゲーションを付けまくるタイプがある。うっとうしさ満点。それやるなら、先に見出しの要素を付けとけよと言いたい。

第29回　自治体サイトWebアクセシビリティ調査2005を終えて（上）（2005年9月1日掲載）

見出しやリストなどの適切な文書構造があってこそアクセシビリティです。

ひとつ勘違いしていたのは･･･

第13回　スキップのテクニック　（2004年7月1日掲載）

私：ページの一番上（読み上げの最初）に置くのはやめてね。

制作：どうして？

私：ページに入ってすぐエンターキーを押せというのは酷ではないか！やってみな。

制作：なるほど。

私：いちいちシフト＋Tabで戻らないといけないわけよ、もううんざり。タイトルタグの直後は聴き逃しやすいし、そうそう、音声ブラウザのデフォルトではタイトルタグはそのページに入ったとき1回しか読み上げないから、ページの一番上にはもう1回ページ見出しを書いておいてもらえるとうれしいね。

第13回　スキップのテクニック　（2004年7月1日掲載）

h1の後にスキップを設置しました。それでは、h1には何が適切なのでしょうか。<h1>要素の扱い | Web標準Blogで質問が掲載されていました。

構造的にマークアップを進めていく場合、<h1>で括るのにふさわしいものとして「a.サイト共通のタイトルや企業名称」と「b.そのページのユニークなタイトル」のうち、どちらがより適切でしょうか。

<h1>要素の扱い | Web標準Blog

ところで、MovableTypeのh1はデフォルトではサイトのタイトルとなっています。（このBlogもphpによりincludeしていますのでサイトのタイトルです。）改善の必要がありそうですね。

Posted

IEBlogより：お使いのCSSハックを一掃してください | Web標準Blog

IEBlogは本日付で開発者に対し、IE7のStrict（厳格）モードにおいて機能しなくなるCSSハックの数々を「一掃する」呼びかけを掲載しました。
IE開発チームを手助けすることに興味があろうとなかろうと、次のことを考えてみてください。ソースコードのレビューは、悪いCSSハックの代わりに良いCSSハックを使うことのできる箇所を見極めるうえで、役立つかもしれません。以下の場合においても、レビュー（そしていくつかのドキュメントも？）は、あなたを助けるかもしれません。

久しぶりにcss-discussを見に行ってみると・・・

This hack is DEPRECATED and should not be used due to the imminent release of IE 7. See [the official IE blog] for details.
このハッキングを推奨しない、IE7の差し迫っているリリースのため使用するべきではありません。 詳細のための公式のIEブロッグを見てください。

ページ幅を固定していた頃のスタイルシートはMovableTypeのbase-weblog.cssにも使用されているStarHtmlHack等色々なCSSハックを使用していましたが、現在のリキッドレイアウトでは、CSSハックは不要となり削除しました。 XHTMLコードもdivの多用を避け、シンプルに！

Posted

先日、公開した【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する
Posted

WCAG 2.0のためのCSSテクニック

一般的にはすべてのフォームコントロールに視覚的なラベルを付与するのが最善ですが、そのコントロールを囲っているテキストの記述そして/あるいはそのコントロールが含んでいるコンテンツ次第では、視覚的なラベルが不要な場合があります。しかしながらスクリーンリーダのユーザは、コントロールを耳にしたときにその目的が理解できるよう、個々のフォームコントロールに対し明確にラベルが付けられていることを必要とします。ラベルはposition: absoluteを指定するか、heightおよびwidth値を0にしoverflow:hiddenを指定するか、あるいはdisplay:none を指定することにより、表示しないようにすることができます。これらのテクニックはラベルが目の見えるユーザに対して表示されることを防ぎますが、スクリーンリーダーはそのラベルが非表示であっても読み上げるでしょう。ブラウザ側でCSSが無効化されていれば、すべてのユーザに対しラベルが表示されます。

一般的な音声ブラウザだと思われているホームページ・リーダー3.01はdisplay:noneを全く読み上げないので、ラベルの存在がわからない。（3.04は未確認）

そうなると読み飛ばしリンクにも使用できない。position: absoluteが現実的な手段のようです。

Posted

先日のエントリー【MovableTypeの小技（微技）】において、以下のようなご指摘をいただきました。

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか？

ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。

アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia（インフォアクシア）』 でもナビゲーション読み飛ばしリンクとして使用されています。

<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>

このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。

勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。

Posted

display:noneは検索エンジンスパムであるという俗説があります。また、スタイルシートにdisplay:noneを記述したためにインデックスから削除されたという事実もあまり聞きません。

Yahooで当サイトのCSSを検索してみると結果に現れました。

ちなみにGoogleではインデックスされていないようです。
しかし、インデックスされてるから削除の対象になるというものでもなさそうです。

当サイトもGUIとナビゲーションを両立させるためにdisplay:noneを多用しているので、今後のYahooの動向には十分注意する必要がありそうです。

Posted

ネット見出し無断使用に賠償命令　著作権認めず　控訴審 | asahi.com 10月6日

インターネット上の記事の見出しを別のサイトで無断で使われたとして、読売新聞東京本社がサイト運営会社「デジタルアライアンス」（神戸市）を相手に、計２４８０万円の損害賠償などを求めた訴訟の控訴審判決が６日、知財高裁であった。塚原朋一裁判長は読売側の請求を全面的に棄却した一審判決を変更。「無断かつ営利目的で見出しを使い、社会的に許される限度を越えている」としてデ社の不法行為を認め、１カ月あたり１万円、計約２４万円の損害賠償を命じた。

ネット見出し無断使用に賠償命令　著作権認めず　控訴審 | asahi.com 10月6日

ネットワーク上の著作権について――新聞・通信社が発信する情報をご利用の皆様に | 日本新聞協会

最近、新聞・通信社が新聞や電子メディアで発信する記事・写真などの情報を、インターネット上などで無断利用する事例がかなり目に付きます。無断で利用する人の多くは著作権問題があることに気が付いていないか、気が付いていても「個人のページに載せるのだから」「営利を目的とするわけではないから」といった理由で、「認められるだろう」と安易に考えているようです。
　しかし、新聞・通信社が発信するほとんどの情報には著作権があります。利用のルールは、インターネットなどの電子メディアの上でも、基本的には紙の上の場合と変わりありません。新聞・通信社が発信した情報を、インターネットなどの電子的なメディアで利用を希望される場合には、必ず発信元の新聞・通信社に連絡、ご相談くださるようお願いします。

ネットワーク上の著作権について――新聞・通信社が発信する情報をご利用の皆様に | 日本新聞協会

各社配信のRSSを自社（または個人）Webサイトに掲載するのは著作権侵害とも考えられるようです。今回の事件は無断で自己の営業に使用できないとの明確なルールが確定したものと思います。

RSSは配信元に了解を得て掲載するか、個人利用にとどめておくべきです。

Posted

先のエントリー【MovableTypeの小技（微技）】には、やはり不具合がありそうです。

音声ブラウザに対応しいても、追記のないエントリーに対して、【ここから続き】のスペーサー画像（0px）が挿入されます。本文を読み終わった後に【ここから続き】まで読み上げてしまいます。
とりあえず、Lynxにて表示させてみたのですが、本文の最後に表示されています。

音声ナビゲーションとして【ここから続き】を挿入したい場合には、MTEntryIfExtendedを利用し、追記のあるもののみに対して、【ここから続き】を挿入するようにするべきではないでしょうか。

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

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>

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

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

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

Posted

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

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

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

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

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

Posted

アクセシビリティを考えてみると、全てはここに行き着く。

Web Content Accessibility Guidelines 2.0

全般的な目標は、現在そして将来にわたって、想定しうる最も広範囲な利用者にとって認知、操作および理解可能であり、なおかつ利用者が使用している様々な支援技術と互換性のあるWebコンテンツを制作することである。基本的原則は以下の通りです。

  • コンテンツは認知可能であること
  • コンテンツのインターフェイス要素は操作可能であること
  • コンテンツの内容およびコントロールは理解可能であること
  • コンテンツは現在および将来のテクノロジーで利用できるよう十分に互換性が確保されていること
Posted

Tags