テンプレート修正(XHTML1.0/CSS valid)

April 30,2005 3:01 PM
Category:[テンプレート]
Tag:[, , , ]
Permalink
Valid XHTML 1.0!Valid CSS!現在公開中のテンプレートをタイトルの通り、XHTML1.0 および CSS についていずれも valid (正当)にしました。

修正箇所は

  • img タグに alt 属性追加
  • font-weight指定の修正

です。
後者につきましては明らかに typo ですので、 styles-site.css にある下記のクラスセレクタについて修正ください。ご迷惑おかけして申し訳ございませんがよろしくお願い致します。

.date {
  :
    font-weight: nonebold;
  :
}
 
#content-commentspop h2 { 
  :
    font-weight: nonenormal;
  :
}
 
#content-commentspop h3 { 
  :
    font-weight: nonenormal;
  :
}

また CSSの検証で

  • 行番号 : 168 can't find the warning message for otherprofile
  • 行番号 : 491 can't find the warning message for otherprofile

という警告が表示されます。これは word-break についての警告で、IE専用のプロパティのためと思われますので予めご了承ください。
なお、それぞれの検証サービスは下記にあります。

The W3C Markup Validation Service W3C CSS 検証サービス

URLまたはファイルを指定して実行すれば検証結果が表示されます。

2005.05.01 追記
XHTML1.0については上記サービスで valid になったという事実のみで、XHTMLの準拠については別途xml宣言や名前空間指定等が必要となります。

Comments [0] | Trackbacks [1]

大型連休

April 29,2005 11:59 PM
Category:[ダジャレ]
Tag:[]
Permalink

でかけると

Comments [0] | Trackbacks [0]

Quasi-Spam Filter Plugin バージョンアップ

Ogawa::Memoranda さんご提供のスパム対策プラグインが 2005.04.08 付で 0.20 にバージョンアップされておりまして、大変遅くなりましたが本日アップグレードさせて頂きました。バージョンアップに伴いフィルタ対象変更のカスタマイズが楽になりました。またカスタマイズ方法についても配布元で掲載くださっています。ありがとうございました。

ということで、当サイトではスクリプトを下記のようにカスタマイズ致しました。

プラグイン:Quasi-Spam Filter Plugin - Release 0.20
改変内容:下記参照

この変更で前回(コメントスパム対策(その6)トラックバックスパム対策(その2))までと同様の機能を継承しています。
プラグインは上記リンクよりダウンロードしてください。

改めて説明致しますと、このプラグインは、予め設定した文字列を含むコメント・トラックバックをフィルタリング(エラー返送等)してくれるという仕組みになっています。例えば "hoge" をフィルタ文字としてプラグインに設定しておけば、"hoge" が含まれるコメント・トラックバックは受け付けません。またフィルタ文字とは別に、フィルタリングしたい対象エリアを、コメント・トラックバックそれぞれ個別に設定することができます。さらに受信時のリアクションを選択することができます。

1.フィルタ対象文字列の追加

下記のように青色部分を追加します。

# Set your spam pattern
$COMMENT_PATTERN = 'char1|char2|…|charn|<h1>|<a\s'; # H1 or A elements
$TBPING_PATTERN = 'char1|char2|…|charn|<h1>|<a\s'; # H1 or A elements

char1 ? charn は任意のフィルタ文字列を設定します。文字列を複数配置する場合はサンプルのように "|" で区切ります。コメントでリンクを受け付けたい場合は、$COMMENT_PATTERN の "<a\s"(とその前の "|" )は削除してください。

2.フィルタ対象フォームエリアの追加

デフォルトでのフィルタ対象となるフォームエリアは、「コメントの内容」および「トラックバックの概要(=本文の先頭n文字)」となっていますので、「コメント投稿者」および「トラックバックタイトル」を追加するサンプルを記します。

use MT::Comment;
use MT::TBPing;
 
sub is_comment_spam {
    my $comment = shift;
    return ($comment->text =~ /$COMMENT_PATTERN/i ||
            $comment->author =~ /$COMMENT_PATTERN/i);
}
 
sub is_tbping_spam {
    my $tbping = shift;
    return ($tbping->excerpt =~ /$TBPING_PATTERN/i ||
            $tbping->title =~ /$TBPING_PATTERN/i);
}

今回のバージョンアップで他のエリアについても簡単に設定できるようにしてくださっているので、「全部入り(ラーメンか)」を希望される場合は下記のように設定すればOKです。

sub is_comment_spam {
    my $comment = shift;
    return ($comment->text =~ /$COMMENT_PATTERN/i ||
            $comment->author =~ /$COMMENT_PATTERN/i ||
            $comment->email =~ /$COMMENT_PATTERN/i ||
            $comment->url =~ /$COMMENT_PATTERN/i ||
            $comment->ip =~ /$COMMENT_PATTERN/i);
}
 
sub is_tbping_spam {
    my $tbping = shift;
    return ($tbping->excerpt =~ /$TBPING_PATTERN/i ||
            $tbping->title =~ /$TBPING_PATTERN/i ||
            $tbping->source_url =~ /$TBPING_PATTERN/i ||
            $tbping->blog_name =~ /$TBPING_PATTERN/i ||
            $tbping->ip =~ /$TBPING_PATTERN/i);
}

なお上に設定したものから順番にチェックし、文字列がマッチした時点で処理が終わる(=残りは実行されない)ので、優先度の高いものから並べると良いでしょう。

3.コメントスパム受信時のリアクション変更

ここでは正常に受け付けたように見せかける設定にしています。

# Choose a method for rejecting Spam Comments from: 
# 'CommentFilter', 'CommentThrottleFilter', 'CommentError',
# 'CommentLongError', 'CommentRedirect', 'CommentEvilRedirect'
$COMMENT_METHOD = 'CommentErrorCommentFilter';

4.トラックバックスパム受信時のリアクション変更

こちらも同様です。

# Choose a method for rejecting Spam Pings from:
# 'TBPingFilter', 'TBPingThrottleFilter', 'TBPingError'
$TBPING_METHOD = 'TBPingErrorTBPingFilter';
Comments [19] | Trackbacks [18]

ナビゲーションバー・シンプルタイプ(その3:クリック時のロールオーバーを追加)

April 27,2005 11:11 PM
Category:[CSS]
Tag:[, , , ]
Permalink

前回までのカスタマイズで、マウス・カーソルをリンクにポイントした時のロールオーバーを、ページ遷移しても保持するところまでできましたが、リンクをクリックしてからページが変わるまでの挙動までは制御できていません。
例えばリンクをクリックした後、マウス・カーソルをリンクから外すとロールオーバーが解除されてしまいます。またクリックしてからページが変わるまでの間、以前のロールオーバーが保持されているため、リンクを確実にクリックしたという事実が視覚的に反映されていません。

ということで、この回ではクリック後からページ遷移までのロールオーバー保持と、クリック時に他のロールオーバーを解除するためのカスタマイズを行います。

1.テンプレートの設定(onclick属性追加)

ナビゲーションバーの各 a タグに JavaScript を起動するための onclick 属性を追加します。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home" id="Home" onclick="changeLinkStyle('Home');">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About" id="About" onclick="changeLinkStyle('About');">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile" id="Profile" onclick="changeLinkStyle('Profile');">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link" id="Link" onclick="changeLinkStyle('Link');">Link</a></span> |
<span><a href="<$MTBlogURL$>search.html" title="Search" id="Search" onclick="changeLinkStyle('Search');">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail" id="Mail">Mail</a></span>
</div>

赤色部分はそれぞれの id 属性値と同じ文字列を設定します。モジュール化の有無に関係なくこの設定を行います。カテゴリーアーカイブの場合も文字列を直接設定してください。

2.テンプレートの設定(JavaScript追加)

ナビゲーションバーを適用しているテンプレートの <head> ? </head> の間に下記のスクリプトを設定します。

