小粋空間: 2005年6月アーカイブ

どう知らそう？

June 30,2005 10:50 PM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [4] | Trackbacks [0]

Movable Type の編集画面を横にひろげる

June 29,2005 11:58 PM
Category：[管理画面]
Tag：[CSS, Customize, ManagementPage, MovableType, Width]
Permalink

テンプレート編集画面のテキストエリアおよび、エントリーのテキストエリアの横幅をひろげるカスタマイズです。画像はテンプレート編集画面の変更前と変更後です。

↓

変更方法は、styles.css （インストール時、mt.cgi と同じディレクトリにあります）の下記の部分を検索して赤色から青色の値にそれぞれ変更してください。例は 150px ひろげる場合です。

.body-wrap {
    width: 750px900px;
    }
　　　　：
#edit-template textarea.wide {
    width: 618px768px;
    }
　　　　：
#edit-entry textarea.full-width {
    width: 577px727px;
    }

.body-wrap はエントリー・テンプレートいずれにも適用される最大幅です。#edit-template textarea.wide はテンプレートのテキストエリア用の幅を設定します。.body-wrap で増加した分を超えるとカラムが折り返してしまうのでご注意ください。#edit-entry textarea.full-width はエントリーのテキストエリア用の幅を設定します。

縦幅をひろげる場合はMovable Type の編集画面をひろげるをご覧ください。

Comments [3] | Trackbacks [4]

小粋なユーザーコミュニティ100人突破

June 28,2005 11:58 PM
Category：[mixi]
Tag：[Anniversary, mixi]
Permalink

当サイトのテンプレートユーザさんを中心とした mixi のコミュニティ「小粋なユーザーコミュニティ」が先日100人を超えました。参加くださっている皆様、ありがとうございます。

下記のエントリーでTB企画も行われてますので、興味のある方は奮ってご参加ください。

Magic White：小粋なユーザーコミュニティ100人突破記念企画

Comments [2] | Trackbacks [1]

テンプレートご利用400サイト達成

June 27,2005 11:56 PM
Category：[ご利用サイト]
Tag：[Anniversary, MovableType, Template, Website]
Permalink

当サイトで公開しているテンプレートのご利用者（コメント・トラックバック・BlogPeople等の登録で私が知ることができたもの）が400サイトを超えました。月並みではございますがご利用くださっている皆様には本当に感謝しております。この場をお借りして改めまして御礼申し上げます。ありがとうございます。m(__)m

また今回もmixiの「小粋なユーザコミュニティ」メンバーの方々がサイトのテンプレート利用状況チェックをお手伝いくださいました。サイトの紹介も含めお礼に代えさせて頂きます。お忙しい中、どうもありがとうございました。

[k]kazunoblog：kazさん
我楽：Border.さん
Magic White：みよたんさん
やむやむ：さえらさん
ぷちぷちつづり：みゆこんさん
うだうだうだ：わっちゅさん
Daily note：miaowさん
今日の覚え書き：もそさん
Orbium -そらのたま-：としさん
う・わ・き・も・の：真希さん
LOVE×LOVE!?：さっちん。さん
私立大学職員の情報オフィス：yassyさん

ということで400サイト達成時点でのご利用サイト様を紹介させて頂きます（BlogRollong 表示順です）。タイトルはトップページのタイトルを基本にしておりますが誤り等ございましたらご連絡ください。

なお本リストは「小粋なUserList」として公開しております。下記のスクリプトをBlogPeople等と同じ要領でサイドメニューに貼り付ければOKです。

<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=2102d144aab85284beaa02142f672f72"></script>

リストの文字コードはUTF-8ですのでご注意ください。またリストにあるご自身のサイト情報を更新させる場合は

http://rpc.blogrolling.com/pinger/

へ更新pingを送信してください。
テンプレートご利用者の方にお役立て頂ければ幸いです。

Comments [23] | Trackbacks [0]

テクノラティジャパン・バージョンアップ

June 26,2005 11:59 PM
Category：[blog]
Tag：[Blog, News, Renewal, Technorati]
Permalink

先日の Technorati.com のリニューアルに続いてテクノラティジャパンもリニューアルしたようです。

テクノラティジャパンブログ：テクノラティジャパンバージョンアップ

Technorati はブログ検索サービスのひとつで、Movable Type をお使いの方は設定画面にある更新ping を送信するデフォルトサイトとしてご存知と思います（途中のバージョンから追加されました）。自分のサイトURLやサイト名を設定して検索すると、関連サイトを表示してくれまして、以前はこれで結構楽しんでいました。

