Home > makoto Archive

makoto Archive

技術評論社版 実践 Web Standards Design の正誤表の更新について

こんにちは、 hxxk.jp の真琴です。 改めて正式な記事でお知らせします(既に私の個人サイトの方ではフライングで記事を発表してしまっています)が、現在新たなバージョンの刊行に向けて全てのページの再チェックを行っています。

その再チェックの中で、技術評論社版 第 1 刷の正誤表に漏れを発見したので、正誤表を更新しています。 また、そのために 2 刷でも修正されるべきところがそのままとなっていた点があったため、あわせて技術評論社版 第 2 刷の正誤表を公開しました。 購入いただいた方には大変申し訳ありませんが、奥付をご確認いただき、該当箇所を正誤表の記述と読み替えていただくようお願いいたします。

なお、誤りの部類ではない、第 1 刷発行以降に更新された仕様や、ブラウザのバージョンアップへの対応情報は更新情報提供ページを参照してください。 また、九天社版の方は正誤表としては作成していませんが、第 1 刷・第 2 刷から第 3 刷期間における仕様変更に伴う差し替えページを公開しています。

ソースコード部分については、ページごとのソースコードのサンプルおよびサンプルファイルの一括ダウンロードを常に最新版で公開しています。 紙面との対照表は作成していませんが、九天社版も技術評論社版も、最新のサンプルソースを参照するようにしてください。

実践 Web Standards Design の増刷および通算発行部数 15,000 部突破のお知らせ

こんばんは、 hxxk.jp の真琴です。 技術評論社版の実践 Web Standards Design の初版第 2 刷ができあがりました ! 今日、私の手元に見本誌が届いたところです。

実は増刷自体は先月から話があっていたのですが、一定の形ができるまでは告知しないほうがいいかなと思い、情報公開のタイミングを今か今かと待っていました。 第 1 刷の書店在庫も関係してくるので、一律に店頭の書籍が 2 刷に入れ替わるわけではありませんが、早いところでは 5 月の連休前後に店頭に並ぶだろうとのことです。

今回は改訂ではなく増刷ということなので、第 1 刷から大きな変更は加えていません。 ブラウザのバージョンアップや仕様の更新への対応は引き続きこのサポートサイトで行っていく予定ですので、第 1 刷も第 2 刷ともどもよろしくお願いします。

ちなみに再刊行前から通算して数えると、これが 5 刷目になります。 当初の企画段階から、一回出して終わり、ではなく長く活用してもらえる本を、という目標を掲げていたので、その目標が順調に達成できていることに感謝を申し上げたいと思います、ありがとうございます。

実は、再刊行の第 1 刷が発売された時点で発行部数が通算 10,000 部を超えていたのですが、当時は部数のことはすっかり失念していました。 今回の第 2 刷で、発行部数は通算 15,000 部を超えることになります。 私はこの本以外で出版に関わったことがないのでそれが多いのか少ないのか分かりませんが、これからも自分のできる範囲でのサポート等を行っていきたいと思います。

技術評論社版 実践 Web Standards Design の P.428-P.431 の更新情報

こんばんは、 hxxk.jp の真琴です。 2008 年の第 1 刷では、対応ブラウザの確認のうち、 IE 8 は Beta2 を用いていたのですが、刊行後に IE 8 RC1 がリリースされています。 そこで、更新情報提供ページCSS Selectors test-suite テスト結果およびダイナミック擬似クラス対応状況一覧を掲載しました。 なお、第 1 刷の紙面との対照表は次の通りです。

技術評論社版の実践 Web Standards Design P.428-P.431 新旧対照表
ページ 紙面上の記述 最新の記述 備考
P.428, P.430 IE8 Beta2 IE8 RC1  
P.429, P.431 IE8 Beta2 : Internet Explorer 8 Beta2 IE8 RC1 : Internet Explorer 8 Release Candidate 1  
P.430 IE8 Beta2 の列の a:acitve の行 IE8 RC1 の列の a:acitve の行  
P.430 IE8 Beta2 の列の :acitve の行 IE8 RC1 の列の :acitve の行  
P.431 MacIE の列の a:acitve の行 × MacIE の列の a:acitve の行 これはブラウザのバージョンアップではなく、正誤表に含まれていた修正です。
P.430, P.431 ::selection の行 削除 Selectors Level 3 の草案が 2009 年 3 月 10 日に更新され、 ::selection 擬似要素は削除されました。

このページ以外にも、 IE 8 RC1 のリリースによる変更点がありますので、随時この weblog で更新情報をお知らせしていく予定です。

技術評論社版 実践 Web Standards Design の正誤表

こんばんは、 hxxk.jp の真琴です。 刊行直後にチェックして公開しておくべきものだとは思いますが、技術評論社版 第 1 刷の正誤表を公開しました。

なお、誤りの部類ではない、第 1 刷発行以降に更新された仕様や、ブラウザのバージョンアップへの対応情報は更新情報提供ページを参照してください。 また、九天社版の方は正誤表としては作成していませんが、第 1 刷・第 2 刷から第 3 刷期間における仕様変更に伴う差し替えページを公開しています。

ソースコード部分については、ページごとのソースコードのサンプルおよびサンプルファイルの一括ダウンロードを常に最新版で公開しています。 紙面との対照表は作成していませんが、九天社版も技術評論社版も、最新のサンプルソースを参照するようにしてください。

実践 Web Standards Design P.054 の「 id 属性が指し示す範囲」のサンプルを追加しました

こんばんは、 hxxk.jp の真琴です。 実践 Web Standards Design インフォメーション & サポートページを見直していたら、ページごとのソースコードのサンプルの中に、追加で作っておいた方がいいな、と思ったページがあったので早速追加しました。 ( サンプルファイルのアーカイブも、それを加えたアーカイブに差し替えています。 )

解説や実際のソースは、当該サンプルページを見ていただければと思いますが、連載:実践Web Standards Designのススメ|gihyo.jp ... 技術評論社第6回 CSS3のセレクタを使用してみようで示したサンプルを書籍のサンプルにも活用した形になっています。

なお、実際のサンプルである 2-3-13-2.html では、 Selectors Level 3:target 擬似クラスを用いていますので、 Firefox 1-3 、 Opera 9 、 Safari 2-3 、 Google Chrome 、 Netscape 7 、Netscape Browser 8 などの対応ブラウザでなければ正しく表示されません。 制作者スタイルシートで用いる場合は、「対応ブラウザで見る場合は、未対応ブラウザより更に明確な区別を付けることができる」くらいの意識で用いると良いでしょう。 また、対応ブラウザを常用している人は、ユーザースタイルシートに組み込むと Web ブラウジングが快適になるかもしれませんね。

実践 Web Standards Design インフォメーション & サポートページを公開しました

こんばんは、 hxxk.jp の真琴です。 今日で技術評論社版の実践 Web Standards Design 関連の私の作業を一旦終えました。 本当は 11 月 29 日の発売に合わせたかったのですが、スケジュールが合わずに今日までかかってしまい申し訳ありません。 インフォメーション & サポートページを整理し、公開しましたのでお知らせします。

単なるサポートページだけでなくインフォメーションも含めているのは、これから購入を考えている人、および九天社版の実践 Web Standards Design を購入済みの人にも役に立てるようにという考えがあったからです。 購入を考えている人にはもくじサンプルページが判断材料になるのはもちろんですが、サンプルや関連 URI 一覧を購入者に限定せずに公開しているのは、九天社版の実践 Web Standards Design を購入いただいた方にも、今回アップデートした内容を掴んでもらえればと思っていたことが根っこにあります。