<script type="text/javascript" language="javascript">
<!--
function changeLinkStyle(name){
    var node;
    var list = new Array(5);
    list[0] = "Home";
    list[1] = "About";
    list[2] = "Profile";
    list[3] = "Link";
    list[4] = "Search";
    for (i = 0; i < list.length; i++) {
        node = document.getElementById(list[i]);
        if (name == list[i]) {
           node.parentNode.setAttribute("id","selected");
        } else {
           node.parentNode.setAttribute("id","navbar");
        }
    }
}
//-->
</script>

赤色部分のタイトルに該当する部分は id 属性名を設定します。また数字の部分は設定しているリンク数によって変更する必要があります。

var list = new Array(5);

は「設定したいメニュー数 - 1」を設定します。例では5つのメニューがあるので設定値は「4」となります。
その下にある

list[0] = "Home";
list[1] = "About";
list[2] = "Profile";
list[3] = "Link";
list[4] = "Search";

も設定したいメニュー数分用意します。例えばメニューをもうひとつ増やしたい場合は、

list[5] = "hogehoge";

と、カッコ部分の数字を増やした状態で追加します。
なお、ここではJavaScriptをHTMLに直接設定していますが、外部ファイルにしても構いません。

参考.クリック状態で別のスタイルを使う

ここまでの設定で、リンクをクリックしてからページが遷移するまでロールオーバーを保持することができました。一応これで完成ですが、別のスタイルをもうひとつ追加して、リンクをクリックした時に適用させることで「クリックされた」状態をさらに明確に表示することもできます。

まず、上記のJavaScriptの下記のように変更します。

<script type="text/javascript" language="javascript">
<!--
function changeLinkStyle(name){
    var node;
    var list = new Array(5);
    list[0] = "Home";
    list[1] = "About";
    list[2] = "Profile";
    list[3] = "Link";
    list[4] = "Search";
    for (i = 0; i < list.length; i++) {
        node = document.getElementById(list[i]);
        if (name == list[i]) {
           node.parentNode.setAttribute("id","selectedclicked");
        } else {
           node.parentNode.setAttribute("id","navbar");
        }
    }
}
//-->
</script>

あとはクリックされた時に適用するスタイル(下記)を styles-site.css に追加します。

/* クリックされたリンクのスタイル */
#clicked a,
#clicked a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
    text-decoration: none; /* テキストの装飾をなくす */
    position:relative; top:1px; left:1px; /* リンクをずらす */
}

サンプルでは同じ配色でリンクを右下方向に 1px ずらす設定を行っています。

これまでの設定をまとめたサンプルを配置しましたのでお試し頂ければ幸いです。HTTPレスポンスが早いと今回のカスタマイズの効果が分かりにくいのですが、その点は予めご容赦ください。
また全体的にもう少し良い実装があるかもしれませんので、色々試してみてください。

その1:基本スタイル
その2:クリックしたメニューのロールオーバーを保持する
その3:クリック時のロールオーバーを追加

2005.12.18 追記
サンプルリストのリンク表示を修正しました。

2006.10.09 追記
デッドリンクを修正しました。

Comments [8] | Trackbacks [0]

ナビゲーションバー・シンプルタイプ(その2:クリックしたメニューのロールオーバーを保持する)

April 26,2005 8:45 PM
Category:[CSS]
Tag:[, , , ]
Permalink

「その2」は、ナビゲーションバーにあるメニューをクリックした時、ジャンプしたページでクリックされたメニューのロールオーバーを保持、つまり選択された状態を保持するというカスタマイズです。このカスタマイズによって現在表示されているページとメニューの関連性がより明確になり、ユーザビリティを向上させることができます。
久しぶりに濃厚な内容です。

1.テンプレートの設定

各テンプレートに対し、前回設定したナビゲーションバーに span タグ(青色)を追加します。「各テンプレート」というのは、厳密にはロールオーバーを保持したいテンプレートだけが対象です。
ナビゲーションバーをモジュール化している場合は気にせず span タグを付与してください。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link">Link</a></span> |
<span><a href="<$MTBlogURL$>search.html" title="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a></span>
</div>

設定したらテンプレートを保存・再構築します。

2.スタイルシートの設定

こちらも前回設定した styles-site.css のナビゲーションバー用スタイルの下に、保持状態表示用のIDセレクタ "selected" を追加します。

/* ナビゲーションバー全体のスタイル */
#navbar {
    text-align: center; /* 配置 */
    font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
    font-weight: normal; /* フォントの太さ */
    font-size: 12px; /* フォントサイズ */
    width: auto; /* 全体の幅 */
    line-height: 150%; /* テキストの高さ */
}
 
/* リンクのスタイル */
#navbar a{
    background-color: #ffffff; /* 背景色 */
    color:#666666; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
}
 
/* リンクをポイントした時のスタイル */
#navbar a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    text-decoration: none; /* テキストの装飾をなくす */
}
 
/* 選択されたリンクのスタイル */
#selected a,
#selected a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
    text-decoration: none; /* テキストの装飾をなくす */
}

配色を変更する場合は、IDセレクタ "selected" の配色が、リンクをポイントした時のIDセレクタ "#navbar a:hover" と同じ内容になるように設定してください。
設定が完了したら保存・再構築します。

3.ロールオーバー保持の設定

テンプレートに対してロールオーバーを保持する設定を行います。ここではナビゲーションバーを

  1. 各ページにスタティックに、つまり直接設定している場合
  2. モジュール化している場合

の2つのケースについて説明します。1の場合はロールオーバーを保持したいインデックス・テンプレートに対してのみ実施すればOKです。
なお、この項ではいずれも1つのメニューに対して1つのインデックス・テンプレート(から生成されたHTMLページ)が対応している場合のカスタマイズについて述べています。カテゴリーアーカイブから生成されたアーカイブページをメニューに適用している場合については4項を参照してください。インデックス・テンプレートとカテゴリーアーカイブページを併用し、いずれもロールオーバー保持の対象にする場合は3項・4項の設定が必要です。

3.1 ナビゲーションバーを各ページにスタティックに設定している場合

対象のインデックステンプレートに設定されたナビゲーションバーの、特定の span タグに id属性を追加します。例えば "Search" ページを開いた時にナビゲーションの "Search" をロールオーバー状態にするには、テンプレート「Search.html」にあるナビゲーションバーの Search に対応する span タグに id属性(青色部分)を追加します。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link">Link</a></span> |
<span id="selected"><a href="<$MTBlogURL$>search.html" title="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a></span>
</div>

これと同様の作業を、ナビゲーションバーを設定している(かつロールオーバーを保持したい)各テンプレートに対して実施します。Home ページでは

<span id="selected"><a href="http://.../" title="Home">Home</a></span> |

About のページでは

<span id="selected"><a href="http://.../about.html" title="About">About</a></span> |

と、表示するページに対応する a タグに "selected" を付与します。保持したくないページについてはこの設定を行わなければOKです。
"selected" というIDセレクタを他の用途ですでに定義されている場合は名称を適宜変更してください。

3.2 ナビゲーションバーをモジュール化している場合

まずナビゲーションバーの a タグに id 属性(青色部分)を追加し、赤色で示した id 属性名を設定します。ここでは全ての a タグに設定していますが、保持する必要がないリンクについては設定不要です。

<div id="navbar">
<span><a href="<$MTBlogURL$>" title="Home" id="Home">Home</a></span> |
<span><a href="<$MTBlogURL$>about.html" title="About" id="About">About</a></span> |
<span><a href="<$MTBlogURL$>profile.html" title="Profile" id="Profile">Profile</a></span> |
<span><a href="<$MTBlogURL$>link.html" title="Link" id="Link">Link</a></span> |
<span><a href="<$MTBlogURL$>search.html" title="Search" id="Search">Search</a></span> |
<span><a href="mailto:hogehoge@hogehoge.com" title="Mail" id="Mail">Mail</a></span>
</div>

注:id 属性名はHTMLページで一意でなければなりません。