今回のリニューアルではトップCD、トップDVD、トップゲームのランキングコンテンツが追加されているようです。すでに提供されているトップ100は先ほど初めて見ましたが24位に登場していて（画像）、ビックリです。

Comments [2] | Trackbacks [2]

アンダースコア・ハック

June 25,2005 11:57 PM
Category：[CSS]
Tag：[CSS, CSSHack, Underscore]
Permalink

CSSで設定したプロパティ（width/font-color等）の前にアンダースコア "_" を付与すると、WinIEではそれを正常なプロパティとして読み込み、他のブラウザでは無視される（=定義されていないプロパティとして認識される）ことを利用した「アンダースコア・ハック」を紹介します。Mozilla 系のフォントサイズが小さくなる問題で、以前 JavaScript によってサイズを変更するエントリーを公開しましたが、それをCSSで実現することができます。
参考サイトは下記です。ありがとうございました。

Lucky bag::blog：アンダースコアハック WellStyled.com：The Underscore Hack

ということで、利用方法です。公開テンプレートのサイドバーのフォントサイズを、IEではデフォルトのサイズ（9px）を、NetScapeやFirefox等、WinIE系以外のブラウザで 10px を指定する例を挙げておきます。

.side {
    font-family: Verdana, Arial, sans-serif;
    color:#666666;
    background: none;
    font-size:10px;
    _font-size:9px;
    font-weight:normal;
    line-height:150%;
    padding:2px;
    margin-bottom:25px;
}

動作の仕組みですが、まず上の「font-size:10px;」を全てのブラウザが読み込みます。そして次の「_font-size:9px;」で、WinIE系のブラウザだけが正常なプロパティとして読み込みます（つまりこちらが有効になる）。結果としてWinIE系とそれ以外のブラウザで異なるサイズを指定することができます。記述の順番を間違えないように気をつけましょう。

いくつかのサイトを見てまわるとこのハックを利用した場合、CSSが valid にならないことが問題として挙げられているようですので、JavaScript によるプロパティ値修正も策としては妥当ではないかと思います。

Comments [8] | Trackbacks [7]

サイドメニューの折りたたみに画像を使用する

June 24,2005 11:58 PM
Category：[サイドメニュー, 折りたたみ]
Tag：[CSS, Customize, Folding, Image, JavaScript, MovableType, SideMenu]
Permalink

サイドメニューの折りたたみ（v4.0）でブロックレベル要素指定による折りたたみをご紹介しましたが、タイトル部分の背景やロールオーバーした時に任意の画像を配置するカスタマイズです。簡単です。

まず、タイトル部分に通常表示で使用する画像（hogehoge1.gif）とロールオーバー時に使用する画像（hogehoge2.gif）の2つを用意します。例えば下記のようなものです。

：通常表示用（hogehoge1.gif）

：ロールオーバー用（hogehoge2.gif）

これを任意のディレクトリ（images）にアップロードします。

次に、前述のエントリーにある、３項のスタイルシートの設定を下記のように変更します。

/* 通常 */
.sidetitle2 a:link,
.sidetitle2 a:visited {
    display: block;
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#666666; /* 文字色 */
    background-color:#f6f6f6; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge1.gif);
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff#666666; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
    background-image:url(images/hogehoge2.gif);
}

これで下記のような動作をするようになります（サンプル表示用に設定は若干変えています）。

ほげほげ

上記は配置する画像のサイズがタイトル部分と同じ大きさの場合です。次のように細い縦長の画像（hogehoge3.gif：みにくくてすいません）

を繰り返し表示する場合は、

background-image:url(images/hogehoge3.gif);
background-repeat:x;

とします。これで

という表示になります。ロールオーバー用の画像も同じ方法で作れます。この方法は横方向のサイズが可変になる場合に便利です。

Comments [2] | Trackbacks [0]

雨に濡れて

June 23,2005 10:47 PM
Category：[ダジャレ]
Tag：[Joke]
Permalink

服が

続きを読む ≫

Comments [4] | Trackbacks [0]

MySQLでエントリーのフィールドサイズを拡張する

June 22,2005 11:58 PM
Category：[MySQL]
Tag：[Customize, Database, mediumtext, MovableType, MySQL]
Permalink

MySQLではエントリーのデータ型に「TEXT型」というものを用いており、最大65535 バイトまで格納することができます。で、このサイズを超える場合、当然のことながらDBに適正に保存することができません（最大長に入らない部分が切り捨てられます。）。実は当サイトを Berkeley DB から MySQL に移行した際、テンプレートデータを記したエントリーが途中で途切れてしまい、調べているうちに上記の原因であることが判明しました。
ということで、MySQLでのフィールドサイズの拡張方法です。インストール前での実行方法ですので、その点は予めご了承ください。