新装版にあたって新規に追加したページの内容を公開することは流石にできませんが、既存のページやサンプルで更新された分については、新規の購入を妨げないラインを探りながら公開させていただきました。

今回、技術評論社版の実践 Web Standards Design を再刊行できる運びになったのも、九天社版の実践 Web Standards Design を多くの方が購入していただいたことが土台になっているので、その方たちがインフォメーション & サポートページをご覧になって、その上で改めて技術評論社版を手に取っていただければいいなと思っています。

ちょっとだけ本音を漏らすと、見本誌が手元に届いた日でも、一般発売になって書店店頭に並んだ日でもなく、九天社版も含めた読者さん――あるいは未来の読者さんに、できる限りの補足情報をこの場でお届けできた今日という日が、私の中での区切りになっています。 今回購入していただいた方、以前購入していただいた方、これから購入してくれる方、刊行に際してご協力・ご意見・ご批判をいただいた方、本当にありがとうございます。

ホップ本の店頭在庫・オンライン在庫を確認する方法

こんにちは、 hxxk.jp の真琴です。 今日は技術評論社版の実践 Web Standards Design の発売日ですが、店頭への入荷は輸送距離の関係で地域差があります。

実践 Web Standards Design の再刊行のお知らせでも紹介した、書店在庫一括検索というサービスで書店在庫を確認すると良いでしょう。 以下のリンクは、都道府県ごとの検索結果ページにリンクしています。 (オンラインで在庫状況を提供している書店の情報を都度取得して表示するため、お探しになりたい都道府県を適宜表示するようにしてください。)

また、各種オンライン書店を活用するのも良い手段だと思います。

ところで、一部オンライン書店では何故か著者名から私の名前が無かったことになっているのが気になるのですが...... また、同じく一部オンライン書店では発売日が 2009 年 1 月になっているところがありますが、それはこの書籍の発行日が 2009 年 1 月 5 日になっているためだと思われます。 (ちなみに、発行日が実際に使われるのは、著作権使用料の支払時期の決定くらいでしょうか。 発行日はあまり読者さんには関係ない日付かもしれません。)

gihyo.jp 短期集中連載「第2回 ブラウザ毎のサイトチェック環境を構築しよう」が公開されました

こんばんは、 hxxk.jp の真琴です。 昨日、短期集中連載実践Web Standards Designのススメ第1回 ガイドブックの選び方が公開されましたが、今日は第2回 ブラウザ毎のサイトチェック環境を構築しようが公開されました。

複数のブラウザでサイトチェックをするというのは、現在の制作現場では基本となっていると思いますが、ブラウザの種類だけでなくそのバージョンの新旧も含めてテストをしたい場合の環境構築について書いています。

明日公開予定の第 3 回は、市瀬さん (3ping.org) が担当していますので、より実践的な内容の記事になります。 お楽しみに !

gihyo.jp 短期集中連載「第1回 ガイドブックの選び方」が公開されました

こんばんは、 hxxk.jp の真琴です。 技術評論社版の実践 Web Standards Design の発売にあわせ、 gihyo.jp にて短期集中連載をさせていただくことになったことは直前の記事でもお伝えしていますが、本日第1回 ガイドブックの選び方が公開されました。

あまり露骨な宣伝にならないよう、私自身の経験をもとに Web 制作のガイドブックをどのように選ぶべきかということ、その選び方を以ってなお実践 Web Standards Design をお選びいただければ、ということを書いています。 今回刊行される書籍は 2007 年 3 月に株式会社九天社から発行された「実践 Web Standards Design ― Web 標準の基本とCSS レイアウト & Tips」(以下、九天社版)を元に、最新の情報に差し替え、加筆・再編集した書籍です。 よって、九天社版と部分において内容が重複していることをご理解いただいたうえで、購入をご検討ください という性質を持った書籍ですので、選択の際にはそのことを踏まえていただくようお願いしています。

もちろん、単に同じ内容で再刊行するのではなく、既存ページには最新の情報を反映し、また追加したページもあります。 全てのページにおいて再度のチェック・検討を行った上での再刊行となっていますので、その上でお選びいただければ嬉しいです。

また、固い話ばかりではいけませんので、新装表紙デザインのちょっとした裏話も書いています。 昨年の刊行時には「真琴さんが表紙を決めたんでしょ ? 」と何度も言われたのですが、真相はいかに。

明日公開予定の第 2 回も私が担当しています。 書籍の内容分担も同じようになっていますが、まずは基本的なところを私が書いた後に、市瀬さん (3ping.org) と福島さん (Lucky bag::blog) の実用的な内容が登場しますのでお楽しみに !

gihyo.jp で短期集中連載をさせていただきます

こんばんは、 hxxk.jp の真琴です。 技術評論社版の実践 Web Standards Design の発売がいよいよ近付いています。

先ほど、編集担当から見本誌が出来上がったとの連絡が入りましたので、共著者の市瀬さん (3ping.org) や福島さん (Lucky bag::blog) の手元には明日にもいちはやく届くことと思われます。 ――や、別に私の手元には届かない、なんてことはなく、単純に物流における距離の壁というものがありまして......私もはやく見本を見てみたい !

今回の再刊行にあたってお世話になった方には、著者に送られる献本とは別に、技術評論社から直接見本誌が送られることと思いますので、よろしくお願いします。


見本誌が出来上がったことに浮かれて、本来のお知らせを忘れそうになりました。 今回、新しいホップ本の発売時期にあわせ、 gihyo.jp にて短期集中連載をさせていただくことになりました。

短期集中連載ということで、このお知らせを書いている最中も、まだ後の回の執筆は随時進行しています。 もちろん私だけが記事を執筆するわけではなく、それぞれ分担して執筆することになっているので、私自身市瀬さん (3ping.org) や福島さん (Lucky bag::blog) がどんな記事を書き下ろしてくるか楽しみです。

今日時点では、このリンクをクリックしてもまだ 指定されたページが見つかりません という表示結果になると思いますが、 2008 年 11 月 25 日から毎日 1 記事ずつ掲載されていく予定ですので、よろしくお願いします。

実践 Web Standards Design の書籍案内

Web Directions East で宣伝していただきました

こんにちは、 hxxk.jp の真琴です。 技術評論社版の実践 Web Standards Design ( 新ホップ本 ) を手がけてくださっている技術評論社の担当さんが、 Web Directions East に参加しており、会場にて新ホップ本の宣伝をしてきてくださいました ! 担当さんはメールの文中で「出来心で」と仰っていましたが、ナイスな出来心だと思います。

タイミング的にまだ見本誌が出来ていなかったので、ノートパソコン上にカバー画像を表示してヴァーチャル見本誌を作り、会場にいらっしゃった方に手にしていただいて写真を撮っています。 もちろん、次に掲載する写真に写っている方には PR に使う旨を伝えているとのこと。

kazuhito

@kazuhi.to の木達一仁氏。 株式会社ミツエーリンクスの取締役でもあります。

Eric Meyer

meyerweb.com の Eric Meyer 氏。 Web Directions East のカンファレンスにて State of the web を担当し、またワークショップ効率よく最適化するためのCSS上流講座も担当されています。