次に、ナビゲーションバーの直下に JavaScript を追加します。厳密に言うと、モジュールのテンプレートに JavaScript を追加するのではなく、ナビゲーションバー用モジュールをインクルードしているテンプレートに追加します。先の例と同様、"Search" をロールオーバー状態にするには、テンプレート「Search.html」にあるナビゲーションバーをインクルードしている直下にJavaScript(青色部分)を追加します。赤色部分の "Search" がナビゲーションバーの "Search" をロールオーバー状態にするためのキーとなります。

<? readfile('Search.html'); ?>
 
<script type="text/javascript" language="javascript">
var node = document.getElementById("Search");
node.parentNode.setAttribute("id","selected");
</script>

これと同様の作業を、ナビゲーションバーを設定した各テンプレートに対して実施します。赤色部分は,
Home 用テンプレートでは "Home"、About 用テンプレートでは "About" と、先のナビゲーションバーの a タグに設定した特定の id 属性名と一致するよう、適宜置き換えてください。保持したくないページは JavaScript 自体を設定しないでください。
id 属性名はHTMLページで一意になっていれば何でもOKですが、アルファベットで開始するようにしてください。

4.ロールオーバー保持の設定(カテゴリーアーカイブページとの連携)

一つないし複数のカテゴリーをナビゲーションバーのメニューとして設定されているケースも少なくないと考えられますが、この場合「カテゴリーアーカイブテンプレート」という同一のテンプレートを用いているため、先の方法は適用できません。
ということで、MTCategoryDescription を用いてロールオーバーを保持する方法をご紹介します。動作としては、MTCategoryDescription に設定された文字列を id 属性として用い、カテゴリーアーカイブに設定したJavaScriptにその値を渡すことで、対応するメニューをロールオーバー状態にするという作戦です。MTCategoryDescription がカテゴリーリスト表示等で用いられていないことが前提となりますのでご注意ください。

まず、管理メニューの「カテゴリー」で、ナビゲーションバーに設定しているカテゴリーを選択し、そのカテゴリーの「カテゴリー説明」欄にアルファベットで開始する任意の文字列を設定します。例えば「プロフィール」カテゴリーには「Profile」と設定します。
設定が終わったら保存・再構築します。

次に3.2項の前半と同様、ナビゲーションバーの a タグに id 属性を追加します。ここでの注意点ですが、id 属性には「カテゴリーの説明」で設定した文字列と同じものをそれぞれ設定してください。

最後にカテゴリーアーカイブに下記の JavaScript を設定します。赤色部分がミソ(←最近使いませんね)です。

<? readfile('Search.html'); ?>
 
<script type="text/javascript" language="javascript">
var node = document.getElementById("<$MTCategoryDescription$>");
if (node) {
    node.parentNode.setAttribute("id","selected");
}
</script>

以上です。

それぞれの設定がうまくできていれば、クリックしたメニューがジャンプ先のページでロールオーバーになっていると思います。下のイメージは"Search"をクリックしてジャンプしたSearchページのナビゲーションバーの状態です(「前回の使い回し」とか言わない)。

ナビゲーションバーサンプル

ご自身でナビゲーションバーをカスタマイズされる場合、ロールオーバーを保持する際に適用するスタイルはクラスセレクタ(.)では反応しませんので、サンプルのようにIDセレクタ(#)で定義してください。これはIDセレクタの定義がクラスセレクタの定義より優先されるためです。

その1:基本スタイル
その2:クリックしたメニューのロールオーバーを保持する
その3:クリック時のロールオーバーを追加

2005.11.07 追記
カテゴリーアーカイブを利用する場合のスクリプトを修正しました。

2005.12.18 追記
サンプルリストのリンク表示を修正しました。

Comments [17] | Trackbacks [3]

ナビゲーションバー・シンプルタイプ(その1:基本スタイル)

April 25,2005 11:59 PM
Category:[CSS]
Tag:[, , , ]
Permalink

最近ご近所のサイトでカレンダーやメニューの横配置が増えてきましたので、改めてナビゲーションバー(メニューバー)を作ってみました。まずは div タグと a タグを用いたシンプルなタイプです。これは今日の覚え書きさんのオサレなメニューバーを作ろう経由の

Accessify.comlist o matic

をベースにしています。このナビゲーションバーを使って3回に分けてカスタマイズ方法をお送りしたいと思います。

1.テンプレートの設定

まずメニューとなる下記のHTMLタグ(青色)をバナーの下に設定します。

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
<h2><$MTBlogDescription$></h2>
</div>
 
<div id="navbar">
<a href="<$MTBlogURL$>" title="Home">Home</a> |
<a href="<$MTBlogURL$>about.html" title="About">About</a> |
<a href="<$MTBlogURL$>profile.html" title="Profile">Profile</a> |
<a href="<$MTBlogURL$>link.html" title="Link">Link</a> |
<a href="<$MTBlogURL$>search.html" title="Search">Search</a> |
<a href="mailto:hogehoge@hogehoge.com" title="Mail">Mail</a>
</div>

設定したらテンプレートを保存・再構築します(この段階ではまだスタイルが設定されていないので整形された状態で表示されません)。URLやメニュータイトルは適宜修正してください。区切り線は "|" を使ってますが、半角空白や他のマークでも構いません。img タグで画像を配置することも可能です。

2.スタイルシートの設定

次に下記のナビゲーションバー用スタイルを styles-site.css に追加します。

/* ナビゲーションバー全体のスタイル */
#navbar {
    text-align: center; /* 配置 */
    font-family: Verdana, Arial, sans-serif; /* フォントスタイル */
    font-weight: normal; /* フォントの太さ */
    font-size: 12px; /* フォントサイズ */
    width: auto; /* 全体の幅 */
    line-height: 150%; /* テキストの高さ */
}
 
/* リンクのスタイル */
#navbar a{
    background-color: #ffffff; /* 背景色 */
    color:#666666; /* 文字色 */
    padding: 2px 5px 2px 5px; /* リンク文字のパディング */
}
 
/* リンクをポイントした時のスタイル */
#navbar a:hover{
    background-color: #8FABBE; /* 背景色 */
    color:#ffffff; /* 文字色 */
    text-decoration: none; /* テキストの装飾をなくす */
}

こちらも設定が完了したら保存・再構築します。それぞれの設定の主な役割をコメントで記していますので、適宜カスタマイズしてお使いください。設定がうまくできれば下記のメニューが表示されます(イメージは"Search"を選択している状態です)。

ナビゲーションバーサンプル
その1:基本スタイル
その2:クリックしたメニューのロールオーバーを保持する
その3:クリック時のロールオーバーを追加

2005.12.18 追記
サンプルリストのリンク表示を修正しました。

Comments [44] | Trackbacks [10]

BlogPeopleで複数ブログ登録時のログインID切り替え

April 24,2005 11:30 PM
Category:[BlogPeople]
Tag:[, , ]
Permalink

BlogPeople ログインID切替複数ブログを運用していて、それぞれをBlogPeopleに登録したい場合、BlogPeopleのログインIDを別々に取得する必要があります。つまり管理画面もログインID分存在することになりますが、BlogPeopleでは複数ブログ運用者のためにちょっと便利な機能があります。

例えばある人が「A」「B」の2つのログインIDを持っていて、BlogPeoleの「A」の会員ページにログインしている状態から「B」の会員ページにログインする場合、再ログインするのではなく、「A」のページから直接切り替えることができます。
具体的には、後述する設定を行うことで、会員ページ左上にある黄色で表示された「Aさんログイン中」という右側に、画像のような [切替] というリンクが表示されます。それをクリックするとその下に他のログインIDが表示されるのでそれを選択することで切り替えることができます。

設定方法は、「A」「B」それぞれの会員ページメニュー下にある「BlogPeople会員情報の設定」をクリックし、次のページの下にある「複数ブログを運用している会員用設定」で他のログインID(とパスワード)を登録します。「A」の会員ページでは「B」の情報を、「B」の会員ページでは「A」の情報をそれぞれ登録します。登録可能なログインIDは3つまでです。また片方しか登録していないとジャンプ元の会員ページに戻ることができませんのでご注意ください。