Movable Type インストールアーカイブに含まれている schemas/mysql.dump を任意のエディタで開いて下記のように修正します。

create table mt_entry (
    entry_id integer not null auto_increment primary key,
    entry_blog_id integer not null,
    entry_status tinyint not null,
    entry_author_id integer not null,
    entry_allow_comments tinyint,
    entry_allow_pings tinyint,
    entry_convert_breaks varchar(30),
    entry_category_id integer,
    entry_title varchar(255),
    entry_excerpt text,
    entry_text textmediumtext,
    entry_text_more text,
    entry_to_ping_urls text,
    entry_pinged_urls text,
    entry_keywords text,
    entry_tangent_cache text,
    entry_created_on datetime not null,
    entry_modified_on timestamp not null,
    entry_created_by integer,
    entry_modified_by integer,
    entry_basename varchar(50) not null,
    index (entry_blog_id),
    index (entry_status),
    index (entry_author_id),
    index (entry_created_on),
    index (entry_basename)
);

mediumtext は最大長 16777215 バイトです。ちなみに longtext というものもあり、こちらは最大長 4294967295 バイトです。
テンプレートのフィールドサイズを拡張する場合は、同じファイル内の下記の部分を変更します（多分）。

create table mt_template (
    template_id integer not null auto_increment primary key,
    template_blog_id integer not null,
    template_name varchar(50) not null,
    template_type varchar(25) not null,
    template_outfile varchar(255),
    template_rebuild_me tinyint default 1,
    template_text textmediumtext,
    template_linked_file varchar(255),
    template_linked_file_mtime varchar(10),
    template_linked_file_size mediumint,
    template_created_on datetime not null,
    template_modified_on timestamp not null,
    template_created_by integer,
    template_modified_by integer,
    template_build_dynamic tinyint,
    unique (template_blog_id, template_name),
    index (template_type)
);

修正した後、Movable Type をインストールすることで指定したサイズでDBが作成されます。

Comments [0] | Trackbacks [1]

Movable Type のディレクトリ

June 21,2005 11:59 PM
Category：[テンプレートタグ, 管理画面]
Tag：[MovableType, MTBlogArchiveURL, MTBlogSitePath, MTCGIPath, MTStaticWebPath, VariableTag]
Permalink

カスタマイズする際の外部ファイル（JavaScript等）のアップロードで配置するディレクトリに戸惑う方が少なくありません。「どこにアップロードすればよいのでしょうか」という質問も時々頂きます。
その問題が解消されるかどうか定かではありませんが、改めてディレクトリについてまとめてみました。文中でパスとディレクトリの表現が混在していますがあまり気にしないでください。厳密にはファイル名を含むのが「パス」のようですが、Movable Type の画面ではディレクトリを「パス」と表現しているようです。

CGIPath
適切な名称がありませんので mt.cfg の名称を使います（記事の中でも好んで用いています）。端的に言うと、各CGIスクリプトを配置するディレクトリです。レンタルサーバでは cgi-bin というディレクトリ名が付与されています。
このディレクトリには cgi ファイル（mt.cgi/mt-comment.cgi/mt-tb.cgi 等）と、CGIスクリプトを実行するために必要なライブラリのディレクトリ（下記）が配置されます。

extlib/

lib/

php/

plugins/

schemas/

search_templates/

tmpl/

tools/

ブラウザから閲覧できるファイルはここには存在しません。JavaScript 等の外部ファイルをここに配置することはありません。また CGIPath は Typekeyの登録URLとしても使われます。index.html があるURLを Typekey登録画面で登録されても Typekey は正常に動作しませんのでご注意ください。
このディレクトリはMT変数タグで

<$MTCGIPath$>

と表現されます。

ローカル・サイト・パス
index.html が配置されるディレクトリです。「ローカル・サイト・パス」は管理画面の基本設定の項目名で使われているので、当サイトではこの名称を好んで使っています。各インデックス・テンプレートを再構築した際に生成されるファイル（index.html/styles-site.css 等）がこのディレクトリに配置されます。カスタマイズ等で外部ファイルをアップロードする際には必ずこのディレクトリにアップロードしてください（プラグインファイルは除外）。
このディレクトリはMT変数タグで

<$MTBlogSitePath$>

と表現されます。これをURLにしたものが

<$MTBlogURL$>

です。

レンタルサーバではCGIスクリプトを特定のディレクトリでしか実行できないように制限していますが、そのような環境設定でない場合、例えば自宅サーバ等ではこのディレクトリにCGIスクリプトを配置して動作させることも可能です。とういか私は当初そのような使い方をしていたため、レンタルサーバご利用者の方に随分わかりにくい説明をしていました。