Shaun Inman

ShaunInman.com の Shaun Inman 氏。

Douglas Alan Schepers

Reinventing Fire の Douglas Alan Schepers 氏。 W3C Interaction Domain の担当者とのこと。

yuu

W3J.org | securecat's exblog の森田雄氏。 株式会社 ビジネス・アーキテクツの取締役/クォリティ・インプルーブメント・ディレクター、株式会社BAメガパワーズの取締役でもあります。

森田さんは 4 年前にお祝いの席で、木達さんは 1 年半前に出版記念の席で一緒にお酒を飲んだことがあるので、私の分身 (?) をこうしてお見せいただいて嬉しく思います。

技術評論社版 実践 Web Standards Design のカバー画像

こんばんは、 hxxk.jp の真琴です。 技術評論社版の実践 Web Standards Design のカバー画像を公開できるタイミングになりました !

  • 技術評論社版 実践 Web Standards Design

今回のカバー写真は photo.67.org の鞆岡 隆史さんの撮影によるもので、かつサッポロビール株式会社の北海道原料研究センターさんに写真素材のご協力をいただいています。

自分でビールを選べる状況のときはよくヱビスビールを好んで選んでいるので、サッポロビールさんが共著書に関わることになったことは個人的に嬉しいです。

技術評論社版 実践 Web Standards Design の書籍内容(もくじ)

こんばんは、 hxxk.jp の真琴です。 公開しても問題ない、ということでしたので、技術評論社から再刊行される実践 Web Standards Design の目次を公開します。