Comments [6] | Trackbacks [0]

マラソン選手

April 23,2005 6:15 PM
Category:[ダジャレ]
Tag:[]
Permalink

「イカンガーはいかんがぁ」というダジャレは

Comments [2] | Trackbacks [0]

Movable Type 3.16を日本語で使ってみる

April 22,2005 1:55 AM
Category:[3.16]
Tag:[, , ]
Permalink

Movable Type 3.162日ほど出遅れましたが、米国で3.16がリリースされました。日本語版は6月上旬にリリースされる予定らしいです。ので、6月10日23:59頃かと。(笑)

出遅れた分、取り戻してみました。英語版をインストールして日本語で使ってみるという実験です。お試しレベルですので動作保障は致しません。予めご了承ください。
まず Movable Type 英語版をダウンロードします。英語版はMovable Type のページのGet it now! をクリック。無償版については次ページの「BUY NOW」 というリンクの下にある「Download Now ?」をクリック。後は日本語版をダウンロードする時と同じです。
ダウンロードしたら日本語版と同様の手順でとりあえずインストールします。

日本語表示の画面日本語表示にするには、mt-load.cgi 起動後(起動前でもOKかも)、MT-3.151の lib/MT/L10N/ja.pm を lib/MT/L10N 配下にコピーして mt.cgi を起動します。起動後「プロフィールの編集」をクリックして次の画面の「言語の選択」で日本語が選択できるようになります。「設定」のページで「日付用の言語」を日本語に変更するのもお忘れなく。 テンプレート名等、一部英語のままですがメニュー自体は全て日本語で表示されました。テスト投稿も正常に表示されています(画像)。 気がついた点としては、スパム対策用のプラグイン「Nofollow」がデフォルトでひとつ入っていました。CCLは変わっていませんでした。 とりあえずここまで。
Comments [0] | Trackbacks [1]

BlogPeopleの「私を登録」での「サイト名」欄の改善

April 21,2005 1:25 PM
Category:[サイドバー]
Tag:[, , ]
Permalink

BlogPeopleのリンクリストにリンクを登録する時、登録サイトに表示されているBlogPeopleの「私を登録(うちはRegister this site ?)」をクリックされると思いますが、トップページ以外、例えば個別エントリーアーカイブ等で「私を登録」をクリックすると、登録ダイアログの「サイト名」欄にエントリータイトルが表示されることがあります。
サイトを登録する時はその都度そこで削除すれば良いのですが、他サイトからリンクしてもらってそこのリンクに「サイト名+エントリー」で表示されてしまっている場合は、コメントを出して変更してもらうという手間をかけていました。

ということで、どのページから登録されても「サイト名」欄にはサイト名だけしか表示しないカスタマイズを行いました。参考記事および元記事は下記です。ありがとうございました。

今日の覚え書きBlogPeopleの「私を登録」を使いやすく
cocoons.org*BPの「私を追加」をいじる
CEFA::BlogBlogPeopleサービス「私を登録」の落とし穴

以下、参考サイト様と似たような内容になってしまって大変恐縮ですが動作説明です。
BlogPeopleの「私を登録」では「サイト名」欄名をJavaScriptの

document.title

で取得しています。Movable Type の個別エントリーアーカイブのデフォルトテンプレートでは title タグに

<$MTBlogName$>: <$MTEntryTitle$>

が設定されていますので、結果的にエントリータイトルが表示されます。
タイトルのみを取得するようにするためには「私を登録」のタグを下記のように修正します。

<a href="javascript:void(bloppop=window.open('http://www.blogpeople.net/addlink.jsp??(中略)?='+escape(document.title'<$MTBlogName encode_html="1"$>'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">私を登録</a>

再構築すると、変更部分のMTタグは文字列に変換されてHTMLソースに表示されますので、そういう意味では青色部分にサイト名を直接書き込んでも同じ効果が得られます。

Comments [7] | Trackbacks [1]

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

April 20,2005 11:00 PM
Category:[ご利用サイト]
Tag:[, , ]
Permalink

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

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