アーカイブ・パス
管理画面で「ローカル・アーカイブ・パス」と書かれているディレクトリです。再構築されたアーカイブ・テンプレート（カテゴリー・アーカイブ/日付アーカイブ/個別エントリーアーカイブ等）がここに生成されます。デフォルト設定では、ローカル・サイト・パスに archives というディレクトリを作るように仕組まれています。
このディレクトリのURLはMT変数タグで

<$MTBlogArchiveURL$>

と表現されます。

StaticWebPath
これもいい名称がありませんので mt.cfg の名称を使います。これは管理画面の表示に使われる

styles.css

mt.js

images/

docs/

を配置するためのディレクトリです。mt.cfg で設定する際はドキュメントルートからの指定になります（かつ前後を "/" で括る）のでご注意ください。
このディレクトリが必要な理由ですが、そもそも CGIPath は Apache の ScriptAlias で設定されたディレクトリで、このディレクトリに配置されたファイルは常にCGIスクリプトとして認識されるため、他のファイルやディレクトリを配置しても正常に振舞うことができないためです。ローカル・サイト・パスに配置しても構わないのですが、本来の使用目的から考えると専用のディレクトリに置いた方が好ましいでしょう。
このディレクトリはMT変数タグで

<$MTStaticWebPath$>

と表現されます。

Comments [2] | Trackbacks [0]

html 要素に lang 属性・xml:lang 属性を追加

June 20,2005 11:59 PM
Category：[CSS]
Tag：[lang, WebStandards, XHTML, xmlns]
Permalink

XHTML では html 要素に対し、拡張要素である xmlns 属性が続きます。

<html xmlns="http://www.w3.org/1999/xhtml">

xmlns 属性は「XML名前空間」で、当サイトを彷彿とさせるネーミングです。The Web KANZAKI：XML名前空間の簡単な説明が大変参考になります。

この後に、書かれている言語の種類と書かれているXMLの言語の種類を追加することがXHTML1.0に記載されています。いずれも日本語であることを明示する場合は下記のようになります。

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">

ただし The W3C Markup Validation Service ではこの記述がなくても valid になります。

Comments [0] | Trackbacks [0]

カレンダーを　XHTML 1.0 valid にする

June 19,2005 11:59 PM
Category：[テンプレート]
Tag：[Bug, Calendar, MovableType, WebStandards, XHTML]
Permalink

公開中のテンプレートに表示させているカレンダーを XHTML 1.0 valid にする方法です。
valid にならない原因は、カレンダーの日付部分に span 要素を付与しているのですが、空きの日（1日より前、月末より後）にも span 要素を付与していたためです（すいません）。

ということで、下記のリストのように

のタグを修正することで valid になります（赤色を削除して青色部分を追加）。

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><MTCalendarIfBlank><MTElse><span class="calendar"></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries>
<MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries>
<MTCalendarIfBlank>&nbsp;<MTElse></span></MTElse></MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>

なおデフォルトテンプレートでは span 要素が付与されていないので問題ありません。公開テンプレートは追って修正致します。

Comments [0] | Trackbacks [0]

固定3カラムのIE6・後方互換モード対処方法

June 18,2005 11:58 PM
Category：[テンプレート]
Tag：[Bug, CSS, MovableType, Template]
Permalink

公開中の固定3カラムテンプレートをXHTMLに適用させる場合、1行目にXML宣言、
<?xml version="1.0" encoding="utf-8"?>
をテンプレートに記述する場合がありますが、この時IE6では強制的に表示モードが「後方互換モード」、つまり古いブラウザへの互換性を保とうとするモードになります。
「後方互換モード」は「標準モード」と解釈の違いがあり、その中のひとつに width プロパティに padding / border プロパティのサイズを含む・含まないの解釈の違いがあります。後方互換モードでは width に padding / border のサイズを含むため、含まないサイズ指定を行っている公開テンプレートでXML宣言を行うと左右のカラム幅が画像のように崩れてしまうという問題がありました（というかそもそも私の解釈誤り）。
1行目にXML宣言を記述しなければこのような問題は発生しないのですが、ウェブスタンダードに準拠して運用される場合の制約となってしまいます。

ということで、3カラム固定の公開テンプレートについて、いずれの表示モードにも依存せずに表示させる修正方法を提示します。具体的には、両者のプロパティを同時にひとつのブロックに記述しなければ回避できる問題ですので、新しいブロックを追加します。
なお、text-align:プロパティを追加しないとセンタリングされないという問題もありますのでそれも併せて記述します。