実践 Web Standards Design (九天社版、現在絶版) の方の目次は hxxk.jp の記事にて公開していましたが、今回の再刊行に伴う加筆訂正によって若干の変更があっていますので、改めて公開、ということで。

  1. 1 章 Web Standards の基本
    1. Web Standards とは
      1. (X)HTML+CSS を用いて Web リソースを作成する
        • [Column] HTML 5
      2. Web Standardsに従うメリット
        1. さまざまな UA へ同一のリソースで情報発信できる
        2. 共通ルールに従うことで再利用性が向上する
      3. 使用する (X)HTML や CSS のバージョン
        1. (X)HTML のバージョン
          • [Column] 主要モダンブラウザの CSS 2.1 対応状況
        2. CSS のバージョン
          • [Column] Acid2 Browser Test
  2. 2 章 (X)HTML の基本
    1. HTMLXHTML に共通して覚えておくべきこと
      1. id 属性と class 属性の違い
        1. id 属性の大文字・小文字の区別
        2. 数字から始まる class 属性値
      2. 見出しレベルの重要性
        • [Column] 見出しレベルのスキップ
    2. HTMLXHTML における違い
      1. SGML ベースか XML ベースか
        • [Column] XML という略語の表記にまつわるこぼれ話
      2. 要素の書き方
        1. 大文字・小文字の区別
        2. 開始タグ・終了タグ、空要素
      3. id 属性と name 属性
      4. Media Types について
        1. meta http-equiv による Media Types の指定
          • [Column] IE の問題点
      5. HTML 互換性ガイドライン
    3. (X)HTMLはまず文章ありき
      1. まずはマークアップのことを考えずに文章を書く
      2. その文章のタイトルは何か
        • [Column] title 要素にサイト名や会社名を入れる場合は前 ? 後 ?
      3. その文章の中で見出しにすべき部分は何か
      4. 見出しだけを抜き出して正しい目次になるか
      5. ブロックレベル要素でマークアップする
        • [Column] h1 要素にサイト名や会社名を入れる場合は全ページ共通 ?
        1. ブロックレベル要素とは
      6. インラインレベル要素でマークアップする
        • [Column] body 要素の直下にインラインレベル要素は配置できないのか
      7. body 要素の後に head 要素、 html 要素をマークアップする
      8. DOCTYPE は最終的に宣言する
      9. 必要に応じて XML 宣言をする
        1. XML 宣言の記述
          • [Column] なぜ暫定的に Strict DTD を宣言するのか
        2. XML 宣言の省略
        3. XML 宣言における IE 7 のバグ
          • [Column] 後方互換モードで解釈されるとどうなる ?
      10. マークアップ順序のまとめ
      11. (X)HTML による論理的なマークアップ
      12. div 要素による構造化
        1. XHTML 2.0による構造化
        2. XHTML 1.0による構造化
        3. 複数の h1 レベルの出現も許容
      13. id 属性はどの要素に対して指定するべきか
        • [Column] div class="section" で構造化する場合の副次的メリット
        1. id 属性が指し示す範囲
      14. head 要素内の記述について
        • [Column] 内部スタイルシートと外部スタイルシート
        1. head 要素内の内容を可視化すること
        • [Column] meta http-equiv によるコンテンツ内容の指定
  3. 3 章 CSS の基本
    1. これだけは守らなければならない書式
      1. CSS の大まかな構文
        1. @charset 規則
        2. @import 規則
      2. declaration block (宣言ブロック)
        • [Column] プロパティや値を記述する際に空白文字を含めてもよいのか
    2. 心がけるとメンテナンスしやすい書式
      1. 宣言の記述順の規則を定めておく
        1. 例1: CSS2 Specification に挙げられている順番で記述
        2. 例2:分類ごとに記述
      2. CSSの視認性を高める
        1. 規則集合の記述
        2. 規則集合におけるセレクタの記述
        3. 宣言の出現順序
        4. 宣言におけるプロパティの記述
        5. 宣言における値の記述
        6. コメントの記述
        7. @ 規則における注意点
          • [Column] @ 規則以外でもインデントを行う
        8. 特定のブラウザの仕様に対する配慮
      3. XHTML のモジュールごとに要素型セレクタを配置
      4. CSS の先頭にガイドラインをメモしておく
    3. CSS 管理のコツ
      1. 各種の値の形式をしっかり理解する
        • [Column] IE と inherit 値
      2. セレクタ、カスケード、継承の理屈をしっかり理解する
        1. セレクタ
          • [Column] 擬似要素と擬似クラスの記述上の区別
        2. 継承
        3. カスケード
          • [Column] 固有性における CSS2 と CSS 2.1 の違い
      3. 固定スタイルシート・優先スタイルシート・代替スタイルシート
        • [Column] IE の !important のバグ
        • [Column] 代替スタイルシートにおける Opera 7.x のバグ
      4. xml-stylesheet 処理命令
        • [Column] xml-stylesheet 処理命令を挿入する位置
      5. @import 規則を用いた複数の CSS の連携
      6. link 要素、 style 要素の media 属性と @media 規則
      7. ブラウザごとのデフォルトスタイルをリセット
      8. ベースとなるスタイルを指定する
        • [Column] 次世代の XHTML & CSS
    4. 視覚整形フォーマット
      1. ボックスモデル
        • [Column] IE のボックスモデルの解釈
      2. 包含ブロック
      3. 通常フロー
  4. 4 章 float プロパティを利用したレイアウト
    1. 寄せと流し込み
      1. 画像を寄せる
      2. 表を寄せる
      3. 見出しを寄せる
      4. フロートと周囲のボックスの関係
      5. 流し込みの解除
    2. 重なったブロックボックスにマージン
      1. 見出しと本文の列を分割したレイアウト
      2. ナビゲーションと本文の列を分割したレイアウト
    3. 複数フロートの横並び
      1. 画像を敷き詰めて表示する
      2. 横並びのタブ型ナビゲーション
      3. カラムレイアウトへの応用
    4. ネガティブマージンを利用したレイアウト
        1. 子供セレクタに対応しないブラウザ
      1. フロートするボックスの重なり順序
    5. float プロパティを利用したレイアウトの使い分け
      1. 「重なったブロックボックスにマージン」のレイアウト方法
      2. 「複数フロートの横並び」のレイアウト方法
    6. フロートしたボックスを含む親ボックスの高さの算出
      1. 親ボックスの高さを算出させる方法
        1. 後続の要素で float を clear する
        2. clear を指定できる要素がない場合
        3. 幅を明示的に指定できない場合
  5. 5 章 position プロパティを利用したレイアウト
    1. 指定できる 4 つの配置方法
      1. static-通常配置
      2. relative-相対配置
      3. absolute-絶対配置
      4. fixed-固定配置
    2. 絶対配置を利用したレイアウト
      1. カラムレイアウトへの利用
      2. 絶対配置の基点を変える
      3. 複数の基点を利用したレイアウト
    3. 固定配置を利用したレイアウト
      1. ナビゲーションを常に上部に表示する
      2. フレームのように表示するカラムレイアウトへの利用
      3. 固定配置に対応していないブラウザの対処
        • [Column] JavaScript で擬似的に固定配置を表現する
  6. 6 章 実践レイアウト
    1. レイアウトパターン
      1. 1 カラム フロート流し込み / float プロパティ
      2. 2 カラム フロート+重なったボックスにマージン / float プロパティ
      3. 2 カラム 複数フロート+重なったボックスにマージン / float プロパティ
      4. 3 カラム 左右メニュー複数フロート+重なったボックスにマージン / float プロパティ
      5. 3 カラム 右メニュー 2 カラム複数フロート+重なったボックスにマージン / float プロパティ
      6. 2 カラム 複数フロート / float プロパティ
      7. 3 カラム 複数フロート / float プロパティ
      8. 2 カラム 複数フロート+クリア
      9. 2 カラム 複数フロート+ネガティブマージン / float プロパティ
      10. 2 カラム 絶対配置+重なったボックスにマージン / position プロパティ
      11. 3 カラム 絶対配置+重なったボックスにマージン / position プロパティ
      12. 3 カラム 右メニュー 2 カラム絶対配置+重なったボックスにマージン / position プロパティ
    2. 複合レイアウトで情報を整理したブログページの制作
      • [Column] 見出しとデザイン
      1. XHTML 文書の制作
        1. 基本要素のマークアップ
        2. DOCTYPE の宣言と div 要素による構造の補強
      2. CSS ファイルのモジュール化
      3. ベースとなるスタイルの制作
      4. 主要なレイアウトの構築
        • [Column] IE の互換モードでのボックスのセンタリング
        1. div#content 内のレイアウト
          • [Column] IE 6 でフロートするボックスのマージンが増加するバグ
        2. div#main 内のレイアウト
          • [Column] フロートの入れ子による複雑なレイアウト
      5. 細部のスタイルの指定
        1. div#header 内のスタイル
        2. div.entry 内のスタイル
        3. div#headline 内のスタイル
        4. dl#subNavi 内のスタイル
          • [Column] Windows 版の IE 6 で li 要素の上下に隙間が生じるバグ
      6. フッターのスタイル
    3. ボックスを自由に配置したページデザイン
      1. XHTML 文書の制作
      2. ベースとなるスタイルの制作
      3. 主要なレイアウトの構築
        1. 絶対配置させるボックスの領域を作る
        2. h1 要素を通常フローから外して重ね合わせる
        3. インフォメーションの配置
        4. コンテンツメニューの配置
        5. その他のコンテンツメニューの配置
      4. ボタンメニューのスタイル
      5. フッター領域のスタイリング
  7. 7 章 XHTML&CSS Tips
    1. トピックパスのマークアップ
    2. outline プロパティによるドロップシャドウ
    3. Mac OS X の Dock 風ナビゲーション
    4. CSS による自動番号付け(カウンタ生成)
      • [Column] カウンタによる番号生成は構造とは別もの
      • [Column] カウンタを 1、 3、 5......としたい場合
      • [Column] IE 8 の対応状況について
    5. CSS でフォトギャラリー
      • [Column] スタックレベルのレート
    6. アイコンリモート表示メニュー
      • [Column] position プロパティの値
    7. CSS を使って画像をポップアップ表示
    8. CSS だけで動作するドロップダウンメニュー
    9. 背景画像を利用したロールオーバー効果
      • [Column] 背景画像を 1 つにまとめる理由
    10. visibility プロパティを利用して img 要素をロールオーバー
      • [Column] visibility プロパティによる不可視化
    11. さまざまなブラウザでフォントの見栄えを揃える CSS ライブラリ
    12. IE 6 以下での子供セレクタの使用
    13. 印刷用 CSS の作成
    14. line-height プロパティの指定値
      • [Column] 単位なしの指定はエラー ?
    15. 定義リストの dt と dd を横並びさせる
      • [Column] 非置換要素をフロートさせる場合
    16. 背景画像を利用して訪問済みリンクを一工夫する
    17. img 要素のサイズを CSS で指定
    18. position プロパティを利用して要素を画面中央に固定
    19. position プロパティでフッタを常に画面の下部に固定
    20. 行ボックスの高さで垂直センター配置
    21. 背景画像を利用した画像置換
      • [Column] outline プロパティ対応ブラウザに注意
      • [Column] CSS3 の生成・置換内容モジュール
    22. リンク先のファイルタイプを CSS で明示する
      • [Column] 草案 ( ワーキングドラフト ) である CSS3
    23. CSS でフォームをスタイリング
      • [Column] legend 要素に対する各ブラウザの対応
      • [Column] label 要素
    24. モダンブラウザ向けの CSS ハック
      • [Column] コンディショナルコメント
  8. Appendix
    1. DTD の読み方ガイド
      • [Column] XHTML 1.1 の DTD について
    2. DOCTYPE スイッチの一覧表
    3. CSS 2.1 の各プロパティリファレンス
    4. CSS3 で新たに定義されるセレクタ
      • [Column] :nth-child 擬似クラスと:nth-of-type 擬似クラスの使い分け

技術評論社版 実践 Web Standards Design の書籍情報の紹介

こんばんは、 hxxk.jp の真琴です。 実践 Web Standards Design が再刊行されることは既にお伝えした通りですが、書籍情報等の公開を行って良い状態になったのでお知らせします。

書名

実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips

ISBN

978-4-7741-3684-4

出版元

株式会社 技術評論社

著者
サイズ・ページ数

B5 変形判、 440 ページ ※状況によっては 448 ページになる可能性もあります448 ページで確定しました

定価

3,360 円 ( 本体 3,200 円 + 消費税 )

発売日

2008 年 11 月 29 日 ( 地域によって書店店頭に並ぶ日は異なります。東京都内では 29 日より早く並ぶ書店が存在するかもしれません。 )

ISBN が確定したので、オンライン書店では既に書籍ページが作成されているところもありますし、まだ作成されていないサイトでも、書籍ページの URIISBN から作成している場合は書籍ページの予定地を示すことができますね。