Magic White:みよたんさん
Daily note:miaowさん
宵待小桜餅:さくらもちさん
チョコチッブログ:ユキさん
うだうだうだ:わっちゅさん
今日の覚え書き:もそさん
[O*]**ORANGE**:mayumiさん
やむやむ:さえらさん
[k]kazunoblog:kazさん
我楽:Border.さん
う・わ・き・も・の:真希さん
Sans-Souci:さとしえさん
★ひとりごと日記★:ちえさん

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

  1. **ORANGE**
  2. **Silver Heart**
  3. ++お花ダイスキ!++
  4. ++Open My Heart++
  5. +みゅみゅうさ+
  6. -h@tezone-
  7. /PEN/
  8. /var/tmp/blog
  9. 05
  10. 404
  11. 84xx.daa.jp
  12. :: Figaro_express ::
  13. a n i
  14. 今日の行方
  15. angeli-x ++ monologue
  16. ?風を追いかけて?
  17. あっぷるじゅ?す
  18. あふなびブログ
  19. うだうだうだ
  20. えてぽんの部屋
  21. お気楽草紙
  22. くま小屋( ̄(エ) ̄)v
  23. 5587.chan.com
  24. とりとめなき日記
  25. にゃ?ごろ
  26. のんべサラリーマン
  27. はいねぶ
  28. ひばり座ブログ
  29. ひびのつぶやき
  30. ふんわり堂
  31. ほたるすたいる
  32. ぼくたび BLOG
  33. ぼけぼけどっとこむ
  34. まんがboo(漫画部)
  35. やむやむ
  36. ゆきのきもち
  37. ゆるっ!
  38. よろずブログ
  39. わいるどで行こう
  40. アイドルの草鞋
  41. オナカン
  42. ギャンブル三昧!
  43. チョコチッブログ
  44. ツキヘノトビラ
  45. ドール・ヒステリア
  46. ナリモノイリ
  47. ボクはちゃんとビジネス本読んでます!
  48. ポポタム!
  49. ラパンdeドライブ宙-ケータイ大好き-
  50. ■□ WAY OF LIFE □■
  51. B*note
  52. BEAT ZONE
  53. beeカメラ
  54. Blogのような日記のような
  55. 店主のつぶやき・・・「プロの道具屋さん」
  56. Blue Mint
  57. bublog
  58. camera verde blog
  59. Carefree Field
  60. Centree's Blog
  61. Cherry-Radio
  62. Ciao*
  63. Cococcino Days*
  64. CocoNuts Days
  65. COLOR NO.A
  66. comi☆Log.
  67. Cool Gaming weBlog
  68. 無線LANテック
  69. 社会分析的ブログ
  70. 秀丞写文庫
  71. Daily note
  72. DB blog
  73. Dontkoi OMG! ヽ(; ̄▽ ̄)ノ
  74. D'sDinner@Blog
  75. Страх Кино
  76. emo.com
  77. Eternal Forest ?悠久の森?
  78. existence Uhheri Edition
  79. EXPECT THE UNEXPECTED
  80. 適宜更新
  81. 脳内物質大流室inBLOG
  82. AMBITION&DESIRE
  83. 雑貨*Zakka*サーチねっとMEMO
  84. 蘭のきまぐれblog
  85. 零式改
  86. 青い自転車とどこまでも。
  87. 螺子式少年
  88. 馬に蹴られて
  89. 越中のケツ、森嶋の髪。
  90. 黒鱒 - weblog
  91. Fourseasons
  92. From Narita Airport
  93. gの徒然Blog
  94. GF*days
  95. Grip Blog
  96. hilari blog
  97. HiMAT
  98. HONGKONG+fish Hyper×2
  99. IdeOnline
  100. iRodoRi@BLOG
  101. *だらだら雑記*
  102. 3足のわらじ
  103. kazunoblog
  104. KEEP THE FAITH
  105. KeiBlog
  106. KH Weblog
  107. L・E・L・S
  108. LOVE SWIMMING Blog
  109. LUNCH BOX note*
  110. M*C?B Version?
  111. M*s Cafe-Blog-
  112. Magic White
  113. MAHALO
  114. Maio's Weblog
  115. MandraChips
  116. Minologue
  117. Mo-jah's Blog
  118. monochrome green
  119. Monochrome Recollections
  120. moon & apple
  121. MovableType@きりるーむ
  122. My Sweet Moana
  123. N-blog
  124. Nachtigall
  125. neko no 肉球@BLOG
  126. NEOといっしょ
  127. NO DOUBT
  128. nobubu Eyes
  129. Nonsence?
  130. NOP DAYS
  131. patapata:blog
  132. Peco Net
  133. PHAT∴LOVESICK
  134. pmLabo
  135. P's Blog
  136. Release Candidate 2
  137. S.O.O.S.blog
  138. SAKSAK RECORDS WEB SITE
  139. sands2kの諸々
  140. Sanssouci
  141. Search the happy way
  142. SEYA.ORG
  143. Slip-on Way
  144. Slow but Sure*
  145. SOYGRAPH
  146. STARLIT SKY
  147. Stupid excuse!!
  148. Suzie World
  149. Sweetly Blog *
  150. the end
  151. TOKYO Runabout
  152. TOY COZY MUSEUM 別館
  153. Treasure
  154. vanilla_cafe*
  155. vvhappy-roadvv
  156. weblog@nigiyakana jikan
  157. WInds of Cemetery
  158. zora*
  159. [美]Musabi Diary - a-bit-
  160. [EF] Electric Flower
  161. 初心者のためのデジカメ活用入門
  162. 匠悟録
  163. 喜怒哀楽
  164. 夏海の恋愛事情。
  165. 天上月苑
  166. 宵待小桜餅
  167. 寝言、戯言、独り言。
  168. 己でサイトジャック
  169. 後藤真希 ワオワオ記念日
  170. 我楽
  171. 日々一歩-裏-
  172. 時は流れても・・・
  173. 月夜の浜辺
  174. 気ままな旅人になれたなら
  175. 洒落のひとり言
  176. 海苔部落
  177. 深い雪
  178. 今日の覚え書き
  179. 体験手記レポート部
  180. 激安!サーフショップ
  181. どんぐり倶楽部
  182. sleepyblog
  183. Hot cocoa
  184. kitchen
  185. ネットショップ・オペレーション・マニュアル
  186. 人間万事塞翁が馬 で行こう
  187. baddreamfancydresser
  188. いとしのマヤー
  189. Yellow Heart
  190. 最強blog
  191. らうんじ
  192. Kitchen * Box
  193. 山吹の風
  194. コハルビヨリ。
  195. BLUE PALETTE
  196. cookietale
  197. petit*asterisk@お買い物日記
  198. 居宅介護支援事業所このみ
  199. ものづくり日記
  200. Ui-ed
  201. Postposition.Net Blog
  202. * お気楽で行こう *
  203. つのとカブいっしょに
  204. アルファ道場2005
  205. THE SUN ALSO RISES
  206. 店主のつぶやき・・・「プロの道具屋さん」
  207. あどべがの館
  208. わたしのヒトリゴト あさきぬ工房
  209. Sono's Every day
  210. solgel.info::そるじぇるどっといんふぉ
  211. 彫刻道-ドイツ・彫刻・日記-
  212. groovecube ver.3
  213. かわさき life
  214. MY STYLe
  215. beautiful hobby life
  216. KG
  217. maki's space
  218. Moony*Moony
  219. SHO's**My...Day...**
  220. ガラスびんの空と雲
  221. Mami's note
  222. my style*
  223. ( ・ω・)Shinのぼやき
  224. 改訂★裏赤玉号[改]日誌
  225. mazdayaspeedおんらいん
  226. coffee break
  227. Orbium
  228. やっつけWeb
  229. モンテカルロマニア
  230. 笑福庵
  231. RELISH Cafe
  232. 信海忠如どっとこむ
  233. is life delisious?
  234. formless room
  235. World without Words.
  236. Final One's Essence
  237. Pubsonal パブソナルを考えるブログ
  238. Un duex trois
  239. langsam
  240. MT勉強室
  241. Press-code.net
  242. ○△□ たど船
  243. チカチカの羅針盤
  244. *Coffee Break*
  245. mama's blog
  246. レジェンダロッサの独り言
  247. 職人カタギ
  248. fang-lang.net
  249. あゆみ::mamalog
  250. -CROSSIDE MANIA-
  251. love
  252. Unknown
  253. 恵司日記
  254. どうでもいいこと
  255. Sans-Souci
  256. HENO HENO
  257. SR ** P i c k U p **
  258. 4REAL
  259. SWEET WATER Web Server
  260. Love is Blind.
  261. Routinework Blog
  262. どらむすめ.com
  263. お取り寄せ大好き.com
  264. MakkyののほほんDiary♪
  265. blog::made in SAGA
  266. 寝不足どっとねっと
  267. Whisper
  268. 猫派の読書寝殿
  269. YUIHARU DIARY
  270. 『ブタネコのトラウマ』 Blog版
  271. land2go!!
  272. PORNOGROOVE.COM
  273. ■やさしい生活■
  274. ★ひとりごと日記★
  275. 樹問Jumon
  276. flatcrew.net : column
  277. 人生朝露のごとし。
  278. あそび
  279. ヤタさんの気まぐれ日記
  280. AmitoMidnight
  281. K-Jirow BLOG
  282. [ Slow ”UO” Life ]
  283. YBC-time
  284. ハルニレの木の下で
  285. 今日まで、そして明日から。-3rd spiral-
  286. なでしこblog
  287. NOWい!ブログ
  288. G137
  289. mattari-blog
  290. se a vida e
  291. CU*Chu!
  292. FreeStyle
  293. WhiteжButterfly
  294. 暮らし快適!ナチュラル家事のススメ
  295. 長靴をはいたシステムエンジニア
  296. KillerPierce
  297. : : useful days* ? : :
  298. Dans le destin malheureux
  299. わたあめすもも
  300. Exist a Reason

なお本リストは「小粋な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を送信してください。
テンプレートご利用者の方にお役立て頂ければ幸いです。

2005.04.22 追記
重複サイト1件削除。代わりにお休み中のサイトが復活されていたので追加しました。

Comments [19] | Trackbacks [0]

カテゴリーアーカイブで MTCategoryDescription をタイトルに使う

カテゴリーリスト表示で MTCategoryDescription に日本語を設定して MTCategoryLabel の代わりに用いている方は少なくないと思います。この設定にしている理由は、

  • Movable Type 2.x の時に MTCategoryLabel に日本語を設定すると不具合が発生していた(この設定を 3.x でも引き継いで使用)
  • MTCategoryLabel に順序性のある文字列(01・02…等)を与えてカテゴリーリストを期待する順序に並べる

のどちらかであると考えられます。
この設定を行っている場合、カテゴリーアーカイブでは MTCategoryLabel が MTArchiveTitle として解釈されるので、例えばデフォルトテンプレートでは MTCategoryLabel がタイトルとして表示されるという問題があります。

単純に MTArchiveTitle を MTCategoryDescription に置き換えればよいのですが、ユーザーマニュアルからは MTCategoryDescription が

<MTCategories>
     :
</MTCategories>

の中でしか使えないように思えます。ところがカテゴリーアーカイブに限っては MTCategoryDescription を単独で用いることができるようです。
したがって、カテゴリーアーカイブの title タグは

<title><$MTBlogName encode_html="1"$>: <$MTArchiveTitle$><$MTCategoryDescription$> アーカイブ</title>

とすれば「カテゴリーの説明」が表示されます。

また公開テンプレートのカテゴリーアーカイブで、左カラムにカテゴリーのエントリー一覧を表示する部分についても