本記事の参照元は下記です。ありがとうございました。

１．スタイルシート修正

styles-site.css の左右カラム指定のIDセレクタについて、下記リストのように赤字部分を削除し、青字のIDセレクタを新たに追加します。

#links-right-box {
    float: left;
    width : 185px ;
}
 
#links-right{
    float: left;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}
 
#links-left-box {
    float: left;
    width : 185px ;
}
 
#links-right{
    float: left;
    width : 155px ;
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}

また3カラム全体をセンタリングさせる場合は、body 要素に青色の text-align プロパティを追加してください。

body {
    margin: 0px 0px 20px 0px;
    background:#8FABBE; /* 背景色 */
    text-align:center;
}

２．テンプレート修正

3カラム化しているテンプレート全てについて、下記リストのように links-left、links-right のタグの外側を括る形で青字のタグを追加します。

　　　　　　　　：
<!-- 左サイドバー開始 -->
<div id="links-left-box">
<div id="links-left">
　　　　　　　　：
</div>
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
　　　　　　　　：
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right-box">
<div id="links-right">
　　　　　　　　：
</div>
</div>
<!-- 右サイドバー終了 -->
　　　　　　　　：

３．もう少しきれいに

実は左右のセレクタの内容は全く同じ内容ですので、

.links-box {
    float: left;
    width : 185px ;
}
 
.links{
    padding-top : 15px;
    padding-left : 15px;
    padding-right : 15px;
    color: #ffffff;
}

というまとめた指定も可能です（妥当かどうかは別として）。テンプレートのid 属性は class 属性に変更してください。

上記の修正によって標準モード・後方互換モードのいずれでも画像のような表示になります。なおIE6のみの対処ですので他のブラウザについて適正な表示をするには別の方法が必要かも知れませんので予めご容赦ください。
公開中の固定3カラムのテンプレートは修正済みです。

Comments [2] | Trackbacks [2]

おさいふケータイ

June 17,2005 11:53 PM
Category：[ダジャレ]
Tag：[Joke]
Permalink

続きを読む ≫

Comments [8] | Trackbacks [0]

label 要素を用いてトラックバックURLを1クリックで選択状態にする

June 16,2005 11:59 PM
Category：[トラックバック, ユーザビリティ]
Tag：[Customize, JavaScript, label, MovableType, TrackbackURL, Usability, XHTML]
Permalink

個別エントリーアーカイブに表示されたトラックバックURLを、ドラッグせずに1クリックで選択する方法は既にスタンダードなカスタマイズとして確立していますが、label 要素を加えてさらに取得しやすくしてみました。label 要素は、それで括られた説明文をクリックした時やアクセスキーを押した時、本来の部分をクリックした時と同じ動作をさせる働きをもっています。

デフォルトテンプレートにおけるトラックバックURL表示のHTMLタグは下記のようになっています。

<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<$MTEntryTrackbackLink$></p>

このタグでは下のような表示になり、トラックバックURLをコピーする場合、マウスでドラッグする必要があります。

トラックバック

このエントリーのトラックバックURL:

http://www.koikikukan.com/cgi-bin/blog/koikikukan/mt-tb.cgi/1216

このタグに対してURL表示部分を input 要素に変更し、さらに onfocus イベントを加えて1クリックでURL全体が選択できるようにします。

<h2 id="trackbacks">トラックバック</h2>
<p class="techstuff">このエントリーのトラックバックURL:<br />
<input tabindex="1" accesskey="x" name="tb_url" value="<$MTEntryTrackbackLink$>" readonly="readonly" onfocus="this.select()" /></p>

ここまでが従来のカスタマイズで、テキストエリアのURLを1クリックで選択状態にすることができます。ここでは省略していますがIEのみ有効なコピーボタンをつけるというカスタマイズもあります。

トラックバック

小粋空間 - a cheap joke and a play on words site

どう知らそう？

Movable Type の編集画面を横にひろげる

小粋なユーザーコミュニティ100人突破

テンプレートご利用400サイト達成

テクノラティジャパン・バージョンアップ

アンダースコア・ハック

サイドメニューの折りたたみに画像を使用する

雨に濡れて

MySQLでエントリーのフィールドサイズを拡張する

Movable Type のディレクトリ

html 要素に lang 属性・xml:lang 属性を追加

カレンダーを XHTML 1.0 valid にする

固定3カラムのIE6・後方互換モード対処方法

１．スタイルシート修正

２．テンプレート修正

３．もう少しきれいに

おさいふケータイ

label 要素を用いてトラックバックURLを1クリックで選択状態にする

カレンダーを　XHTML 1.0 valid にする