なお、九天社版のページ数は 436 ページとなっていましたが、技術評論社版では 440 ページ、場合によっては 448 ページとなります。 原稿書きとトラックダウン・マスタリングの例えを引きずるなら、再リリースにあたってボーナストラックを追加といった感じでしょうか。 また、単純にボーナストラックを追加しただけの再リリースではなく、既存のページも全て 2008 年 10 月末現在の状況に合わせて加筆訂正を行っています。 再リリースにあたってボーナストラックを追加するのに加え、全曲リマスタリングを施したアルバムを無事リリースできるよう、最後の仕上げに入っているところです。

新しい表紙の紹介や詳細な解説はまた次回以降に。

再刊行する実践 Web Standards Design の ISBN について

こんにちは、 hxxk.jp の真琴です。 先日、 1 冊だけ手元に残っていた実践 Web Standards Design お譲りしますということを書いていましたが、最終的に 45式の 4n5 さんに差し上げました。

無事配送されたとのメールをいただき、その文中にて「再刊行の際は ISBN は新しいものになるのですか ? 」 というご質問をいただきましたが、先に結論から言うと再刊行されるホップ本は以前の ISBN (4861671647 あるいは 9784861671647) とは違うナンバーになります

[第67回] ISBNコードのしくみと13桁への移行問題に詳しい解説がありますが、 ISBN の中の特定の部分は出版者ごとに割り振られていますので、今回の再刊行のように出版元が変更になる場合は出版者コードが変更になり、従って ISBN も変更になります。

なお、 [第67回] ISBNコードのしくみと13桁への移行問題 では 次の「949999」は出版者(社)コード,「08」はその出版社における書名コードで,合わせて8桁で管理されています とありますが、日本図書コード管理センター内の図書コード取得のご案内によると、 新規に登録される出版者は原則として出版者記号7桁(コード付与可能点数10点)または出版者記号6桁(コード付与可能点数100点)に限らせていただきます。 コード付与(使用)に期限はありません。 数年で100点以上の発行計画をお持ちの場合は電話などで別途ご相談ください。 のように、必ずしも出版者コードは 6 桁となるわけではないようです。

また、同じ書籍でも、版が変われば書名コードが変わるようです。 例えば大藤 幹さんが書かれた良質リファレンス本「詳解 HTML&XHTML&CSS 辞典」は現在第 3 版まで刊行されていますが、初版ISBN は 978-4-7980-0221-6 、改訂版ISBN は 978-4-7980-1003-0 、第三版ISBN は 978-4-7980-1602-3 となっています。 ( 秀和システムの場合は出版点数も多く、出版者コードは 4 桁になっていますね。)

ホップ本の打ち合わせと HEMEL オフ会

こんにちは、 hxxk.jp の真琴です。 9 月は祝日の関係で休日が多く、また休暇を全然使っていなかったので、この機会を使って 9 月 17 日から 22 日まで上京していました。 実践 Web Standards Design の再刊行に向けた出版社との打ち合わせ、また 3ping.org の wu さん、 Lucky bag::blog の e-luck さんとの打ち合わせを行い、再刊行の日までにできることを再確認してきたところです。

もちろん打ち合わせだけで帰ってはもったいないので、 wu さんと e-luck さんと打ち合わせた日は、そのまま BELGIAN BEER & FOOD Hemel -ヘイメル- でビールオフ会も開催しました。 著者 3 人に加え、 hamashun.com の浜 俊太朗さん、 INSTINCのおもちゃ箱の monbikke さん、 cube15 blog の fotus4 さんを交えて web 話に花を咲かせ......ではなく実は直接的に web を業務にしている人の方が少なかったので様々な話題が飛び交っていました。

そういえばもんじゃ焼きと iPod nano では 状況が許せばまた月島に行ってみようかなあ なんて言っていましたが、結局旅行の計画中にはそのことをすっかり忘れていました。 次回上京するときには忘れないようにしよう。

私はふだん福岡で仕事をし生活をしているので、東京などに出て行くことがあれば多くの人と会ってみたいと思っています。 大規模なオフ会や飲み会などを行えば「会う」という目的だけは達成できますが、ゆっくりとお話をすることができないので、どうしても小さな規模でお誘いをかけてしまいます。 こういったレポートを見た方でもし「こっちに来ていたなら会いたかった!」という方がいらっしゃれば、また上京する機会を作ると思うので、その折にはよろしくお願いします。


ところで、実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips (これ以降、文中ではホップ本と表記)の 3 刷見本が 1 冊私の手元に残っているのですが、なにぶん 1 冊しかないのでプレゼントにするにも難しいなあと思っているところです。

ただプレゼントするだけだとお金を払って買っていただいた方に申し訳ないですし、ホップ本のイメージイラストコンテスト(ほっぷ子を参考にしてもいいし、それ以外のイメージキャラクター、あるいはキャラではなくロゴなどでも可)をやって、そこから選ぶなんてどうかなあと考えたのですが、「誰も応募してこなかったっていう悲しい事態になるかもよ」とも言われて踏みとどまっているところです。

ホップ本が必要だけど、再刊行されるまで待てないという方でここをご覧になっている方がいらっしゃれば、 makoto[at]hxxk.jp までお知らせください。 もちろん、虫のいい話ではありますがホップ本のイメージキャラクターやロゴを私的に作ってみたい、という方がいらっしゃれば大歓迎です。

実践 Web Standards Design の再刊行のお知らせ