<div class="sidetitle">
The list of "<$MTArchiveTitle$><$MTCategoryDescription$>"
</div>

と修正すればOKです。

MTCategoryDescription がカテゴリーアーカイブで独立したタグで使えるというのは、Movable Type 公式サイトMovable Type 3.0 日本語版ベータ2のご提供Ogawa::Memorandaさんのコメントで書かれている記事がありました。
また「MTCategoryLabel に番号をつけて表示する際に番号だけカットする」というプラグインもありますので併せてご紹介させて頂きます。

The blog of H.Fujimotoカテゴリを任意の順番に並べ替える
Comments [5] | Trackbacks [2]

Movable Type で月表示がチェコ語になる問題

April 18,2005 1:05 PM
Category:[3.151-ja]
Tag:[, , ]
Permalink
月表示がチェコ語になる問題他のサイトでも紹介されていますが、Movable Type の管理メニュー「新しいウェブログの作成」より2つめ以降のウェブログを作成すると、カレンダーの月表示や投稿表示月がチェコ語になるという問題があります。 左の画像のようにトップページに文字化けしたような月が表示されている、または数字しか表示されていないか、再構築用のダイアログ画面で再構築後に
Use of uninitialized value in substitution iterator at …/lib/MT/Util.pm line 150.

というメッセージが出力されればチェコ語になっています。

これを修正するには、管理メニューより「ウェブログの設定」をクリック→次ページで右上の「設定」をクリック→次ページ最初の方に「日付用の言語」というプルダウンメニューがあります。ここで「チェコ語」が選択されているので「日本語」を選択して、「変更を保存」をクリック。最後に再構築します。
「チェコ語」が選択されているのは単にプルダウンメニューの先頭にあるからで、ユーザ設定項目という位置付けであればMTの不具合ではなく、単なる設定もれという結論になります。

ここでは「2つめ以降」と記しましたが、最初のウェブログ作成で発生することを想定されている記事もありました。

サイバー・ボックスMovable Type 3.15 日本語版 設置手順

また以前、「カレンダーの月表示が文字化けしている」というコメントを頂いたことがありまして、その時は結局再インストールして頂いたのですが、この設定に気がついておりませんでした。
この場をお借りしてお詫び申し上げます。

Comments [2] | Trackbacks [2]

ブログタイプ

April 17,2005 3:20 AM
Category:[小品文]
Tag:[, ]
Permalink

土曜日23:30?、フジテレビ系列で「ブログタイプ」という番組が先週から始まってますね。名前の通り、ブログに書かれた日記をショートコント化したもののようです。

ということで公開サイトを調べてみると、Yahooブログから「ブログタイプ」というカテゴリーで投稿した記事と連動しているようで、そこから番組に採用される可能性があるようです。採用された方にはYahooポイント50000ポイントを進呈。
一応空のYahooブログを持ってまして、アクセスしてみると「ブログタイプ」というカテゴリーが追加されていました。

ブログからの投稿を採用という点でタイトルとして前面に押し出しているようで、ブログ自体のイメージが番組からつかめないとしても、名称だけは世間に浸透しそうです。欲を言えば公式サイトにもう少しブログ感があればというところでしょうか(トラックバックできるとか)。

ともあれこの企画、ウチは縁遠いサイトです。

Comments [2] | Trackbacks [0]

花粉症

April 16,2005 4:03 PM
Category:[ダジャレ]
Tag:[, ]
Permalink
Comments [4] | Trackbacks [0]

テンプレートのバナーを設置

April 15,2005 6:50 PM
Category:[サイト変更履歴]
Tag:[, , ]
Permalink

テンプレートのバナーサイドバーに2/3カラムテンプレートのページへジャンプするバナー(というには大きいですが)を設置しました。今のところ個別エントリーアーカイブの右上に表示しています。

最近のトラックバックを拝見させていただくと、カスタマイズで当サイトを訪れて下さる方が多くなってきたようで、大変嬉しく存じます。で、訪問された際にダジャレテンプレートも積極的に紹介させて頂こう、というのが設置した目的です。またカスタマイズ記事で公開テンプレートのタグを出現させている割合が少なくないので、タグの構成が不明な場合にテンプレートのページへ速やかにジャンプできる配慮、という意味も含んでいます。

以前よりページ右下にテンプレートのテキストリンクは貼ってありますが分かりにくいので、もう少しアピールしてみようかと。

2005某日 追記
現在は外しています。

Comments [2] | Trackbacks [0]

花林糖(かりんとう)を

April 14,2005 9:34 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [4] | Trackbacks [0]

3カラムテンプレート(可変)を2カラムに変更する方法

April 13,2005 11:13 PM
Category:[テンプレート]
Tag:[, , ]
Permalink

本サイトで公開中の Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ可変)を2カラム(サイズ可変)に変更する方法について記します。
修正前に、3カラムテンプレートの基本的な構造を簡単に説明しておきます。

まず3カラムの対象となっているテンプレートは

  • メインページ
  • カテゴリー・アーカイブ
  • 日付アーカイブ
  • 個別エントリーアーカイブ
  • コメントプレビュー
  • コメントエラー

です(1カラム版を使用しているテンプレートは適宜対象から外してください)。

次に、各テンプレートで3カラムを表示するためのタグは下記のような構成になっています。

<!-- 左サイドバー開始 -->
<div id="links-left">
      :
(左サイドバーのメニュー)
      :
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      :
(右サイドバーのメニュー)
      :
</div>
<!-- 右サイドバー終了 -->

青色のタグにある id 属性の links-leftcontentlinks-right がそれぞれ左カラム・中央カラム・右カラムであることを示しています。そしてこの中に記述されたタグがそれぞれのカラムに配置されるという訳です。
「サイドバーのメニュー」と書かれた部分は、

<div class="sidetitle">
メニュータイトル1
</div>
 
<div class="side">
メニューリスト1
</div>
 
<div class="sidetitle">
メニュータイトル2
</div>
 
<div class="side">
メニューリスト2
</div>
    :

という構造でメニュータイトルとメニューリストがペアになって並んでいます(注:カレンダーにはメニュータイトルはありません)。公開テンプレートをそのままの状態で使用されている場合は、メインページの左サイドバーには「カレンダー」「最近のエントリー」「最近のコメント」「最近のトラックバック」が、右サイドバーには「検索」「カテゴリーリスト」「月別アーカイブリスト」等が並んでいます。
つまり、この部分を片方のサイドバーにごっそり移動させ、スタイルシートに修正をちょっと加えることで2カラムに変身させることができます。

ということで以下に具体的な修正方法を記します。左右いずれのサイドバーを残すかによって修正方法が2通りありますのでご注意ください。

1.サイドバーを左だけにする場合

下記リストのように、右サイドバーのメニューを左サイドバーの任意の位置(ここでは </div> の直前)にペーストします(青色)。元の右サイドバーのタグ(赤色)は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
      :
(左サイドバーのメニュー)
      :
 
      :
(右サイドバーのメニュー)
      :
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      
右サイドバーのメニュー
      
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落(トップページ) */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-right : 0px ;
    margin-left  : 185px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}

2.サイドバーを右だけにする場合

下記リストのように、左サイドバーのメニューを右サイドバーの任意の位置(ここでは </div> の直前)にペーストします(青色)。元の左サイドバーのタグ(赤色)は全て削除します。

<!-- 左サイドバー開始 -->
<div id="links-left">
      
左サイドバーのメニュー
      
</div>
<!-- 左サイドバー終了 -->
 
<!-- 中央コンテンツ開始 -->
<div id="content">
      :
(中央カラム(本文))
      :
</div>
<!-- 中央コンテンツ終了 -->
 
<!-- 右サイドバー開始 -->
<div id="links-right">
      :
(右サイドバーのメニュー)
      :
 
      :
(左サイドバーのメニュー)
      :
</div>
<!-- 右サイドバー終了 -->

スタイルシートの id属性 "content" について、赤色部分を削除して青色部分を追加します。

