XHTML タグ一覧表示ツール
下に表示されている XHTML タグをクリックすると、その下にある枠内に、 正しいマークアップ 使用可能な子要素（または親要素） 使用可能な属性 が表示されます。XHTML タグを記述する際、「このタグの書き方は？」「このタグの子要素（または親要素）には何が書けるの？」と思ったら使ってください。元データは Another HTML-lint のタグ一覧を利用しています。 クリック表示 マウスオーバー表示 属性表示 XHTML 1.0 Transitional [ 閉じる ] <a> <abbr> <acronym> <address> <applet> <area> <b> <base> <basefont> <bdo> <big> <blockquote> <body> <br> <button> <caption> <center> <cite> <code> <col> <colgr
「Webデザインの新しいルール Movable Type 4.x」について（その2：タグリファレンス）
以前お知らせした、現在執筆中の「Webデザインの新しいルール Movable Type 4.x（仮）」のプロモーション第2回目です。 その2：MTタグリファレンス 本書では、MT4で新しく追加されたテンプレート・タグを含め、約400近くあるほぼ全てのタグの簡易なリファレンスを掲載する予定です（厳密には「掲載させてください」と、出版社の担当の方にお願いをしている状態）。 MT3.35 をターゲットに執筆を開始した時、例えばエントリーの各フィールドがどの MT タグに該当するかといったような構成は考えていたのですが、「リファレンス」という壮大な計画は全く念頭にありませんでした。 ところがMT4でUIが大きく変わってしまい、その時考えていたタグ対応表がうまく適用できなくなり、それをどこかに掲載したいと考え始めたのがきっかけです。 また書籍の中では、MTタグの概要や種類、カスタマイズの章ではそこで
サブカテゴリーリストのエクスプローラ風折りたたみ
当サイトでこれまで紹介してきた「サブカテゴリーリストの折りたたみ」カスタマイズは、「折りたたみマーク（＋ツリー化）」という形式が主体でしたが、新たに Windows のエクスプローラのツリー表示と同じように、タイトルの左側に折りたたみ画像を表示し、折りたたみ状態によって画像を切り替えられるカスタマイズを紹介致します。 ここでは、Movable Type のデフォルトテンプレート（スクリーンショット）および公開テンプレートでのカスタマイズ方法について説明します。 １．スクリプトのダウンロード 下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。 download ２．menufolder.js の設定変更 ダウンロードした menufolder.js を任意のエディタで開き、下記のように該当部分を青色の内容に変更してく
JavaScript カレンダー（休日表示付き）
カレンダーに土、日・祝日、および本日表示を行うための JavaScript です。このスクリプトにカレンダー解析スクリプトとCSSを加えることによって、スクリーンショットのような土・日・祝日・本日の装飾を行うことができます。振替休日やハッピーマンデーにも（多分）対応しています。 休日表示をするスクリプトをネットでいくつか見つけたのですが、カレンダー用のテーブルを作成しながら同時に休日を判定するタイプのものが多かったため、一旦マークアップされたカレンダーに対しても利用可能となる、汎用的なスクリプトを作ってみました。 このスクリプトは年月日から土、日・祝日、本日を判定するというシンプルなものです。JavaScript が利用可能であればブログツールやサービスに依存しません。 冒頭に述べた Movable Type 等のカレンダーを解析するスクリプトは別途エントリーする予定です（まとめて書くと収
Ajax 月送りカレンダー
Ajax を利用した Movable Type 月送りカレンダーのカスタマイズです。リアルタイムカレンダー（本日の日付の装飾）および土・日・休日表示も盛り込まれています。 MT4をご利用の方は「Ajax 月送りカレンダー（MT4版）」を参照してください。 このカレンダーは、従来の月送りカレンダー（iframe 利用）と比較して、下記のアドバンテージがあります。 週数の変化によって高さが可変、つまりカレンダー下に表示されるアイテムとの間隔が常に一定 月送りのリンクの履歴がブラウザの履歴に残らない すでにお気づきの方もいらっしゃると思いますが、当サイトでは数ヶ月前から月送りカレンダーを Ajax 化して試験運用してiいます。月送りのリンクをクリックして Ajax 化されたカレンダーを体感してみてください。 注：本カスタマイズでつまづいた場合、「８．トラブルシューティング」をご覧ください。 仕様
CSS+JavaScript によるカラムレイアウト切り替え
公開テンプレート（Movable Type/Serene Bach/sb/ FC2ブログ/Seesaaブログ）でカラムレイアウトをリアルタイムに切り替えるカスタマイズです。ここでは公開テンプレートをサンプルに説明していますが、同様の構造であればどのようなテンプレートでも実現可能です。 とりあえず、どのような動作になるかをサンプルでお試しください（中央上部のプルダウンメニューで操作できます）。 以前、類似の記事でスタイルシート切替や3カラム可変と3カラム固定を切り替えるをエントリーしていますが、これらはいずれもスタイルシートを新たに追加する必要がありました。つまり「スタイルシートを切り替える」というカスタマイズでした。 今回のカスタマイズでは、スタイルシートの追加や切り替えなしにレイアウトを切り替えることができます。 その理由は、現在公開しているテンプレートでは1つのスタイルシートに 3カラ
CSSでサイドバーの背景を最後まで表示する
マルチカラムレイアウトで困るのは、サイドバーに背景色を与えた場合、サイドバーの内容が本文（中央カラム）の表示より短くなった場合、背景色がそこで途切れてしまうことです。 ということで、このエントリーではページの最後までサイドバーの背景色を表示するカスタマイズをご紹介します。 完成イメージ サンプルは公開テンプレートを用いてますが一般的な手法ですので他のテンプレートでも適用可能です。 なお本エントリーは固定レイアウトのカスタマイズです。リキッドレイアウトについてはリキッドレイアウトの背景色を変更するを参照ください。 以前にもサイドバーの背景を最後まで表示するという記事をエントリーしましたが、現在公開しているテンプレートの内容にあわせて改訂しました。なおCSSの構造的には前記事の方がシンプルなので併せて参照頂ければ理解が深まると思います。 １．失敗例 本サイトの公開テンプレート（2カラム・右にサ
小粋空間: 標準準拠モードと後方互換モード・DOCTYPE宣言について - IEでドロップシャドウ画像に枠を表示する
以前エントリーした「CSSで画像に影をつける（ドロップシャドウ）」で、IEで画像枠が表示されない不具合についての対処方法です。 対処することで、スクリーンショットのようにIEでも画像枠が表示されるようになります。*1 元エントリーで記しているとおり、実験サイトではIEで画像枠（= padding プロパティ）がついていたのですが、エントリー時には画像枠がつかない状態になっていました。そのことについてあまり気にしていなかったのですが、先日この件に関するご質問を頂いて調べたところ、原因が判明しました。 おおざっぱな結論から申し上げますと、テンプレート1行目にあるXML宣言 <?xml version="1.0" encoding="utf-8"?> が画像枠の表示に影響しています。当サイトでは1行目にXML宣言を記述しているため、実験サイト（XML宣言なし）と異なる結果になっていました。 表示
管理画面のエントリーリストにパーマリンクを表示する
管理画面でエントリーリストを表示した時にそのエントリーのパーマリンク（エントリーアーカイブページのURL）も同時に表示するカスタマイズです。 これを作った理由は、管理画面のエントリー一覧からあるエントリーのURLを取得するためには、そのエントリー編集画面の右上にある「エントリーを確認」のリンクからしか取得できず、エントリー一覧から直接取得（あるいは表示）できるようにしたいと思ったからです。 完成画面はスクリーンショットでお分かりのように、リンク画像をエントリータイトルの後方に表示するようにしています。これをクリックすることで該当のエントリーを表示することができます（URLを取得するだけであれば、IEの場合、リンクを右クリックして「ショートカットのコピー」を選択することでコピーできます）。 またツールチップにURLを表示するようにしてします。 以下、カスタマイズ方法です。 １．CMS.pm
JavaScript エラーを解消する
Windows IE6.0 でページを表示した時、ステータスバー左下に画像のような黄色いアイコンと「ページでエラーが発生しました」という情報が表示されることがあります。これがいわゆる「JavaScript エラー」で JavaScript の実装に問題があることを示しています。 エラーが発生するのは体裁の良いものではなく、場合によってはページが正常に表示されない場合もありますので、できれば解消したいところです。 ということで、JavaScript エラーの解消方法をご紹介します。ただしエラーを解消するには JavaScript の修正を伴うケースが少なくないため、プログラミングが苦手な方については原因発見までとなります（後はスクリプト配布元に問い合わせましょう）。 2013/7/31追記：最新ブラウザを使った「JavaScriptエラーを表示・確認する方法のまとめ」をエントリーしました。
Bcc: を使わずにメールアドレスを非表示にする方法
複数人に同じ内容のメールアドレスを送信し、かつ送信者に対してメールアドレスを非表示にする場合、Bcc: フィールドを利用するのが一般的ですが、 To: グループ名:メールアドレス１, メールアドレス２, … メールアドレスn; という書き方があることを知りました。上記のように書くと、実際の送信先の To: フィールドには To: グループ名:; と表示されるだけで、後方のメールアドレスは全て非表示になるようです。グループ名は任意の文字列を設定することができます。 これは、 RFC822：6.2. SEMANTICS - 6.2.6. MULTIPLE MAILBOXES に書かれている仕様ですが、Netscape Mail ではこのような設定はできませんでした。Windowsで対応するMUA（いわゆるメールソフト）はあるのでしょうか。 といっても困っている訳ではありませんが。
エントリーの中でMTタグを使う
MTタグはテンプレートでの使用が前提となっており、エントリーの内容ではを使うことができません。例えば他のエントリーアーカイブページへのリンクや、画像を貼り付けてURLを記述する場合、メインページのテンプレートや各アーカイブテンプレートには、下記リストのように、 エントリーアーカイブページへのリンク <a href="<$MTLink entry_id="678"$>"> 画像のURL <img src="<$MTBlogURL$>images/hogehoge.gif" alt="hogehoge" /> とMTタグを使った記述が可能ですが、エントリーの内容には、 エントリーアーカイブページへのリンク <a href="http://www.koikikukan.com/archives/2005/10/24-011007.php"> 画像のURL <img src="//www.koik
3.2-ja 再構築時のパフォーマンス（その2）
3.2-ja 再構築時のパフォーマンスで頂いたコメント・トラックバック等の情報より、再構築時に500エラーが発生する原因と対処方法です。 原因は、「BerkeleyDB 使用で recently_commented_on でのメモリ消費が大きい」ということらしいです。具体的な内容につきましては下記に引用させて頂いた通りです。 Ogawa::Memoranda：MT 3.2でrecently_commented_onとBerkeleyDBに嵌っている人が多い件について recently_commented_onはlastnやdaysオプションと一緒に指定することはできませんでしたが（中略）?3.2では指定された範囲のエントリーを対象に最近コメントされたエントリーをリストアップする機能となりました。（中略）これを実現するために追加されたMTへのナイーブなコード追加が甚大な影響を及ぼしています。
3.2-ja 再構築時のメモリ量増加について
別のサイトでの3.2インストールおよび公開テンプレート確認中に、アーカイブテンプレートの再構築でメモリ量が爆発的に増加するという現象が発生しています。 追記：このエントリーは 3.2-ja を元に測定したものです。3.2-ja-2 での対処方法については Movable Type で再構築エラーになる場合の原因と対処をご覧ください。 私はWindows自宅サーバで運用しているのですが、画面は公開テンプレートの日付アーカイブ再構築中（1-80件）のCPU使用率およびPF使用率です。再構築前は400MBほどのPF使用量が再構築の途中から（環境のせいかもしれませんが）突然1GBを超えてしまいます（左画像）。通常の運用でここまで上昇することはありません。プロセスを見ると再構築の perl.exe のメモリ使用量が数百MBに膨れ上がってしまっています。 最初に試したのはアップグレードによるものだった
ブラウザのキャッシュをクリアする
ブラウザのキャッシュについて、これまでに何人かの方から質問を頂いていたのでまとめてみました。 IEを例に挙げると、一度訪れたページの情報を「インターネット一時ファイル」としてハードディスクに保持（キャッシュ）することで、次回同じページにアクセスした時にキャッシュからデータを読み出すことでページを早く表示させることができます。 しかし、ブログのカスタマイズ中はテンプレートやスクリプト等のデータを頻繁に変更・再構築を繰り返するため、キャッシュに保持されることが逆に不都合となります。 ということで、キャッシュに保持させない方法をいくつかご紹介します。 １．meta タグによる制御 テンプレートの <head>～</head> に下記を追加します（*1）。 <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-C
Tag Cloud のページを作る
Tag Cloud（左画像）のページを作るカスタマイズです。 注：3.3 以降はエントリー・タグが標準機能として用意されていますので、本カスタマイズを行わなくても Tag Cloud のページを作ることができます。 当サイトを訪れてくださるカスタマイズ志向の方であれば下記のページ、一度はご覧になったことがあると思います。 Ogawa::Memoranda：Tags そのページにある説明を引用します。 このページは、そのキーワードをアルファベット順に列挙し、文字の大小でその出現頻度を示したものです。興味があるキーワードがあれば、そのキーワードをクリックしてみてください。そのキーワードが設定されているエントリーの一覧が見られますよ。 「キーワード」とは、エントリーのキーワード欄に設定された文字列（以下タグ）を指しています。ひとつのエントリーに対して複数のタグを設定することもでき、同一のタグが複
サイドメニューの折りたたみ（v5.0：ゆっくり折りたたむ）
Google Mapsや Googleサジェスト で一躍有名になった Ajax（Asynchronous JavaScript+XML：エイジャックス） ですが、Ajax用JavaScriptライブラリを利用してサイドメニューをゆっくり折りたためるようにしてみました。 公開テンプレートを用いたサンプルを作りましたので、実際の折りたたみ動作をご確認ください。固定3カラム・可変3カラムを右上のリンクで切り替えられるようにしています。 ゆっくり折りたたむサンプル 本カスタマイズで参考にさせていただいたのは下記のサイトです。ありがとうございました。 Ogawa::Memoranda："Subscribe with Feedbringer" Bookmarklet （FEEDBRINGERを知るきっかけ） FEEDBRINGER nekobara カルゴルニア・ジョン：Ajaxサンプル with G
小粋空間: Firefox・Netscapeで連続した半角文字を折り返す
FirefoxやNetscape 等、Geckoエンジンを用いたブラウザでは、連続した半角文字（長いURLや半角空白のないスクリプト等）を途中で折り返せないという既知のバグがあります。当サイトでもMTタグをリストとして掲載している記事をFirefox・Netscape等で表示すると、画像のようにブロックからはみ出して表示されてしまいます。 Firefoxまとめサイト：URLっぽい文字列が右端で折り返されずレイアウトが乱れます FirefoxではURLの折り返しについては url_breaker という拡張が公開されており、これがスタンダードな対処方法になっているようです。 あすかぜ・ねっと：url_breaker またURL以外のテキストにも適用したい場合、url_breker_plus が公開されています。 outsider reflex：Firefoxで長いURIを折り返す （本文中に
BlogPeopleの被リンク数を減らさずにURLを変更する
本日、BlogPeopleのURLを変更しました。こちらで変更する前にURLを手動で変更くださっていたサイトさんがかなり増えてきたのを発見して（ありがとうございます）、あわてて変えました。 さて、BlogPeopleのURLは、メニューにある「サイト情報の設定/変更」で簡単に変更できるのですが、これを行うとこれまでの被リンク情報が消滅してしまいます。被リンク数を維持したままURLを変更するには、メニューの「各種申請」をクリックした次のページにある「サイトURLの変更・追加申請」から申請します。 参考サイトは以下です。ありがとうございました。 Modern Syntax：BlogPeopleに機能追加caramel*vanilla：BlogPeopleのリンクについて 昨晩申請して、本日の午前中には作業完了のメールを頂きました。この作業は人手を介して行われているようですが、迅速に対応くださり
float 3カラムの折りたたみによるCSSの不具合
リニューアルで Mozzila 系のブラウザに中央カラムのコンテンツ折りたたみを導入しなかった理由です。 Netscape または Firefox で、サイドバー（左右どちらでも良い）の表示が中央カラムより長い状態で、中央カラムの記事の折りたたみ（閉じる→開く）を行うと、開いた分の長さをサイドバーの余白として継承してしまいます。つまり記事を開いた途端にページ全体が下にのびてしまいます。中央カラムがサイドバーより長い状態であれば発生しません。 言葉で説明するのは難しいのでもぬけのからの個別エントリーアーカイブで試して頂けると一目瞭然です。このページでどちらかのサイドバーの長さを中央カラムより長い状態にして「続きを読む」をクリックすると、長いほうのサイドバーの下に余白が生じます。この余白は中央カラムを開いた分の長さと等しくなります。 またその後でサイドバーを折りたたんでも高さは変わりません。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