こんばんは、 hxxk.jp の真琴です。 今日は記事を 2 連発です。 原稿書きとトラックダウン・マスタリング実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips (これ以降、文中ではホップ本と表記)の出版元である株式会社 九天社の破産申し立ての件をお伝えしましたが、ホップ本の市中在庫も少なくなってきたようです。 (なお、現在は http://9-ten.co.jp/ のドメインは失効しており、 _neuve project_ の方が九天社(跡地)として書籍情報を再公開されています。ホップ本の書籍情報も再公開していただいています。)


ホップ本は発売当初より、一般書店での売り上げよりもオンライン書店での売り上げが大きかった印象があります。 もちろん、正確な販売分布を知らされたわけではないので、あくまで「印象」に過ぎないのですが。 発売当時に私が控えていたオンライン購入のリンクを辿ってみますと、

在庫状況はこのような感じになっています。 この記事を書く時点で調べたものですので、随時変動があっているとは思いますが、 Amazon.co.jp のマーケットプレイスに出品されたホップ本に最大で 14,500 円の値が付けられているのに驚きました。


では、一般書店の在庫状況はどうでしょうか。 ホップ本の中でも一部情報元にさせていただいた Liner Note の leva さんが書店在庫一括検索というサービスを提供していますので、それで調べてみましょう。

オンラインで在庫状況を提供している書店の情報を都度取得して表示するため、この記事を書いた後に在庫状況が変わる可能性が充分にありますが、ほとんどの都道府県にて在庫切れか、在庫があっても 1 冊のみというレベルでした。


この状況に気付いたのが今日だったので、慌てて担当者に尋ねてみると、公表して構わないとのことでしたので現時点の状況を公表します。

実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips は、 2008 年 11 月頃に、新たな出版社の力を借りて、再び刊行されます。 原稿書きとトラックダウン・マスタリング 元のテキストデータに再度目を通す ということを書いていましたが、再刊行のための作業だったのです。

ホップ本の初版第 3 刷が発行されたのが 2008 年 3 月で、その時点でもできる限りの加筆修正を行っていましたが、再刊行にあたっても加筆修正を行う予定です。 全リライトということではないので、「改訂版」と表して良いか分かりませんが、 11 月頃にどのような本が出来上がるか、私達も楽しみにしています。

現時点ではホップ本の市中在庫は少なく、前述の通りマーケットプレイスでは定価以上の価格が付いている現状でもありますが、近いうちに再び書籍の形でお届けすることができますので、現時点で入手したい、でもどこを探しても見当たらないという方は、秋の新鮮なホップが出来上がるまで今しばらくお待ちください。 もちろん、市中で熟成されているホップも現品限りですので、見かけられたら是非入手してくださいね。

もんじゃ焼きと iPod nano

こんばんは、 hxxk.jp の真琴です。 今回の話は実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips (これ以降、文中ではホップ本と表記)の執筆のきっかけ?の思い出話です。 気が付けば 3 連続で「○○と××」な記事タイトルになっていますが次回の記事は違うタイトル(の予定)です。 ホップ本の話だけど Lucky bag::blog の e-luck さんは登場しません、ごめんなさい。

ホップ本の執筆は、私の場合は 3ping.org の wu さんから執筆協力という形で持ちかけられました。 それが 2006 年の 5 月頃だったでしょうか。 その時の書籍のコンセプトは実際に刊行されたのと少し異なりますが、「よかったら、 CSS の Tips や最新情報に詳しい e-luck さんにも協力してもらおう」という話になって、 2006 年 6 月に東京に出向いて打ち合わせを行いました。

では、 wu さんから私に話が来たきっかけはなんだったのでしょうか? 刊行後にオフ会等でお会いした方に尋ねられると「実はもんじゃが取り持つ縁で......」と冗談めかして言っていましたが、私自身は実質的なきっかけは本当にもんじゃではないかなあと思っています。

執筆協力の話が来る前、 2 年前の春に、ふとしたきっかけで 3 泊 4 日の東京旅行を実施しました。 (その時のレポートは Tour "春に会いましょう" the Report に書いています。) 3ping.org の wu さんと会うのはこの時が 2 度目だったのですが、このもんじゃツアーで親睦が深まり、もんじゃ熱が冷めないままに私を思い浮かべていただいたのでは、と思っています。

こう書いておくと、きっと wu さんから「もんじゃだけじゃないよ!もんじゃ以前の web でのやり取りとかビールの飲みっぷりとかで決めたんだよ!」とフォローが入ることでしょう。 って、ビールの飲みっぷりはフォローになりません!

その後色々あって 2007 年春に無事ホップ本が刊行されることとなるのですが、 2006 年にもんじゃツアーを含めて 5 回上京をしていたのはそういう理由だったんですよ。 当時は上京しすぎというツッコミを方々からいただきましたが...... うん、もんじゃという文字を文中にちりばめていたら食べたくなってきました。 9 月に連休を取る予定なので、状況が許せばまた月島に行ってみようかなあ。


ところで、このホップ本のきっかけもんじゃツアーには届きたての iPod nano を持って行き、五反田駅前の歩道橋の階段で iPod nano を大手を振ってすっぽ抜けさせて落とすエクストリームスポーツを実施したのですが、落とした程度では故障には至らなかったので現在も順調に使用中です。

そんな私の愛機 iPod nano ですが、バッテリーに問題のある機種が確認されたようですね。

第1世代のiPod nanoをお使いでバッテリー過熱を感じられたお客さまは、AppleCare(顧客窓口)にて交換いたしますので、ご連絡をお願いいたします。 また、他の第1世代iPod nanoをお使いのお客さまで少しでもご不安を感じられた方も、AppleCareにご連絡ください。

とのアップル側からのニュースリリースがあっていますが、肝心の AppleCare への連絡先が同じページに記載されていません。 アップル、iPod nanoのバッテリー過熱問題に正式対応~AppleCareを窓口に交換対応へ:RBB TODAY (ブロードバンド情報サイト) 2008/08/20 のニュースを見てみると、 AppleCare の電話番号は 0120-277-535 のようです。 何で他社ニュースはちゃんと記載しているので自社ニュースは書いていないんでしょう......

ちなみにその電話番号で検索すると、Apple Store (Japan) - ご利用ガイド - iPodのご注文に関するご質問 - 盗難や紛失した場合はどうすればいいですか? がヒットします。 それによると、 AppleCare の受付時間は「月曜日から金曜日は 9:00-19:00 」、「土曜日・日曜日・祝日は 9:00-17:00」となっているようです。

アップル、iPod nanoのバッテリー過熱問題に正式対応~AppleCareを窓口に交換対応へ:RBB TODAY (ブロードバンド情報サイト) 2008/08/20 のニュースによると、 Apple Careに加入していないユーザでも対応する とのことなので、該当機種を持っている方は連絡先の参考にしてください。

オフ会とライブ

  • Posted by: 望月真琴
  • 2008年8月15日 23:23
  • Category: makoto
  • Tag: 雑記

こんばんは、 hxxk.jp の真琴です。 原稿書きとトラックダウン・マスタリングで weblog の記事を書くことを CD シングルのリリースとか、その活動から派生した本の発売を CD アルバムのリリースに例えたので、その話をもうちょっと引っ張ってみたいと思います。

weblog の記事を書いたり本を発売したりするのが CD のリリースなら、オフ会の開催あるいは出席っていうのはライブみたいなものかなあと強引に考えました。 例えば、昨年の 5 月に私が発案して六本木で開催したホップオアダイというオフ会は、一般に参加者を募集しなかったのでシークレットライブあるいは招待制ライブと言えるかもしれません。 (その後、ホップオアダイ - the Report というレポート記事を書いて、その内容を公開しています。 これも何だかライブアルバムのリリースっぽい。)

そういった、サイト管理者の冠を付けるワンマンライブなオフ会もあれば、ざまぁwwwソニック 08 みたいな、特定の誰かを冠にしていない( @arigamin が冠かもしれませんが、私は違うと捉えています)イベント的なオフ会もあるわけです。

  • オフ会などのイベントには全く参加せず、 weblog や本の執筆に専念する人(個人的に ZARD や大黒摩季のイメージ)
  • オフ会などのイベントに積極的に参加し、 weblog や本の執筆頻度を上回る人(いわゆるライブバンド?)
  • オフ会などのイベントに積極的に参加し、かつ weblog や本の執筆もハイペースでこなす人(精力的な活動)

オフ会の参加頻度を基準にざっと分類してみると、こんな感じでしょうか。 現在の hxxk.jpLucky bag::blog3ping.org は定期的な weblog の更新がなかなか行われておらず、かと言って頻繁にオフ会に出ているわけではないので、「 CD リリースもライブも無いし何をして過ごしているんだろう」と思われるかもしれません。

そういう時に、バンドから離れてソロ活動やサイドプロジェクトがあれば「それに取り組んでいるんだなあ」と分かりますし、そんな大掛かりなものでなくても、テレビ出演やラジオ出演があれば、リスナーに存在を示せるわけです。 そういうことで、この lh3.jp が、 3 人それぞれのメイン weblog に更新を行わない時でも、ライトな話題を書いて読者にアウトプットを示す場になれればいいなあと思っています。 というか、私が e-luck さんや wu さんが書くライトな記事を読んでみたいというのが正直なところです、ええ。


ところで、「いわゆるライブバンド」のくだりで私がイメージするサイト管理人で、ふと魔が差してまなめ オフ会で検索したら、あ、私は今日ので今年50回目のオフ会だったwwwという狙い通りの検索結果が出ました。 というかこれ、私がこの記事を書いている日の午前 1 時 30 分の post なんですね。 Google は仕事が早いなー。

まあまなめさんの場合は、むしろオフ会に参加しつつニュースサイトweblog の執筆をハイペースでこなしている精力の人が正解に近いと思いますが。

原稿書きとトラックダウン・マスタリング

こんばんは、 hxxk.jp の真琴です。 これまで私が 3 つの記事を書いていますが、サイトを構築しましただの WordPress から Movable Type Open Source に変更しましただのこんな設定をしましただの、お知らせ的かつ Web 的なネタから抜けきれていないものばかりですね。

Hello world! でも 読者への情報提供、あるいは Lucky bag::bloghxxk.jp3ping.org には書きにくい話題などをこちらに気軽に書けるような weblog になれば と(私の個人的な意見を)書いていますので、 Web じゃない雑文などもちょこちょこ書いていきたいと思います。 もちろん、実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips のことをしっかりと書いていくことも重視したいと思っていますが。

それでここからが今日の雑文なんですけれど、今の私が身を置いている状況って、例えるなら音楽活動に似ているんじゃないか、と最近思いました。 まあ待て、「いちいち例える意味が無い」とか、「違うよ、音楽とは全然違うよ」とか、「お前はいきなり何を言い出すんだッ」とかいう声は最後まで取っておいてください。

私は主にロックバンドの形をとっている音楽を好んで聴いているのですが、その状況に置き換えて考えると、ふだんはそれぞれ個人の活動の範囲で weblog の記事(例えるなら CD シングル)を発表し、ふとしたきっかけで市瀬さん・福島さんと組んで、多くの時間をかけて実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips という本(例えるなら CD アルバム)を発表し、光栄なことに現時点で 2nd プレスおよび 3rd プレスまでかかっている感じだなあ......と。

もちろん、この 3 人はあくまで原稿や図版などを作っただけであって、

  1. 原稿作成に至る前段階で企画を立案し、リリースまでのスケジュールを立てて私たちと契約等の交渉を重ねた人
  2. 私たちから上がってきた原稿や図版をチェックし、変な部分が無いか、もっと良くなる部分が無いか何度もやりとりを繰り返した人
  3. チェックを通った原稿や図版を組版に流し込み、ページ割や目次、索引などを構築する人
  4. 表紙や本文のデザインを行い、装丁を行った人
  5. 実際に印刷・製本を行った人
  6. 取次を通じて営業を行い、全国の書店に配本した人
  7. 配本が確定した書店に、取次から各書店へ配送した人
  8. そして、実際にお金を出して本を買ってくれた人

と、様々な人がいることによってこの本ができあがったのです。 (組版やデザインのあたりはこの順番で合っているかわかりませんが。) これって、いわゆる

  1. レコード会社との契約
  2. レコーディングされた音のチェック
  3. トラックダウン
  4. マスタリング
  5. ジャケット・ブックレット・盤面のデザイン
  6. プレス
  7. ディストリビューション
  8. リスナーが購入

という流れとほとんど同じだなあ、と。 場合によってはレコード会社との契約などをせずにインディーズで CD をリリースするバンドもいるでしょう。 その場合は Web サイト上でのプロダクトや、あるいは同人誌・個人出版などに置き換えるといいかもしれません。

私が好むアーティストの場合はまずバンドを組んでからライブ等で実力や人気を育て、一定の評価を得たところでソロ活動や新たなプロジェクト等へ移行......というパターンが多いので、それぞれ個人で動いていた連中が集まって組んだこのトリオとはそこがちょっと違うところですが。 (福島さんはトリオでの活動の後にソロアルバムをリリースしている、というのもなんだかバンドに例えたくなった一因です。)

なんで急にこの話を?と思われるかもしれませんが、以前似たようなことを書いていましたし、 hxxk.jp では正式に触れていませんでしたが、出版元である株式会社 九天社が破産申し立てを行っており、「自分たちが持っている権利はどの範囲までになるのか」という話をした際に、「あくまで自分たちはテキストデータ・画像データとしての原稿を作っただけで、トラックダウンやマスタリング、ジャケットデザインは行っていないから、組版や装丁の権利は無いだろう」みたいなやりとりをしたから雑文として書いておこうと思ったのです。

......ということは、元のテキストデータに再度目を通すのはどう例えるんでしょう。 ミックス前の 8 トラックないし 16 トラックの MTR で録音した音を再度聞きなおしている感じでしょうか?

MTOS のインストール直後の設定作業

こんばんは、 hxxk.jp の真琴です。 昨日の記事 システムを Movable Type Open Source に変更しました とお知らせしましたが、変更直後に行ったことを書き残しておきます。

これは Lucky bag::blog の e_luck さんや 3ping.org の wu さんにも変更点を明確にお伝えするという目的に加え、同時進行で全く別の weblog を身内で構築する必要ができたので、同じ手順を適用する際にラクをしよう、という利己的な目的もあります。 lh3.jp のベーシックな管理は私がやっているのですが、 hxxk.jp と同じく基本的な動機は「自分のため」です。 自分のために色々やってみて、その結果 e_luck さんや wu さんや、多数の読者さんのためになればいいかな、という感じでやっています。

作成にあたり最初に導入したもの
プラグイン
  • remove-ext-from-permalink 0.4 - 古いプラグインなので注意するよう書かれてありますが、 MTOS 4.1 でも大きな問題はなく使えるようです。
  • TagSupplementals 0.06 - 各記事の Related Entries を表示するために導入しています。
テンプレートの変更点(テンプレート名は mt.Vicuna 2.1.3 のものです)
  • インデックステンプレート
    • .htaccess
      • FTP で編集するのが面倒なのと、 <$MTTagSearchLink$> が引数付の URI なので、それを Rewrite するために作成。 RewriteRule ^tag/(.*)$ <$MTCGIPath$><$MTSearchScript$>?tag=$1&blog_id=1 [L] のように書くことで、 <$MTBlogURL$>tag/<$MTTagName$> というリンクでタグ検索ができるようになります。

  • アーカイブテンプレート
    • ブログ記事
      • <$MTInclude module="前後の記事へのリンク(シンプル)"$> の行を <$MTInclude module="前後の記事へのリンク(タイトル付き)"$> に変更しています。「ブログ記事」アーカイブテンプレートと「ブログ記事の詳細」モジュールテンプレートの両方で <$MTInclude module="前後の記事へのリンク(タイトル付き)"$> を使用すると id 属性値の重複となるので、「前後の記事へのリンク(シンプル)」モジュールテンプレートの内容を「前後の記事へのリンク(タイトル付)」モジュールテンプレートのものにし、 id="flip1" を削除しています。これは要改善。

  • テンプレートモジュール
    • エントリー詳細内部
      • </div> の行の上に、

        <ul>
          <li>Related Entries
            <ul>
              <MTRelatedEntries lastn="10"><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
              </MTRelatedEntries>
            </ul>
          </li>
        </ul>

        という行を加えています。この行は TagSupplementals プラグインを導入してから加えないと、エラーが発生します。

    • フッター
      • <li>Powered by <a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a></li> の行を <li>Powered by <a href="http://www.movabletype.jp/opensource/">Movable Type Open Source <$MTVersion$></a></li> に変更しています。

    • ブログ記事のメタデータ
      • <MTIfNonEmpty tag="MTEntryCategory"><li class="category"><MTEntryCategories glue=" | "><a href="<$MTCategoryArchiveLink$>" title="<MTCategoryLabel> Index"><MTCategoryLabel></a></MTEntryCategories></li></MTIfNonEmpty> の行を <MTIfNonEmpty tag="MTEntryCategory"><li class="category">Category: <MTEntryCategories glue=" | "><a href="<$MTCategoryArchiveLink$>" title="<MTCategoryLabel> Index"><MTCategoryLabel></a></MTEntryCategories></li></MTIfNonEmpty> に変更しています。(メタデータにカテゴリだけでなくタグのリンクも加えるため、カテゴリのリンクと分かるように)

      • 上の行の次に、 <MTEntryIfTagged><li class="tag">Tag: <MTEntryTags glue=", "><a href="<$MTBlogURL$>tag/<$MTTagName encode_url="1"$>" rel="nofollow"><$MTTagName$></a></MTEntryTags></li></MTEntryIfTagged> という行を加えています。

    • ブログ記事の詳細
      • <$MTInclude module="前後の記事へのリンク(タイトル付き)"$> の行の上に、

        <ul>
          <li>Related Entries
            <ul>
              <MTRelatedEntries lastn="10"><li><a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
              </MTRelatedEntries>
            </ul>
          </li>
        </ul>

        という行を加えています。この行は TagSupplementals プラグインを導入してから加えないと、エラーが発生します。

    • ヘッドライン
      • <MTEntryIfTagged><li class="tag">Tag: <MTEntryTags glue=", "><a href="<$MTTagSearchLink$>" rel="nofollow"><$MTTagName$></a></MTEntryTags></li></MTEntryIfTagged> の行を <MTEntryIfTagged><li class="tag">Tag: <MTEntryTags glue=", "><a href="<$MTBlogURL$>tag/<$MTTagName encode_url="1"$>" rel="nofollow"><$MTTagName$></a></MTEntryTags></li></MTEntryIfTagged> に変更しています。 .htaccess で RewriteRule を設定しておく必要があります。

    • ユーティリティ
      • works という名前のウィジェットを新規に作成し、 <dl class="navi"> の行の下に <$MTInclude widget="works"$> という行を加えています。主に各人のサイトや実績を記述する項として使っています。
      • <$MTInclude widget="カテゴリーリスト"$> の行の上に <$MTInclude widget="タグクラウド"$> という行を加えています。タグクラウドのテンプレートモジュールは mt.Vicuna 2.1.3 に標準で入っていますが、導入直後の段階ではユーティリティの中には設定されていませんので、この行を書き加える必要があります。
  • システムテンプレート
    • 検索結果
      • <li>Search: <em><$MTSearchString$></em></li>
        <li><em><span class="count"><$MTSearchResultCount$></span></em> Hits</li>

        の行を

        <li><MTIfStraightSearch>Search:<MTElse>Tag:</MTElse></MTIfStraightSearch> <em><$MTSearchString$></em></li>
        <li><em><span class="count"><$MTSearchResultCount$></span></em> Hits</li>
        <li><MTIfTagSearch><a href="<$MTBlogURL$>search/<$MTSearchString$>">full-text search: <$MTSearchString$></a><MTElse><a href="<$MTBlogURL$>tag/<$MTSearchString$>">tag search: <$MTSearchString$></a></MTElse></MTIfTagSearch></li>

        に変更しています。全文検索の時は Search: と表示し、タグ検索の時は Tag: と表示するようになります。また、全文検索とタグ検索をワンクリックで切り替えられるリンクを表示します。

      • <MTEntryIfTagged><li class="tag">Tag: <MTEntryTags glue=", "><a href="<$MTTagSearchLink$>" rel="nofollow"><$MTTagName$></a></MTEntryTags></li></MTEntryIfTagged> の行を <MTEntryIfTagged><li class="tag">Tag: <MTEntryTags glue=", "><a href="<$MTBlogURL$>tag/<$MTTagName encode_url="1"$>" rel="nofollow"><$MTTagName$></a></MTEntryTags></li></MTEntryIfTagged> に変更しています。 .htaccess で RewriteRule を設定しておく必要があります。

  • ウィジェット
    • タグクラウド
      • <li class="level<$MTTagRank$>"><a href="<$MTTagSearchLink$>" title="<$MTTagCount$> Entries" rel="nofollow"><$MTTagName$></a></li> の行を <li class="level<$MTTagRank$>"><a href="<$MTBlogURL$>tag/<$MTTagName encode_url="1"$>" title="<$MTTagCount$> Entries" rel="nofollow"><$MTTagName$></a></li> に変更しています。 .htaccess で RewriteRule を設定しておく必要があります。

テンプレートをちょこちょこいじっていますが、これは言い回しの修正がほとんどなので、そこにこだわらなければ mt.Vicuna をそのまま使うことでこの lh3.jp のような weblog は簡単に作れます。 まだ mt.Vicuna を試していないそこの Movable Type 使いのあなた、この期に使ってみてはいかがでしょうか?

Hello MTOS! (and good-bye WP...)

こんばんは、 hxxk.jp の真琴です。 昨日の記事 WordPresswp.Vicuna を使って著者達の共有の weblog を作ってみました と書きましたが、 WordPress を実際に使ってみて、自分の性に合わなさすぎたので、システムを Movable Type Open Source に変更しました。 いや単に性に合わないだけでなくて、時系列でないページを順に作っていっていたら、とある階層で修正不可能な(と自分では思った)エラーが出たため、慣れたツールでやる方が良いという理由もあります。

まだ Movable Type Open Source をインストールして、 mt.Vicuna テンプレートを適用しただけの状態なので、実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips のサンプルファイルや最新版へのアップデートページなどを、これまでと同じように見られるように更新していこうと思います。

Hello world!

こんばんは、 hxxk.jp の真琴です。 実践 Web Standards Design - Web 標準の基本と CSS レイアウト & Tips の執筆にあたって、サンプルページ用のドメインとしてこの lh3.jp を押さえていたのですが、これまで正誤表や参考ページのリンク集、サンプルファイルのダウンロードくらいにしか活用していませんでした。

しかし、せっかくサーバを借りてドメインも取っているのにそれだけじゃもったいないなと思い、 WordPresswp.Vicuna を使って著者達の共有の weblog を作ってみました。

私個人としてはこれまで WordPress で weblog を作成したことがなかったので、手探りでの構築となりますが、読者への情報提供、あるいは Lucky bag::bloghxxk.jp3ping.org には書きにくい話題などをこちらに気軽に書けるような weblog になればと思っています。

作成にあたり最初に導入したもの
あとで書く

実はまだ Lucky bag::blog の e_luck さんや 3ping.org の wu さんには一言もこの事を話さないままに、昨日から今日で一気に構築しちゃったのが一番の問題点ですね ! ......まあ、最近は私のものを含め、それぞれの weblog では web ネタ以外は書きにくいような雰囲気になっているので、簡単な近況報告程度で良いので是非。

早速ですが、ツールを WordPress から Movable Type Open Source に変更しました。

Index of all entries

Home > makoto Archive

Tag Cloud
Categories
Archives
Search
Feeds
  • Feed by feedburner.jp

Return to page top