/* エントリーのある大段落(トップページ) */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-left  : 185px ;
    margin-left : 0px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}
Comments [5] | Trackbacks [1]

BerkeleyDB と MySQL のベンチマークテスト

April 12,2005 8:00 PM
Category:[MySQL]
Tag:[, , , , ]
Permalink

念願の自宅サーバ MySQL 化で、早速 BerkeleyDB との性能を比較してみました。
タイトルはDBのベンチマークテストになってますが、具体的には Movable Type の主要な操作を、開始?応答が返ってくるまでのおおまかな時間で示しています。ブラウザは Firefox1.0 を使用しました。

1.コメント投稿

  BerkeleyDB 20s
  MySQL 6s

2.再構築

インデックス

  BerkeleyDB 12s
  MySQL 5s

個別エントリーアーカイブ

  BerkeleyDB 213s
  MySQL 44s

月別アーカイブ

  BerkeleyDB 116s
  MySQL 20s

日別アーカイブ

  BerkeleyDB 151s
  MySQL 35s

カテゴリーアーカイブ

  BerkeleyDB 115s
  MySQL 17s

すべて

  BerkeleyDB 660s
  MySQL 139s

3.エントリーの読み込み・書き出し

エントリーの読み込み

  BerkeleyDB (未測定)
  MySQL 120s

エントリーの書き出し

  BerkeleyDB 150s
  MySQL 96s

グラフでお分かりの通り、レスポンスが飛躍的に向上しています。DBを一人で占有している状態ですのでレンタルサーバではこのままの値は当てはまりませんが、自宅サーバ環境では MySQL に大きなアドバンテージがあることがお分かりになると思います。

エントリーの書き出しは、IEでは読み込みサイズに比例して二次曲線的にレンダリング性能が悪化するようです。ファイルサイズが大きい場合、私の環境の問題でなければこの作業は Mozilla 系のブラウザで行われることをお勧めします。ちなみにIEではいずれのDBについても、書き出しに45分?1時間近くかかりました。
ということで Firefox を使いました。

参考までに上記測定時のブログデータを以下に記しておきます。われながらすごい量です。

対象データ

  • エントリー:564
  • コメント:2751
  • トラックバック:997
  • カテゴリー:43
  • 投稿月:18ヶ月
  • 投稿日:564日
  • インポート用データサイズ:約3.6MB

再構築時の対象テンプレート

  • メインインデックス
  • 最近のエントリー(モジュール化)
  • 最近のコメント(モジュール化)
  • 最近のトラックバック(モジュール化)
  • 月別アーカイブ(モジュール化)
  • サブカテゴリーリスト(モジュール化)
  • Atomフィード
  • RSD
  • RSS1.0
  • RSS2.0
Comments [4] | Trackbacks [1]

サイトリニューアル(MySQL化)

April 11,2005 12:00 AM
Category:[サイト変更履歴]
Tag:[, , , , ]
Permalink

デザインのリニューアルではありませんが、Movable Type 3.151-ja 新規インストール + MySQL という大幅な改修を行いました。これによりコメント・トラックバックのレスポンスが相当速くなると思います(多分)。

一部旧環境からの修正が完了しておりませんが、とりあえず開始します。

Comments [0] | Trackbacks [0]

このリンス(2)

April 10,2005 11:57 PM
Category:[ダジャレ]
Tag:[]
Permalink

売り切れで

Comments [4] | Trackbacks [0]

Movable Type公式タグリファレンス

April 9,2005 1:58 PM
Category:[Movable Type]
Tag:[, , ]
Permalink

multithreadさん著書の「Movable Type公式タグリファレンス」がオーム社より発売されました。名前の通り、すべてのMTタグおよびタグアトリビュートに関する解説のみを扱い、インストール等の基本操作は省略されているようです。またサイト記事によると「テンプレートを編集してデザインできるレベルの人を想定 して」書かれているようで、以前紹介した「Movable Typeスタイル&コンテンツデザインガイド」より、さらにタグ部分に特化された内容と思われます。

Movable Type公式タグリファレンス
山本 浩司 シックス・アパート株式会社
RBB Press (2005/04)
売り上げランキング: 2,871
おすすめ度の平均: 4.5
4 便利な1冊だが......
5 これですよ、欲しかったのは!
Comments [8] | Trackbacks [5]

このリンス

April 8,2005 11:00 PM
Category:[ダジャレ]
Tag:[]
Permalink

キューティクルに

Comments [8] | Trackbacks [0]

埋め込み e-words を使う

April 7,2005 11:59 PM
Category:[]
Tag:[, , ]
Permalink

埋め込みe-words埋め込みe-words」とは、Webページに関連するIT用語リストを表示するプラグインです。具体的には、プラグインを埋め込んだページにIT用語が存在する場合、そのIT用語の一覧を表示するというものです。そして表示された各項目をクリックすると、対応するe-Wordsの解説ページにジャンプします。

今のところ個別エントリーアーカイブの右サイドバーにこのメニューを設定しています。私のサイトではカスタマイズ記事が多いので、これを併用くださることで用語の理解が深まるかもしれません。「Movable Type」自体も用語に含まれています。
この情報は Magic White さんより教えていただきました。ありがとうございました。

詳細は公式サイトをご覧いただくとして、とりあえず公開テンプレートをご利用の方は下記のような設定になります。なお、表示されるリストは ul - li タグしかサポートしておりませんので予め設定が必要となります。

<div class="sidetitle" id="e-wordsname">
e-Words
</div>
 
<div class="side" id="e-wordslist">
<script type="text/javascript" src="http://e-words.jp/embed.x"></script>
</div>

画像のようにツリー化表示するにはツリー化スクリプトを導入して、上記タグのすぐ下に

<script type="text/javascript" language="javascript">
<!--
generateNormalTree("e-wordslist");
//-->
</script>

を追加してください。なお IE でツリーが表示されない場合がある、という不具合が発生しておりますので予めご容赦ください(原因不明です)。

Comments [4] | Trackbacks [5]

いろんな

April 6,2005 11:50 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [0] | Trackbacks [1]

奇跡の711

April 5,2005 11:59 PM
Category:[小品文]
Tag:[]
Permalink

711近所のスーパーでハシゴして買い物をしたらどちらも同じ合計金額でした。それだけです。(笑)

他にも、仲間で食事をしてまとめて払ったら丁度10000円だったとか、買い物で小銭を出したら財布の硬貨がきれいになくなったとか、思いがけない小市民的感動が結構好きだったりします。

Comments [9] | Trackbacks [0]

IEでソースの表示ができない場合の対処

April 4,2005 11:59 PM
Category:[PC]
Tag:[, , ]
Permalink
IEでソースの表示ができない場合の対処気に入ったWebデザインが見つかった時、HTMLソースを参照されている方は少なくないと思いますが、時々IEのメニューの「表示」→「ソース」や、右クリックやショートカットで選択する「ソースの表示」が突然できなくなる場合があります。
このような場合はメニューの「ツール」→「インターネットオプション」を選択して、表示されたダイアログ(左の画像)の「全般」タブの真中にある「ファイルの削除」をクリックする(さらにダイアログが表示されるので「すべてのオフラインコンテンツを削除する」にチェックをつけて「OK」をクリック)と解消するようです(私はこれでなおりました)。同じタブの下にある「履歴のクリア」も行った方が良いようですがこちらの効果の程は定かではありません。

この対処方法は下記のサイト等で紹介されています。

@IT:Windows TIPSIEの「ソース表示」機能が利用できない場合の対処法
Comments [6] | Trackbacks [0]

トラックバック・ピープルのバナーをランダム表示する

April 3,2005 10:10 PM
Category:[サイドバー]
Tag:[, , ]
Permalink

ダジャレ・トラックバック・ピープルは3つのバナーを登録しておりまして、時々切り替えて使おうと思っていましたが手動で設定を変更するのはやや面倒なので、自動的にランダム表示できるよう細工してみました。
下記のように生成スクリプトにPHPを埋め込んでいます。確率の問題もありますが一応1クリック毎に切り替わるようになっています。

<?php
    mt_srand((double) microtime() * 1000000);
?>
<script language="javascript">b=0<?php echo mt_rand(0, 2); ?>;</script><script type="text/javascript" src="・・・(略)・・・" ></script>

青色部分を追加します。消し線の数字はバナーの番号を示している部分で、この部分も青色のスクリプトに置き換えます。バナーが2種類の場合は

mt_rand(0, 1);

とすればOKです。
他の生成コードを利用されている場合も

b=n;

n の部分を置き換えれば良いと思います(試していませんので間違ってたらお許しを)。

Comments [0] | Trackbacks [1]

Blog Hack

April 2,2005 11:59 PM
Category:[ダジャレ]
Tag:[]
Permalink
Comments [4] | Trackbacks [0]

サイドメニューの折りたたみ(v4.0)

お知らせ:現在 Ver5.0 をリリースしています。

サイドメニューの折りたたみ(v4.0)これまでの折りたたみスクリプト menufolder.js を大幅に改造してバージョンアップしました。今回の大きな追加機能はブロックレベル要素指定によるリンクです。つまり画像のように、メニュータイトル枠全体をリンクとして設定することができます。これまでは折りたたみマークを狙ってクリックする必要がありましたが、この設定に変更することで操作性が向上すると思われます。ブロックレベル要素指定+折りたたみマークの表示も可能ですし、これまでの折りたたみマークのみへのリンクも可能です。
またリスト数を計算するタグは a タグのみでしたが、ご近所のサイトでメニューリストをツリー化される方が増えてこられましたので、任意のタグ(li 等)を指定して計数することも可能にしました。その他設定データを追加して表示位置を微調整できるようにしています(役立つかどうかは分かりませんが)。

スクリプトの設定内容はバージョンアップ毎にエントリーに記すと大変なので、下記のページにまとめてみることにしました。

menufolder.js マニュアル

バージョンアップに伴って新たに追加となったデータは次の通りです。

  • linkType:リンク方式
  • displayMark:リンクマーク表示
  • modificationFlag:タイトル表示位置補正フラグ
  • offsetForTitleAndLinkNumber:タイトルとリスト数のスペース
  • preMarkForSubCategory:サブカテゴリー用折りたたみマーク挿入位置
  • offsetForTitleAndMark:サブカテゴリーのタイトルとマークのスペース

これまでのデータはそのまま残しています。既存の折りたたみマークのリンクでタイトル表示位置を補正している場合は、新たに追加した modificationFlag を ture に設定してください。
他の設定については先のマニュアルをご覧頂くとして、ここではブロックレベル要素指定によるリンクのカスタマイズについて記したいと思います。

1.menufolder.js ダウンロード

下記のリンクをクリックするとスクリプトのページへジャンプします。そこで menufolder.js をクリックし、同じファイル名でご自身のPCに保存してください。

download

本スクリプトはUTF-8で記述していますので、ブログで使用している文字コードがUTF-8以外の場合(Shift_JIS/EUC-JP等)は保存後、文字コードを適宜変更して再保存してください。この問題につきましては js ファイルのインクルード時、script タグにcharset 属性を指定することで文字コードを変更しなくても良いという記事を見つけましたが動作実績がありませんのでこのような記述にしています。scriptタグの設定については3項に記してますのでお試し頂ければ幸いです。

2.menufolder.js の設定

menufolder.js を更新される方は大変申し訳ありませんが現在設定されている内容を比較して再設定してください。なおこれまで用いたデータ名はそのまま使っておりますので、データ名で検索されると効率良く更新できると思います。
ブロックレベル要素指定によるリンクを有効にするには linkType を 'block' に設定してください。さらにその状態で折りたたみマークを表示させる場合は displayMark に true を設定します。なお本機能では折りたたみマークはタイトル横になります。つまり左右いずれかの端に設定することはできませんので予めご了承ください(スタイルシートを修正して左右いずれかに位置を揃えた表示にすると綺麗だと思います)。設定イメージを示しておきます。

折りたたみマークを表示しない場合

// リンク方式
// 折りたたみマークにリンク付与:'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
    :
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する:true
// 表示しない:false
var displayMark = false;
 
// 折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

折りたたみマークを表示する場合

// リンク方式
// 折りたたみマークにリンク付与:'unblock'
// メニュータイトル枠全体にリンク付与 'block'
var linkType = 'block';
    :
// 折りたたみマーク表示(メニュータイトル枠全体をリンクにする場合のみ有効)
// 表示する:true
// 表示しない:false
var displayMark = true;
 
// 折りたたみマーク
// 上:閉じている状態で表示されるマーク
// 下:開いている状態で表示されるマーク
var openMarkForSideBarMenu = '';
var closeMarkForSideBarMenu = '';

なお折りたたみマークを表示しない場合は displayMark を false にすればその下のマークは無視されますが、SWEET WATER Web Server さんより頂いたコメントの通り Firefox では表示に不具合がある(スクリプトのバグ?)ようですので、その下の openMarkForSideBarMenu / closeMarkForSideBarMenu の設定もリストのように '' にしておいてください。

設定が終わったら保存してローカル・サイト・パス(index.htmlと同じ位置)にアップロードまたは配置してください。

3.スタイルシート追加

スタイルシート(styles-site.css)に下記を追加します。class 属性はとりあえず sidetitle2 としていますが、任意の名称で構いません。

.sidetitle2 {
    width: auto;
    margin:3px 0px 0px 0px;
    padding: 0px;
    text-align: center; /* テキスト配置 */
}
 
.sidetitle2 a {
    width: auto;
}
 
/* 通常 */
.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;
}
 
/* マウスポイント時 */
.sidetitle2 a:hover {
    padding: 2px;
    border: 1px solid #999999; /* 枠線 */
    color:#ffffff; /* 文字色 */
    background-color: #999999; /* 背景色 */
    font-family: Verdana, Arial, sans-serif;
    font-size:10px;
    text-decoration: none;
}

設定が終わったら保存・再構築してください。うまくできればマウスポイント時に画像のような反転を行います。自分で言うのも何でですがポイント時は地味な配色なので、適宜お気に入りの色に修正ください(色変更に必要な箇所をコメントで示しています)。全体のスタイルもご自由に変更くださって結構です。

4.テンプレート修正

公開テンプレートの場合、折りたたみを行いたいテンプレートの各メニュータイトルの設定部分に青字の「2」を追加します(class 属性を sidetitle2 としたのはこのためです)。

<div class="sidetitle2" id="newentries">
Recent Entries
</div>

設定が終わったら保存・再構築してください。
なお折りたたみが不要なメニューについてはこの設定を行わないでください。つまり折りたたまないメニューはこれまでのスタイルを用いる必要がありますので、既存の class 属性を流用するのはやめましょう。

5.動作の不具合について

原因は不明ですが、左サイドバー上部にカレンダーが表示されていない場合、左サイドバーのメニューについては文字の部分しかリンクが適用されません。確認したところ、table タグの caption が設定されていればそれ以降の設定についてブロック全体がリンクになるようです。

以上です。それぞれの設定に矛盾があるとタイトル部分の中央に折りたたみマークだけが表示されたり、タイトル自体の表示が崩れる場合があります。そのような場合、linkType と 適用するスタイル、それから class 属性が適正であるかご確認ください。

本サイトでは2005/3/31よりこの設定に変更して運用中です。不具合等ございましたらご連絡頂けると幸いです(明快な回答はできないかもしれませんが)。

2005.04.02 追記
Firefox の場合の不具合および設定データのリストを追加しました。またスタイルシートについては色変更に必要な箇所をコメントで示しました。

Comments [231] | Trackbacks [80]
Now loading...
Introduction
List of "April 2005"
Recent Entries
Recent Comments
Recent Trackbacks
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site
loading ...
Categories
Monthly Archives
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 5.12