公開テンプレートにフッタを追加する（2カラム版）
公開テンプレートの2カラムレイアウトの下に著作権表示等のフッタを追加するためのカスタマイズです。以前、3カラムレイアウトにフッタを追加する「公開テンプレートにフッタを追加する」でご質問を頂きましたので本エントリーにて紹介致します。スクリーンショットは固定レイアウトにフッタを追加した完成例です（フッタ部分のみ切り取って表示させています）。
なお、リキッドレイアウトと固定レイアウトでカスタマイズ内容が異なりますのでご注意ください。
１．固定レイアウトの場合
１．１ テンプレートにフッタを追加
フッタを表示したい各テンプレートの編集画面を開き、テンプレートの最後の方にある br 要素と div 要素（終了タグ）の間に青色で示したフッタを挿入します。
：
</div><!-- /links-right -->
</div><!-- /links-right-box -->
<!-- 右カラム終了 -->
<br class="clear" />
<p id="footer">
Copyright © 2007 xxxxx All Rights Reserved.
</p>
</div><!-- /box -->
</body>
</html>
：１．２ スタイルシートにフッタ用CSSの追加
テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。
.layout-two-column-left #footer,
.layout-two-column-right #footer {
margin: 30px 0 0;
padding: 10px;
border-top: 1px solid #666699;
color: #ffffff;
background: #8fabbe;
font-size: 12px;
text-align: center;
}また本文とフッタの表示バランスを修正するために、下記の box セレクタおよび content セレクタについても、赤色から青色に修正すると良いでしょう。スタイルシートには似たようなセレクタが並んでいるので、
.layout-two-column-left #box
.layout-two-column-left #content
.layout-two-column-right #box
.layout-two-column-right #content
で検索しましょう。
/* 2カラム用 */
.layout-two-column-left #box,
.layout-two-column-right #box {
width: 665px;
margin-right: auto;
margin-left: auto;
padding: 0 0 15px 0;
padding: 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
text-align: left;
background-color: #ffffff;
}またレイアウトによって下記も同様に修正してください。
左サイドバーの場合
/* 2カラム(左サイドバー) */
.layout-two-column-left #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
margin: 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
}右サイドバーの場合
/* 2カラム(右サイドバー) */
.layout-two-column-right #content {
float: left;
width: 478px;
margin: 0 0 10px 0;
margin: 0;
border-bottom: 1px solid #666699;
border-right: 1px solid #666699;
}２．リキッドレイアウトの場合
当サイトで公開しているリキッドレイアウトは左右カラムを absolute（絶対値）指定しており、中央カラムの縦幅と左右サイドバーの縦幅が連動しないため、固定レイアウトのように左右サイドバーにまたがったタイプのフッタ表示はできません。例えばフッタを中央カラムの下に割り当てると、サイドバーの縦幅が中央カラムの縦幅より長くなるとフッタとサイドバーの表示が重なってしまいます。
ということで、ここではサイドバーにはみ出さないように、中央カラムの下に著作権表示をする例をご紹介します。
２．１ テンプレートにフッタを追加
フッタを表示したい各テンプレートの編集画面を開き、テンプレートの途中にある中央カラム終了を示す div 要素（終了タグ）と、右カラム開始の div 要素の間に青色で示したフッタを挿入します。
左サイドバーの場合
：
</div><!-- /content -->
<!-- 中央カラム終了 -->
<p id="footer">
Copyright © 2007 xxxxx All Rights Reserved.
</p>
<br class="clear" />
：右サイドバーの場合
：
</div><!-- /content -->
<!-- 中央カラム終了 -->
<p id="footer">
Copyright © 2007 xxxxx All Rights Reserved.
</p>
<!-- 右カラム開始 -->
<div id="links-right-box">
<div id="links-right">
：２．２ スタイルシートにフッタ用CSSの追加
テンプレート編集画面でスタイルシート（styles-site.css）を開き、下記の設定を挿入します（とりあえず最後の方に追加してください）。
.layout-two-column-liquid-left #footer,
.layout-two-column-liquid-right #footer {
margin: 15px 0 0;
padding: 5px;
color: #444444;
font-size: 12px;
text-align: center;
}サイドメニューのツリー化プラグイン for WordPress
サイドメニューをツリー表示するプラグインを作成しました。
例えば、当サイトのテンプレートをデフォルトで利用している場合、各メニューリストは全て丸印のリストマークを表示するようにしていますが、カテゴリーリスト等のインデントされたリスト類はやや味気ないものになっています。
このプラグインを利用することでスクリーンショットのようなツリー表示に変更することができます。
ツリー化は他に色々なプラグインが出回っていると思いますが、当サイトで他のブログに適用しているカスタマイズを WordPress にも反映させていきたいと思います。
2011.05.24：「WordPressのサイドバーリストをjQueryでツリー化する「wp_tree_maker」プラグイン」をリリースしましたので、そちらをご利用ください。
１．はじめに
１．１ 当サイトのテンプレートをご利用の場合
プラグインは当サイトで配布しているテーマ（3カラム版）のデフォルト状態に適用可能な形で配布しています。インストールしてプラグインを有効にするだけで「Recent Comments」「Recent Trackbacks」「Categories」の各メニューリストがツリー化されます。
１．２ 他のテンプレートをご利用の場合
「ツリー化プラグイン」を利用する場合、メニューリストのマークアップで下記のように青色のタグが利用されている必要があります。
<ul>
<li><h2>Recent Comments</h2>
<ul><?php get_recently_commented(); ?></ul>
</li>
<li><h2>Recent Trackbacks</h2>
<ul><?php get_recently_trackbacked(); ?></ul>
</li>
:
</ul>また、このプラグインはメニューリストタイトルをキーにして、ツリー対象のメニューリストを検索するため、５項の内容にしたがって、スクリプトに埋め込むメニューリストタイトルを修正する必要があります。
CSS はプラグインに同梱されている tree-maker.css を適宜変更してください。
２．プラグインのダウンロード
下記のいずれかのリンクをクリックし、プラグインアーカイブをダウンロードしてください。
tree-maker.zip / tree-maker.lzh
2007.02.27 初版
2007.05.11 プラグインパス取得方法変更
３．プラグインのアップロード
ダウンロードしたアーカイブを解凍し、tree-maker フォルダごと、wp-content/plugins 配下にアップロードしてください。アップロード後、下記のようなディレクトリ・ファイル構成になっていればOKです。
wp-content/
plugins/
tree-maker/
maketree.js
tree_end.gif
tree_lst.gif
treehandler.js
tree-maker.css
tree-maker.php４．プラグインを有効にする
WordPress の管理画面より「Tree Maker」の有効化のリンクをクリックします。
５．カスタマイズ
treehandler.js を任意のエディタで開き、ツリー化したいメニューを記述します。カッコ内にはメニューリストのタイトルをそのまま記述してください。
デフォルトでは下記の設定、つまりメニューリストタイトルが「Recent Comments」「Recent Trackbacks」「Categories」となっているものに対してツリー化するようになっています。
function treeMaker() {
tree('Recent Comments');
tree('Recent Trackbacks');
tree('Categories');
}またメニュータイトルを日本語にしている場合は、下記のように日本語のタイトルと英語の名称（適当でいいです）してください。
function treeMaker() {
tree('最近のコメント', 'comment');
tree('最近のトラックバック', 'trackback');
tree('カテゴリー', 'category');
}６．ツリー表示変更
デフォルト状態では冒頭のスクリーンショットのように、2階層目のリストからツリー表示する設定にしています。
これを左のように、1階層目からツリー表示にしたい場合は、tree-maker.css を任意のエディタで開き、コメントアウトしている下半分の
#sidebar .tree li,
#links-left .tree li,
#links-right .tree li {
padding: 0 0 0 16px;
background: url(tree_lst.gif) no-repeat 5px 0em;
}
#sidebar li li.end,
#links-left li li.end,
#links-right li li.end {
background-image: url(tree_end.gif);
}を有効にして、上半分の設定をコメントアウトするか削除してください。
７．ツリー表示変更
ツリー画像を変更したい場合は、プラグインディレクトリにある、tree_lst.gif / tree_end.gif をそれぞれ入れ替えてください。
はてなブックマークの「人気エントリー/注目エントリー」を Ajax + Perl でブログに表示する
はてなブックマークの「人気エントリー」や「注目エントリー」を Ajax + Perl を利用して、スクリーンショットのように「記事タイトル+被ブックマーク数」のフォーマットでブログ等に表示させるカスタマイズです。
他のサイトで同じようなリストを見かけたのですが、そのようなインタフェースあるいはツールを探し出せなかったので、自作しました（すでに同じものが提供されていたらお恥ずかしい限りですが）。
単に一覧を表示するのであれば、RSS + feed2JS でも可能ですが、被ブックマーク数まで表示することができないため、はてなブックマークで表示される HTML ファイルを Ajax + Perl で取得し、JavaScript で加工しています。
きめ細かいエラー処理等実装していないので、動作に不具合がございましたらご連絡ください。
なお、ここで紹介するカスタマイズは、アクセス毎に CGI が起動されます。サーバのパフォーマンスを考慮した、HTML ファイルを周期的に取得し、それを Ajax で取得する方法につきましては別エントリーで紹介する予定です（お分かりになる方はスクリプトを適宜修正してください）。
１．アーカイブのダウンロード
下記のいずれかのリンクからスクリプト一式をダウンロードしてください。
ダウンロードしたアーカイブを解凍してください。中には下記のファイルが含まれています。
ajax-loader.gif（ローディング画像）hatenabookmark.js（Ajax 起動スクリプト）hatenabookmark.cgi（HTML 取得スクリプト）
上記の他、Ajax ライブラリの prototype.js が必要です。
上記のサイトにある Download the latest version のリンクをクリックし、アーカイブをダウンロードします。アーカイブを解凍して、dist フォルダの中にある prototype.js を使用します（他は使いません）。
prototype.js はブログの任意のディレクトリにアップロードしてください。
２．HTML の修正
script 要素を、リストを表示させたい HTML（あるいはテンプレート）の </head> の直前に設定します。
<script type="text/javascript" src="http://user-domain/prototype.js"></script>
<script type="text/javascript" src="http://user-domain/hatenabookmark.js"></script>赤色の user-domain は、それぞれのファイルをアップロードした URL を設定してください。
次に、リストを表示したい位置に下記のタグを設定してください。
<div id="hatena"></div>
<script type="text/javascript">
//<![CDATA[
getHatenaBookmark('[人気エントリー/注目エントリーのURL]', '[表示数]', 'hatena');
//]]>
</script>[人気エントリーまたは注目エントリーのURL] は、下記の手順で取得・設定してください。
- はてなブックマークのトップページへジャンプ
- 右上にあるテキストエリアに表示したいサイト（のトップページ）のURLを入力し、ラジオボタンで「URL」を選択して「検索」をクリック
- 次ページでブラウザに表示された URL をコピー
- コピーした URL を上記の [人気エントリー/注目エントリーのURL] に設定
エントリーリストからトップページを外したい場合は、検索する時にアーカイブページのURLまで指定すればうまく取得できます。Movable Type を利用している当サイトの場合、
http://www.koikikukan.com/archives/
としています（Movable Type であれば一律可能という訳ではなく、管理画面でアーカイブパスを設定していればこのような取得が可能です）。
[表示数] は表示したい記事数です。HTMLから取得するので最大50件です。
３．Perl スクリプトのアップロード
hatenabookmark.cgi をサーバの任意のディレクトリにアップロードしてください。アップロード後、ファイルのパーミッションを 755 等に変更してください（値はご利用のサーバによって異なりますのでご確認ください）。
４．JavaScript 外部ファイルの修正
hatenabookmark.js を任意のエディタで開き、下記の user-domain を、先程アップロードした hatenabookmark.cgi の URL になるよう、修正してください。
// CGI の URL
var cgiURL = 'http://user-domain/hatenabookmark.cgi';以下はオプションです（変更は動作確認後の方が良いでしょう）。
// リストに用いるタグ
var htnHeader = '<dl>';
var htnTitle = '<dt>最近の人気エントリー<\/dt>';
var htnListHeader = '<dd>';
var htnListFooter = '<\/dd>';
var htnFooter = '<\/dl>';
// ブックマーク数を括る span タグに付与する class 属性値
var htnListClassName = 'hatenaCount';
// 記事タイトルから削除したい文字列
var deleteChar = '';
// ローディング画像
var htnImage = 'ajax-loader.gif';生成するリストのデフォルトマークアップは下記のようになっています。上記の「リストに用いるタグ」を変更する際の参考にしてください。
<dl>
<dt>[htnTitle]の内容</dt>
<dd><a href="...">記事タイトル1</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数1</span></a></dd>
<dd><a href="...">記事タイトル2</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数2</span></a></dd>
：
<dd><a href="...">記事タイトル3</a><a href="..."><span class="[htnListClassName]の内容">ブックマーク数3</span></a></dd>
</dl>[記事タイトルから削除したい文字列] は、サイト名等を記事タイトルから削除したい場合に用います。
hatenabookmark.js の修正が終わったら、サーバにアップロードしてください。
５．ローディング画像のアップロード
ajax-loader.gif を hatenabookmark.js と同じディレクトリにアップロードしてください。異なるディレクトリにアップロードした場合は、hatenabookmark.js の、
// ローディング画像
var htnImage = 'ajax-loader.gif';の赤色部分に ajax-loader.gif を含む URL を入力してください。
６．CSS 追加
下記のようなスタイルを追加すれば、被ブックマーク数部分がいい感じになります。
.hatenaCount a:link,
.hatenaCount a:visited {
font-size: 10px;
font-weight: bold;
color: #ff0000;
background-color: #ffcccc;
}公式サイトでは被ブックマーク数によって与えるタグを振り分けてますが、このカスタマイズでは今のところそこまで凝っていません。
６．その他
以下覚え書きです。
Ajax で取得した HTML ファイルは一旦ページに読み込まれ、Opera9 で表示すると HTML ページが一瞬表示されてしまう場合があります。気になる場合はローディング画像の代わりに、display プロパティで加工が終わるまで非表示にした方がいいかもしれません。
また、読み込まれた HTML は img 要素の src 属性をもとに画像ファイルを取得を試みます。この HTML の src 属性はドキュメントルートで記述されているため、Firebug の Net で確認すると取得エラーが表示されてしまいます。
そのため Perl での取得後、故意に他の属性名に変更しています。
2006.02.26 追記
文中およびリストのファイル名に誤りがありましたので修正しました。
奥羽本線を
「デジタル雑誌ストア」 by Fujisan.co.jp
アフィリエイトで利用していた Fujisan.co.jp から「デジタル雑誌ストアがオープンしました」というメールが届きました。試しにちょっと触ってみたところ、かなり高機能で好印象でしたのでご紹介したいと思います。
左のスクリーンショットはデジタル雑誌を読むツール「Fujisan Reader」。クリックすると拡大します。
CNET Japan：Fujisan.co.jpが「デジタル雑誌ストア」を正式オープン--R25もデジタルに
富士山マガジンサービス運営の「Fujisan.co.jp」が提供するデジタル雑誌「Fujisan Digital」は、表紙から最後のページまで、雑誌を丸ごとデジタル化して、紙媒体とまったく同様の内容で販売。23日から、Fujisan.co.jpで取り扱う「ニューズウィーク日本版」などの一般誌や「R25」などのフリーペーパーを含む全28誌が、その発行日に合わせ、デジタル版でも購読可能となる。
定期購読者には、今後、発売日に自分のPCに最新号が到着することになり、読者は、雑誌を買い忘れなく入手し、バックナンバーなどを物理的なスペースを取ることなく保存・管理できるようになるとしている。
「Fujisan Reader」はスペースキーを押すだけで自動的にページを送ってくれます。ページをめくる時の表示も実際になかなかいい感じです。
デジタルならではの機能も盛りだくさんで、まず音声サービス機能があります。青色のアイコンが数秒点滅するので、それをクリックします。
黄色のマーカーで好きなところをマーキングできます。マーキングを消すには同じ位置でクリックします。付箋紙機能もあり、付箋はリサイズや折りたたみもできます。うまくキャプチャできず、お見せできないのが非常に残念です。
当然検索も可能です。検索結果は画面右側にページ毎の一覧が表示され、一覧から選択してダブルクリックするとこのように該当箇所を反転表示します。
上記のサンプル「Mainichi Weekly」は見本誌で、無料で購入できますので、以下、見本誌を利用したデジタル雑誌の購入から雑誌の購読までを、一連の流れで説明します。
Fujisan.co.jp トップページ上にある「デジタル雑誌」をクリック。
ここでは「Mainichi Weekly（毎日ウィークリー）」の「見本誌あり」をクリック。
次のページで「ショッピングカートに入れる」をクリック。
次のページで「レジに進む」をクリック。見本誌なので無料です。
「はじめての方はこちら」の「個人の方はこちらから」または「法人の方はこちらから」をクリック（ここでは「個人の方はこちらから」をクリック）。その後、配送先・マイページ情報（メールアドレス・パスワード・氏名・生年月日・性別）を登録します。
次のページで再び「レジに進む」をクリック。
次のページで先程登録したメールアドレスとパスワードを入力して、「確認して次に進む」をクリック。
ここで配送先が表示されます（デジタル雑誌なので実際には配送されませんが）ので、確認して「次に進む」をクリック。
次のページで「注文を確定する」をクリック。
次のページで完了画面に進み、この完了画面で、デジタル雑誌を閲覧するための「Fujisan Reader」をインストールを確認されます。まだインストールしていない場合は「いいえ、インストールされていません」をクリックしてください。
次のページで「ダウンロード」をクリック。あとはダウンロードしたファイルをダブルクリックしてインストールを実行します。
インストールが終わったらご自身がご利用になっているメールソフトを開いてください。事前登録したメールアドレスに先程注文した見本誌のメールが届いているはずです。
メールに書かれているとおり、ここで新着を確認します。[スタート]-[プログラム]-[Fujisan Digital]-[新着を確認]を選択してください。
これで下のような新着確認画面が開き、注文した雑誌のダウンロードが始まります。なお画面にはありませんが、見本の雑誌がすでにひとつ入っています。
ダウンロード完了画面で「はい」をクリック。
これで冒頭の Fujisan Reader 画面が開きます。
検索エンジンがとびっきりの客を連れてきた! 中小企業のWeb2.0革命
昨年夏に発売された書籍で、読み終えてかなり日が経ちましたが、久しぶりの書籍紹介ということで。
 | 検索エンジンがとびっきりの客を連れてきた! 中小企業のWeb2.0革命 佐々木 俊尚 ソフトバンククリエイティブ 2006-08-01 売り上げランキング : 23860 Amazonで詳しく見る by G-Tools |
以前「グーグル―Google 既存のビジネスを破壊する」で二つの事例が掲載されていましたが、この本はその事例のみを集めた内容になっています。
個人的にはこのようなドキュメンタリーが好きみたいで、読み応えがありました。
以下、各章のタイトルおよびサブタイトルに、そこで紹介されているサイトのリンクをつけて挙げておきます。
- アイデアを駆使する！
-
- 老舗・鯖寿司の挑戦 … 鯖寿司・萩
- 日本のアートの底力 … 筆文字なび
- パソコン関連のサポートを一手に … パソコン教室 ウォンツ！
どの企業・店舗も、当時の苦境とキーワード広告による見事な躍進の対比が鮮やかに描かれています。
FC2ブログのコメントリンクから該当のコメントにジャンプさせる方法
FC2ブログのサイドバーに表示しているコメントリストのリンクをクリックした時、各エントリーの先頭にジャンプするのではなく、該当コメント位置に直接ジャンプさせる方法について数名の方からご質問を頂きましたので、本エントリーにて紹介致します。
１．文書の特定位置へジャンプさせる方法
ご存知の方も多いと思いますが、文書の特定の場所へのリンクは、
- リンク元：URL + # [fragment]
- リンク先：（該当 URLの） id 属性
というフォーマットにしたがって記述します。[fragment] の部分には id 属性値と等しい文字列を指定します。
今回のカスタマイズでは、コメントリスト（リンク元）・エントリーページのコメントリスト（リンク先）に上記フォーマットを適用します。
具体的には、下記リストのように青色部分を追加します。これで該当のコメントに直接ジャンプできるようになります。
コメントリスト（リンク元）
<a href="http://hogehoge.blogxx.fc2.com/blog-entry-1.html#c1">コメント</a>エントリーページ（blog-entry-1.html）のコメントリスト（リンク先）
<div class="comment" id="c1">
：
（コメント本文）
：
</div>上記のリンク先は div 要素に id 属性を与えていますが、当サイトのテンプレートを例に使っているだけですので、div 要素でなくても構いません。
この id 属性ですが、以前はリンク先に、
<a name="c1">文字列</a>というタグを記述していたかもしれませんが、XHTML では id 属性による名前付けをすることでリンク先として指定できるようになっています。
厳密に言えば、
- XHTML1.0：互換性を考慮して a 要素に id 属性と name 属性の併記が可能
- XHTML1.1：a 要素の name 属性による名前付けは廃止
となっています。
また、id 属性は a 要素以外でも付与可能ですので、無理に a 要素を作る必要はなくなります。ただし id 属性値はページ内で一意の名称になるように気をつけてください。
２．実例
当サイトで配布している FC2 ブログテンプレートからの抜粋です。
青色部分が先に述べた文書の特定の場所へリンクする指定になります。当サイト以外のテンプレートをお使いの場合は対応を考えて設定してみてください。
コメントリスト（リンク元）
<div class="sidetitle">
Recent Comments
</div>
<div class="side" id="commentlist">
<!--rcomment-->
<span><%rcomment_etitle></span><ul><li><a href="<%rcomment_link>#c<%rcomment_no>" title="<%rcomment_body>"><%rcomment_title></a> <%rcomment_name> <%rcomment_month>/<%rcomment_day></li></ul>
<!--/rcomment-->
</div>エントリーページのコメントリスト（リンク先）
<!-- コメント -->
<!--comment_area-->
<div id="comments" class="comments">
<div class="comments-content">
<!-- コメントタイトル -->
<h3 class="comments-header">コメント</h3>
<!--comment-->
<div class="comment" id="c<%comment_no>">
<!-- コメント本文 -->
<div class="comment-content">●<%comment_title><br /><%comment_body></div>
<!-- コメント投稿者情報 -->
<p class="comment-footer">
Posted by <a href="<%comment_url>"><%comment_name></a> at <%comment_year>.<%comment_month>.<%comment_day> <%comment_hour>:<%comment_minute> | <a href="<%comment_edit_link>" title="コメント編集のページへ">edit</a>
</p>
</div>
<!--/comment-->
</div>
<!-- コメント投稿 -->
<form method="post" action="./" name="comment_form">
：
（略）
：
</form>
</div>
<!--/comment_area-->id 属性値には FC2 ブログとして一意となる %comment_no （数字）を利用しています。ただし id 属性値は数字から開始することはできないので、先頭に任意のアルファベット、ここではコメントを表す「c」を付与しています。
Movable Type コンテスト 2006 入賞
思いがけなく素晴らしい賞を頂くことができ、大変光栄です。
Movable Type でブログを始め、Movable Type を中心としたテンプレートの配布、そしてカスタマイズ記事を書き続け、あっという間の3年近くでした。
Movable Type でブログを始めたこと、そして私のサイトを訪れて下さった多くの方からのご質問やご指導・ご支援のおかげでここまで継続でき、また今回の受賞に至ることができたと、心より感謝しております。
これからも皆様のお役に立てるエントリーを提供すると同時に、一ブロガーとして精進したいと思います。
最後に、本コンテストを開催くださった関係者の皆様に御礼申し上げます。
今回は本当にありがとうございました。 （以上、「コンテスト喜びの声」より）
という訳で、昨日行われた授賞式（場所：青山TEPIA）にも参加してきました。
審査概要
授賞式前半に Six Apart 代表取締役の関信浩氏の特別講演がありました。その話の中で
「全470サイトから1次審査で50サイトまで絞り込み、そこから各賞を選考しました」
とのこと。また
「グランプリ・準グランプリ・優秀賞・準優秀賞は審査員の総意で選ばれたサイト」
ということで、大変栄誉ある賞を頂けたと喜びをかみしめておりました。これだけ多くのサイトの中から選んでくださったことを感謝しています。
ハプニング
授賞式は10時開始だったのですが、実は会場への到着が少し遅れてしまい、その結果授賞式で当サイトの名前が呼ばれないというハプニングが発生し、呼んでもらうために会場後方でスタッフの方を探しに一人ドタバタしてました。参加する旨はメールで事前連絡済でしたが、おそらく会場入場時に出席確認があったのでしょうね（私が着いた時には何もなかった）。
私のサイトが一番最後に呼ばれたのはそういう事情があったためです。
「Movable Type」は何と読む？
進行の方が終始「モバブルタイプ」と言われてましたが、正式には「ムーバブルタイプ」です。
関係者の方々は気になっているだろうなと思ったら、やっぱり気にされていたようです。
これからは和名も時々併記した方がいいかもしれないと思いました。
他の受賞サイト
当サイトのテンプレートを利用くださっているサイトや、記事を参考にされているサイトも入賞されているようで、大変嬉しい限りです。
- Memories of HARADA Family：MovabletTypeコンテスト入賞！
- 全国高校サッカーNavi 管理人ブログ：『Movable Type コンテスト 2006』アスキービジネス賞受賞しました！
各賞の詳細につきましては下記を参照ください。
おわりに
ということで、これからも引き続き「小粋空間」をどうぞよろしくお願い致します。
Windows XP のエクスプローラをダブルクリックで起動する
Windows でフォルダのウィンドウを開く時、私は「マイコンピュータ」のアイコン、あるいは該当のフォルダのショートカットを右クリックし、左側にフォルダのツリーが表示される「エクスプローラ」として起動するのですが、毎回右クリックするのも面倒だなぁと思って調べたところ、ダブルクリックでエクスプローラを起動する方法をみつけましたので紹介します。
参考サイトは下記です。ありがとうございました。
以下、設定方法です。
各スクリーンショットは HighSlide JS を利用しており、画像をクリックすれば拡大・縮小できます。拡大画像はドラッグも可能です。
マイコンピュータを起動（任意のフォルダでもOK）。
メニューバーより[ツール]→[フォルダオプション]を選択。
フォルダオプション画面で[ファイルの種類]タブをクリック。
[登録されているファイルの種類]の一覧から「フォルダ」を選択（「ファイルとフォルダ」ではありません）。「フォルダ」は一覧の最初の方にあります。
選択後、[詳細設定]をクリック。
[アクション]で「explore」を選択し、「既定に設定」ボタンをクリック。あとは各画面の[OK]をクリックして元の画面に戻っていきます。
以上です。
デフォルト状態の「タスク」を表示したい時は「フォルダ」をクリックすれば切り替えられます。
変更してみたものの、つい右クリックして起動してしまいます（笑）。
コメント投稿時にフォームボタンをグレーアウトする for Movable Type
Category：[JavaScript]
Tag：[Comment, Customize, JavaScript, MovableType]
Permalink
本サイトで適用している、コメントを投稿時にフォームボタンをグレーアウトするためのカスタマイズです。カスタマイズ方法については以前よりリクエストを頂いておりました。公開が遅くなって申し訳ありません。
ここでは Movable Type でのカスタマイズ方法を紹介致します。他のブログツールについては順次公開していきたいと思います。
カスタマイズ元記事は下記です。ありがとうございました。
１．本カスタマイズの機能
- コメントフォームの「投稿」ボタンクリック時にフォームボタンをグレーアウトにする
- コメントフォームの「確認」ボタンクリック時はグレーアウトにしない
「確認」ボタンクリック時にグレーアウトしないのは、下記の理由のようにユーザビリティ上好ましくないと思ったためです。
- 「確認」でグレーアウトした場合、ブラウザの「戻る」でグレーアウトのままになる（投稿不能になる）
- 「確認」ボタンをクリックした時に「投稿」ボタンを押してしまったと錯覚する可能性がある
以下、カスタマイズ方法です。動作は Windows XP + IE6.0 / IE7.0 / Firefox2 / Opera9 で確認しています。テンプレートは Movable Type デフォルトテンプレートで確認していますが、当サイトの公開テンプレートでも動作します。
またカスタマイズにあたってはテンプレートにできるだけ手を加えないようにしています。
２．JavaScript 外部ファイルの作成
下記の内容を disabledButton.js という名前で保存し、メインページと同じディレクトリにアップロードしてください。
var disabledFlag = 0;
var isIE = (document.documentElement.getAttribute("style") ==
document.documentElement.style);
function addFormAttribute(form) {
isIE ? form.setAttribute("onsubmit", new Function("if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);")) :
form.setAttribute('onsubmit','if (this.bakecookie.checked) rememberMe(this);disableSubmit(this);');
var elements = form.elements;
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == 'submit' && elements[i].getAttribute('name') == 'post') {
isIE ? elements[i].setAttribute("onclick", new Function("setHiddenValue(this);")) :
elements[i].setAttribute('onclick','setHiddenValue(this)');
}
}
}
function disableSubmit(form) {
if(!disabledFlag){
return;
}
var elements = form.elements;
for (var i = 0; i < elements.length; i++) {
if (elements[i].type == 'submit' || elements[i].type == 'button') {
elements[i].disabled = true;
}
}
}
function setHiddenValue(button) {
if (button.name) {
var q = document.createElement('input');
q.type = 'hidden';
q.name = button.name;
q.value = button.value;
button.form.appendChild(q);
disabledFlag = 1;
}
}３．テンプレート修正
エントリー・アーカイブ／コメント・プレビューの </head> の直前に下記を追加します。
<script type="text/javascript" src="<$MTBlogURL$>disabledButton.js"></script>また、同じテンプレートの body 要素に下記の青色部分を追加します。
<body class="layout-two-column-right individual-entry-archive" onload="individualArchivesOnLoad(commenter_name);addFormAttribute(document.comments_form);">addFormAttribute の直前のセミコロン ";" もお忘れなく。
４．注意事項
コメント・プレビュー画面に本カスタマイズを適用する場合、コメント・プレビュー・テンプレートに必ず下記のタグ（青色部分）をフォームに追加してください。これを追加しないとグレーアウトしません。
：
<p>
<label for="comment-url">URL:</label>
<input id="comment-url" name="url" size="30" value="<$MTCommentPreviewURL$>" />
</p>
<p>
<label for="comment-bake-cookie"><input type="checkbox"
id="comment-bake-cookie" name="bakecookie" onclick="if (!this.checked) forgetMe(document.comments_form)" value="1" />
この情報を登録しますか?</label>
</p>
<p id="comments-open-text">
：５．補足
- グレーアウトする仕組み
- 「投稿」ボタンのクリックにより
onclickイベントハンドラを起動します。ハンドラから起動されたsetHiddenValueでクリックされたボタンをhidden型のinput要素として追加します。続いてonsubmitイベントハンドラが起動され、ハンドラから起動されたdisableSubmitでフォームボタンをdisabledにします。 - 「確認」ボタンクリック時にグレーアウトしない仕組み
setHiddenValueの中で、変数disabledFlagに 1 を設定し、disableSubmitの処理で、disabledFlagフラグが 1 の場合のみbutton要素をdisabledにします（もっと良い実装があると思いますが）。onsubmit属性の再書き込みform要素のonsubmit属性を用いてdisableSubmit関数を起動していますが、属性値には "if (this.bakecookie.checked) rememberMe(this)" が元から設定されているため、追加スクリプトで元関数と新たに加えた関数の両方を起動するように上書きしています。- IE の不具合対処
- IE では、JavaScript の
getAttribute/setAttributeで class ・style・イベント属性などを操作できないというバグがあり、その対処を施しています。IE 不具合対処の参考サイトは下記です。ありがとうございました。
サブカテゴリーリストの折りたたみ（MT3.x デフォルトテンプレート版）
Movable Type 3.x のデフォルトテンプレートにサブカテゴリーリストの折りたたみを適用する場合のカスタマイズを紹介します。
このエントリーではツリー化する場合としない場合の2通りを説明します。スクリーンショットはツリー化した場合の完成例です。
１．スクリプトのダウンロード
下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。
２．menufolder.js の設定変更
ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
：
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▼';
var closeMarkForSubCategories = '▲';
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;設定内容の詳細は下記の通りです。
subCategoryCount
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
- 設定値： true：li タグで計数／false：a タグで計数
subCategory
- 名称：サブカテゴリーの折りたたみ有効フラグ
- 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
- 設定値： true：有効／false：無効
openMarkForSubCategories/closeMarkForSubCategories
- 名称：サブカテゴリーの折りたたみマーク
- 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
offsetForTitleAndMarkOfSubcategory
- サブカテゴリーのタイトルとマークのスペース
- 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
- 設定値：0以上
３．スクリプトのアップロード
menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。
４．テンプレートに script 要素追加
サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>５．テンプレートにサブカテゴリーリスト表示用タグを追加
ツリー化しない場合は１．１項、ツリー化する場合は１．２項のサブカテゴリーリスト表示用タグを、表示したいテンプレートの任意の位置に追加します。
５．１ ツリー化しない場合
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="module-list-item"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>５．２ ツリー化する場合
<div class="module-categories module">
<h2 class="module-header">カテゴリー</h2>
<div class="module-content" id="categories">
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel></a> [<$MTCategoryCount$>] <MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel> <MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
</div>
</div>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>赤色部分は下記を参照して適宜変更してください。
initState
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値： on：開いた状態／off：閉じた状態
またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。
６．スタイルシート変更
ツリー化しない場合は２．１項、ツリー化する場合は２．２項の CSS をスタイルシートに追加してください。
６．１ ツリー化しない場合
.subcategories a.foldmark {
font-size:7px; /* マークのフォントサイズ */
text-decoration: none; /* マーク装飾 */
}６．２ ツリー化する場合
.subcategories a.foldmark {
font-size:7px; /* マークのフォントサイズ */
text-decoration: none; /* マーク装飾 */
}
ul.tree {
margin: 0 0 10px 0; /* 全体マージン */
padding: 0;
list-style: none;
}
ul.tree ul {
margin: 0px 0; /* 間隔を空ける時はここを変更 */
padding-top: 2px; /* インデント部分のパディング */
}
ul.tree li {
margin: 0; /* 0 以上にすると画像が切れる */
padding: 4px 0 1px 13px; /* top を大きくすると画像とずれる */
background-image: url(tree_lst.gif);
background-position: 2px 0; /* 垂直方向を0以上にすると画像が切れる */
background-repeat: no-repeat;
list-style: none;
line-height: 100%;
}
ul.tree li.tree_end {
background-image: url(tree_end.gif);
background-position: 2px 0;
list-style: none;
}７．ツリー画像のダウンロード
ツリー化する場合は、７項・８項を実施してください。
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。
８．画像のアップロード
ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。
以上です。
2010.05.02
タイトルおよび本文の一部にMT3.x向けの記事である旨を追記しました。
オスカー賞に
IE6 + Serene Bach 管理メニューのユーザビリティを向上させる
Serene Bach の管理画面左にあるメニューリストを IE6 で操作する時、文字にカーソルを重ねないとリンクが機能しないという不具合があります（Firefox 2/ Opera9 等では正常に動作します）。
本エントリーでは、スクリーンショットのように、IE6 で文字以外の部分にカーソルを重ねた時にリンクとして機能させる方法を紹介します。
１．リンクにならない原因
文字以外の部分にカーソルを重ねてリンクが機能しないのは IE6 のバグのためです。IE7 ではこの問題が修正されています。
２．変更方法
lib/resource/ja/style.css をダウンロードし、任意のエディタで開きます。
そしてファイルの一番最後に、下記の 1 行
.mainmenu .menu a:link {
_width: 100%;
}を追加してください。
３．注意事項
- 一般的なお作法として、追加した一番最後の行の末尾 "
}" の後ろには改行を入れましょう。 - 上記リストにある "
.menu" の直前の半角空白をなくすと別の場所にあるメニューが崩れます。 widthプロパティの前のアンダースコアを外すと Firefox で表示が崩れます（が、IE しか使わないのであれば問題なし）。
ブログを読みやすくするコツ
１．ユーザはウェブを読んでいない？
「ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます-」によると、「ユーザはウェブを読んでいない」ようです。言い換えると、「ユーザはウェブを流し読みする傾向がある」とのこと。
個人差はあると思いますが、私自身の場合、たしかに記事を最初から最後までしっかり読むという機会があまり多くないかもしれません。
そういえば、当サイトのカスタマイズの質問で、
「同じ記事の×項に書いておりますので、そちらを参照ください」
という回答をする場合がまれにあります。こういった例も原因の一端でしょうか。
２．ユーザが読みやすくするためには
結論から申し上げると、書籍の元記事である「Jakob Nielsen博士のAlertbox：ユーザはウェブをどう読んでいるか
」では、流し読みしやすいテキストとして、次のような手法を推奨しています。
Jakob Nielsen博士のAlertbox：ユーザはウェブをどう読んでいるか
- キーワードの強調
- 意味のある小見出し
- 箇条書きのリスト
- 1段落1アイデア
- 逆ピラミッド型の文体（結論を先に）
- 通常の文章に比べ、語数を半分あるいはそれ以下
この事実を知ってから、手法のひとつである「箇条書きのリスト形式」をエントリーに用いるようにしています。
またカスタマイズ記事の場合、
- 完成イメージの掲載
- 見出しによる作業の細分化
- 簡潔な文章
にこころがけ、ミスが起こらない内容にできればと思いつつ、書いてます。
３．変更例
下記は、流し読みしにくいテキストから流し読みしやすいテキストへの変更例です（「Column Resizer」の説明をサンプルとして用いています）。
もっと詳細で適切な例は「ユーザはウェブをどう読んでいるか」に掲載されてますので、そちらをご覧ください。
流し読みしにくい例
まず最初にカラムレイアウトを選択します。左上のラジオボタンでカラムレイアウトを選択してください。サポートしているカラムレイアウトは、3カラム固定レイアウト・2カラム（左サイドバー）固定レイアウト・2カラム（右サイドバー）固定レイアウトの3種類です。
（多分）流し読みしやすい例
１．カラムレイアウト選択
左上のラジオボタンでカラムレイアウトを選択します。
サポートしているカラムレイアウトは、
- 3カラム固定レイアウト
- 2カラム（左サイドバー）固定レイアウト
- 2カラム（右サイドバー）固定レイアウト
の3種類です。
あと個人的には、パラグラフ（p）を多くても5行程度に収め、パラグラフ内も必要に応じて改行を挿入しています。
４．その他
この手法はブログのスタイルや記事内容にもよると思いますので、一意に推奨している訳ではありません。
また、このエントリー自体が「流し読みしにくい」とツッこまれるのも本意ではありませんので、Alertbox の手法を取り入れてみました（読みにくかったらすいません）が、こうやって改めて書いてみると普段はあまり実践できていないようです。
 | ヤコブ・ニールセンのAlertbox -そのデザイン、間違ってます- Jakob Nielsen 舩井 淳 奥泉 直子 RBB PRESS 2006-07-12 売り上げランキング : 20683 Amazonで詳しく見る by G-Tools |
CSS の after 擬似要素で回り込みを解除する
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します（通常の解除方法も併せて掲載しています）。
１．「回り込み」とは
例えば、画像の左（または右）にテキストを表示することを「（テキストの）回り込み」と呼びます。
マークアップ
<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>表示
回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
（X）HTMLでこのような表示を行う場合、先に出現する要素（ここでは img 要素）に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用します。 後に続く内容は、前の要素の右（または左）側に回り込みます。
ちなみに「float プロパティ = 回り込み」という解釈は正しくないようです。下記の記事に分かりやすい解説があります。
２．「回り込み解除」とは
画像の左（または右）に回り込んで表示されているテキスト（あるいは要素）を、回り込まない状態に戻すことをこのように呼びます。
画像の回り込みが有効な状態が持続すると、流し込むテキスト量によっては後続のテキスト等が一緒に回り込んでしまいます。リキッドレイアウトでブラウザの横幅をひろげた場合にありがちです。
回り込みを解除していないマークアップ
<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p>
回り込まないテキスト?（略）?回り込まないテキスト
</p>
表示
- 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト
このような予期しない表示を避けるため、回り込みを解除する必要があります。
３．回り込み解除方法
３．１ 後続の要素に clear プロパティを与える
回り込みを解除するために、回り込みさせた要素の後続の要素に clear プロパティを与える方法があります。
マークアップ
<p>
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p style="clear: both">
回り込まないテキスト?（略）?回り込まないテキスト
</p>
表示
- 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト
３．２ 親ブロック要素の after 擬似要素に clear プロパティを与える
具体的には、float プロパティの要素を含む親ブロック要素の after 擬似要素に対し、clear プロパティを与えます。
３．１項の方法では後続の要素で回り込み解除を設定しますが、回り込みさせた要素を含むブロック要素自身で回り込みを解除させる方が感覚的に本来のように感じます。
このような場合、after 擬似要素を用いれば可能らしいのですが、残念ながら IE6（多分IE7も）では after 擬似要素がサポートされていません。
が、調べているうちに、
「zoom プロパティを併用することで IE も対応可能」
といった内容の記事をみつけましたので、ここではその方法をご紹介致します。*1
参考記事は下記です。ありがとうございました。
全体の構成は下記のようになり、float プロパティを与えた親のブロック要素（ここでは p 要素）に対し、回り込み解除用の class 属性を記述します。class 属性名は任意の名称で構いません。
CSS
.fbox {
zoom: 100%;
}
.fbox:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}Windows XP + IE6 / IE7/ Firefox2 / Opera 9 では、height プロパティ、visibility プロパティは指定しなくても回り込み自体は解除されるようです（他の振る舞いについての差異は未確認）。
マークアップ
<p class="fbox">
<img src="hogehoge.jpg" alt="image" style="float:left" />
回り込みテキスト?（略）?回り込みテキスト
</p>
<p>
回り込まないテキスト?（略）?回り込まないテキスト
</p>
表示
- 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト
回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト回り込まないテキスト
４．Movable Type でエントリーを書く場合
Movable Type でエントリーを記述する際、エントリー編集画面下の「改行設定」を「改行を変換する」にしている場合でも、class 属性つきの p 要素を手動で付与した場合は、p 要素は重複して自動付与されないので、３．２項の方法がそのまま利用できます。
５．関連リンク
- Cascading Style Sheets, level 2 CSS2 Specification：9.5.1 浮動体の位置決め ('float'特性)
- 同：9.5.2 浮動体に隣接する流れの制御 ('clear'特性)
- 同：5.12.3 :before 疑似要素及び :after 擬似要素
とまとめてみましたが、私自身回り込み解除を利用していなかったので、これから少しずつ過去のエントリーを修正していきたいと思います（反省）。
*1：zoom プロパティは IE（5.5 以上）の独自プロパティなので、利用した場合、CSS valid にならなくなります。
テンプレートカスタマイズ支援ツール Column Resizer
先日紹介した Slider を利用して、配布テンプレートの各カラムをダイナミックにリサイズできるツールを作ってみました。
このツールを利用すれば表示を確認しながらリサイズすることができます。
また配布テンプレートのカラムサイズを変更する場合、スタイルシートの中から該当のセレクタを探して修正する必要がありましたが、その変更も簡単に行えるようになりました。
利用方法は上記リンクのサンプルブログの本文をご覧ください（お読みにならなくてもなんとなく分かると思います）。
配布テンプレートをご利用でない方も、テンプレートを自作される場合の参考になれば幸いです。
動作確認ブラウザ
Windows XP + IE6.0/IE7.0/Firefox 2/Opera9 です。
利用可能テンプレート（2007年2月現在）
Movable Type / WordPress（3カラム版） / Serene Bach / sb / FC2 ブログ / Seesaa ブログ / livedoor ブログ / さくらのブログ
注意事項
ツール上ではカレンダーもリサイズ可能にしていますが、配布テンプレートでは同じ振る舞いになりません（テンプレートによってカレンダーのマークアップが異なるという前提もありますが）。
Movable Type でツールのカレンダーと同じ振る舞い（幅可変）にしたい場合は、赤色部分の値を大きくしてください。
.calendar th {
padding-bottom: 3px;
font-size: 8px;
width: 23px;
}CSS 変更（2007.02.11）
時間に少し余裕があったので手をつけていなかった部分を修正しました。変更内容は下記の通りです。
１．IE7 対応
Windows Vista も発売され、IE7 ユーザ増加に備え、サイドバーやカラム切り替えで、IE7 の場合に表示が若干崩れるという不具合を修正しました。
余談ですが、Vista 版の IE7 と XP での IE7 は正式名称が異なるようです（関連記事）。表示は XP+IE7 でしか確認してません。
２．Opera 9 対応
Opera 9 では随分前から上記と同様の表示の崩れや、折りたたみマークが文字化けしているという状態を放置しておりましたので、これらも併せて修正しました。
３．エントリータイトル
タイトルのフォントをやや大きくしました。またタイトル左の画像をやめて、border プロパティによるマークに変更しました。
４．サブカテゴリーリスト
親カテゴリーのツリーが長くなり過ぎ、途中でツリー画像が途切れてしまっていたので、親カテゴリーはツリー表示からリストマーク表示に変更しました。
なお親カテゴリーをツリー表示にしない方法についてはご質問がありましたので、その確認も兼ねてます。このカスタマイズにつきましては別途エントリーしたいと思います。
５．月別アーカイブリスト
月別アーカイブリストの折りたたみで、「年」の右側に表示していた折りたたみマークをやめて、年表示にリンクを設定しました。
６．Firefox / Opera での記事の折りたたみ
先日のカラムレイアウト変更により、Firefox / Opera で不具合のあったエントリーの折りたたみが問題なくできるようになりましたので、JavaScript を修正し、カテゴリー・アーカイブ／月別アーカイブ等で折りたたみ可能にしました。
以上です。
スタイルシートもかなり混沌とした状態になっていたので、僅かですが整理しました。そのせいで表示がおかしくなっているかもしれませんので、何かありましたらご指摘ください。
上記の修正で CSS と JavaScript を入れ替えました。キャッシュに旧データが残っていると正常に表示されないかもしれませんので、どのページでも構いませんので強制読み込みされることをお勧めします（参考：「ブラウザのキャッシュをクリアする」）。
カレンダーの日付リンクのジャンプ先をエントリー・アーカイブに変更する
当サイトで公開している Movale Type のカレンダーでは、日付のアンカーから日別アーカイブにジャンプするようにしていますが、これをエントリー・アーカイブにジャンプするように変更する方法を紹介します。
サンプルのMTタグは <MTCalendar>～</MTCalendar> のみ抜粋しています。
１．変更前のカレンダータグ部分
日付アーカイブにジャンプする仕組みは、MTEntryLink タグの archive_type 属性に "Daily" を指定しているからです（赤色部分）。
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>２．変更方法１
MTEntryLink タグの archive_type 属性を "Daily" から "Individual" に変更します（青色部分）。
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Individual"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>３．変更方法２
もうひとつは MTEntryLink を 属性なしに変更する方法です。
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><MTCalendarIfToday><span class="today"><MTElse><span class="calendar"></MTElse></MTCalendarIfToday></MTElse></MTCalendarIfBlank>
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>なお、いずれの場合も、カレンダー用テンプレートタグの先頭と末尾に設定している
<MTIfArchiveTypeEnabled archive_type="Daily">
：
</MTIfArchiveTypeEnabled>の2行は削除してください。
これは日別アーカイブの設定がされていない場合、その中に記述されたタグの処理を行わない（つまりカレンダーの生成を行わない）ようにするための条件タグです。
エントリー・アーカイブのリンクには MTEntryPermalink を利用する方法もありますが、実験してみたところ正常に動作しないようなので、ここでは対象外としました。
サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type
Category：[カテゴリー, ツリー化, 折りたたみ]
Tag：[Customize, MovableType, SubCategory, Tree]
Permalink
以前、Movable Type のツリー化記事で「JavaScript 不要なサイドメニューのツリー化 for Movable Type」を紹介しましたが、当サイトで定番カスタマイズとなっている「サブカテゴリーリストの折りたたみ」と併用する場合の設定方法についてご質問を頂きましたので、本エントリーにて改めてご紹介致します。
このエントリーのカスタマイズを行うことで、スクリーンショットのようにサブカテゴリーリストを折りたたみ+ツリー化することができます。
なお、JavaScript が不要なのはツリー化のみで、折りたたみ動作には必要です。
１．スクリプトのダウンロード
下記のリンクをクリックし、リンク先のページにある menufolder.js のリンクをクリックしてダウンロードしてください。
２．menufolder.js の設定変更
ダウンロードした menufolder.js を任意のエディタで開き、下記の該当部分を青色の内容であることを確認（または修正）してください。
// カテゴリーリスト数計算方法
// サブカテゴリーのカテゴリー数を適正に計数する
// サブカテゴリーに対応：true
// 従来のカテゴリーに対応：false
var subCategoryCount = true;
：
// サブカテゴリーフラグ
// サブカテゴリーの折りたたみを有効にする(テンプレート要設定)
// 有効にする：true
// 無効にする：false
var subCategory = true;
// サブカテゴリー用折りたたみマーク
var openMarkForSubCategories = '▼';
var closeMarkForSubCategories = '▲';
// サブカテゴリーのタイトルとマークのスペース
var offsetForTitleAndMarkOfSubcategory = 1;設定内容の詳細は下記の通りです。
subCategoryCount
- 名称：カテゴリーリスト数計算方法
- 用途：カテゴリーリスト数計算方法を li タグ（サブカテゴリー表示）で計数するか、a タグ（従来の一括表示）で計数するかを指定します。
- 設定値： true：li タグで計数／false：a タグで計数
subCategory
- 名称：サブカテゴリーの折りたたみ有効フラグ
- 用途：サブカテゴリーの折りたたみの有効／無効を設定します。ここでは有効にします。
- 設定値： true：有効／false：無効
openMarkForSubCategories/closeMarkForSubCategories
- 名称：サブカテゴリーの折りたたみマーク
- 用途：サブカテゴリー名横に表示する折りたたみ用リンクのマーク
- 設定値：任意の文字（設定したマークを''で括るように）
offsetForTitleAndMarkOfSubcategory
- サブカテゴリーのタイトルとマークのスペース
- 用途：サブカテゴリーのタイトルとマークの間に挿入する半角空白文字数を指定
- 設定値：0以上
３．スクリプトのアップロード
menufolder.js の修正が終わったら保存し、メインページと同じディレクトリにアップロードしてください。
４．テンプレートに script 要素追加
サブカテゴリーリストの折りたたみを利用する各テンプレートの </head> の直前に下記のタグを追加してください。charset 属性は menufolder.js の文字コードを指定してください（分からなければとりあえずサンプルのまま貼り付けてください）。
<script type="text/javascript" src="<$MTBlogURL$>menufolder.js" charset="utf-8"></script>５．テンプレートにサブカテゴリーリスト表示用タグを追加
折りたたみ+ツリー化用のサブカテゴリーリスト表示用タグ（下記）をテンプレートの任意の位置に設定します。
<MTTopLevelCategories>
<MTSubCatIsFirst><MTHasParentCategory><div id="subcategories<MTParentCategory><$MTCategoryID$></MTParentCategory>list"></MTHasParentCategory><ul class="tree"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryID$>"><MTCategoryLabel></a> [<$MTCategoryCount$>]<MTHasSubCategories></div></MTHasSubCategories>
<MTElse>
<li class="tree<MTSubCatIsLast>_end</MTSubCatIsLast>"><MTHasSubCategories><div class="subcategories" id="subcategories<$MTCategoryID$>name"></MTHasSubCategories><MTCategoryLabel><MTHasSubCategories></div></MTHasSubCategories>
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse max_depth="3">
</li>
<MTSubCatIsLast></ul><MTHasParentCategory></div></MTHasParentCategory></MTSubCatIsLast>
</MTTopLevelCategories>
<script type="text/javascript">
<!--
<MTTopLevelCategories>
<MTHasSubCategories>FoldNavigation('subcategories<$MTCategoryID$>','initState',false);</MTHasSubCategories><MTHasSubCategories></MTHasSubCategories>
<MTSubCatsRecurse>
</MTTopLevelCategories>
//-->
</script>青色は「JavaScript 不要なサイドメニューのツリー化 for Movable Type」のサブカテゴリーリストとの差分を参考までに示しています。
赤色部分は下記を参照して適宜変更してください。
initState
- 名称：初期状態
- 用途：ページを最初に表示した時の折りたたみ状態を指定します
- 設定値： on：開いた状態／off：閉じた状態
またカテゴリーアーカイブページで、どのページでも同じカテゴリーリストを表示したい場合は、上記サブカテゴリーリストの先頭および末尾にある MTSubCategories タグを MTTopLevelCategories タグに変更してください。
６．CSS追加
下記を styles-site.css に追加してください。
ul.tree {
margin: 0 0 0 5px;
padding: 0;
font-size: 9px;
list-style: none;
}
ul.tree ul {
margin: 0;
padding: 0;
}
ul.tree li {
margin: 0;
padding: 0 0 0 13px;
background: url(tree_lst.gif) no-repeat 2px 0;
list-style: none;
}
ul.tree li.tree_end {
background: url(tree_end.gif) no-repeat 2px 0;
list-style: none;
}
.subcategories a.foldmark {
font-size:9px; /* マークのフォントサイズ */
text-decoration: none; /* マークの文字装飾（装飾なし） */
}７．ツリー画像のダウンロード
下記のファイルをダウンロードしてください。これはツリーを表示するための画像で、実線・点線の2種類を用意しています。それぞれ2つの画像がありますのでご注意ください。
保存方法は、（IEの場合）リンクをクリックして一旦画像を表示し、その後に「ファイル」→「名前をつけて保存」で保存するか、リンクを右クリックして「対象をファイルに保存」を選択します。
ツリー画像のファイルは６項の CSS（青色部分）で読み込まれますので、ファイル名は一致させてください。つまり、tree_lst_solid.gifをダウンロードする時（またはダウンロード後）、ファイル名は tree_lst.gif に変更してください。
８．画像のアップロード
ダウンロードした画像をメインページと同じディレクトリにアップロードしてください。
以上です。
これでサブカテゴリーリストに折りたたみマークとツリーが表示されればOKです。
2008.10.14
リストの MTSubCategories タグを MTTopLevelCategories タグに変更しました。
ゲストブックの設置とページ分割 for WordPress
「WordPress のコメントをページ分割する Paged Comments Plugin」で紹介した Paged Comments Plugin を利用して、ゲストブックをページ分割する方法をご紹介します。
当サイトで公開しているテーマをご利用の方のために、カスタマイズしたゲストブック用テンプレートを本エントリーで配布致します（下スクリーンショットは完成例）。ページ分割を行わない場合も、このゲストブック用テンプレートをご利用できます。
以下、カスタマイズ方法です。すでに Paged Comments Plugin をご利用の場合は４項から始めてください。
１．プラグインのダウンロード
Paged Comments Plugin の Download ? Latest Version の Version x.x (200x-xx-xx) のリンクをクリックします。
２．プラグインのアップロード
アーカイブを解凍し、paged-comments-config-sample.php を paged-comments-config.php にリネームします。
また、解凍したプラグインフォルダ直下にある、
paged-comments.phppaged-comments-config.php
を plugins ディレクトリにアップロードします。
また同梱されている themes/[テーマ名] 配下にある、いずれかの comments-paged.php を現在利用中のテーマディレクトリに配置します。
上記をまとめると、下記の配置になれば OK です。
wp-content
├ plugins
│ ├ paged-comments.php
│ └ paged-comments-config.php
└ themes
└ [利用中テーマディレクトリ]
└ comments-paged.php３．プラグインの有効化
管理メニューの[プラグイン]をクリックして、表示されている「Paged Comments」右側にある[アクション]欄の「有効化」をクリックします。緑色で表示されれば OK です。
４．guestbook.php の作成
guestbook.php は、WordPress に含まれているテーマ「EasyAll」にありますので、現在使っているテーマディレクトリにコピーします。
当サイト配布のテーマをご利用の方は、下記のリンクから guestbook.zip または guestbook.lzh をダウンロードしてください。
2カラム版
3カラム版
解凍した中にある guestbook.php を、現在使っているテーマディレクトリにアップロードしてください。
ところで、guestbook.php で Paged Comments Plugin によるページ分割が利用可能になる仕組みですが、guestbook.php の中に
<?php
if (function_exists('paged_comments_template')) {
paged_comments_template();
} else {
comments_template();
}
?>という処理があり、Paged Comments Plugin のテンプレートを利用できるようになっています。
５．Guestbook の作成
テーマディレクトリにアップロードした guestbook.php を Guestbook のページとして利用可能にします。
管理メニューより[投稿]-[ページ作成]をクリックします。ページ作成のページで右サイドバーの「ページテンプレート」から [Guest Book] を選択し、
- ページタイトル：「ゲストブック」
- ページコンテンツ：「記念に一言どうぞ」
等を記入します（あとで変更可能です）。そして「新しいページを作成」をクリックします。
これで、サイドバーの「Pages」のメニューにゲストブック（ページタイトルに入力したタイトル）のリンクが表示されます。
なお、テーマ「EasyAll」の guestbook.php は1カラムなので、2カラムで表示したい場合は、guestbook.php に
<?php get_sidebar(); ?>を適宜追加してください。
これでページ分割が可能なゲストブックになります。
なおゲストブックはトラックバックも受付可能になっています。トラックバックを受信したくない場合は、[管理]-[ページ]をクリックし、「ゲストブック」右の[編集]のリンクをクリックします。
これでゲストブックの編集画面になるので、右サイドバーにある[ディスカッション]の「ピンを許可」のチェックを外して（スクリーンショット）、右下の[保存]をクリックします。
６．参考サイト
下記です。ありがとうございました。
WordPress のコメントをページ分割する Paged Comments Plugin
WordPress のコメントを分割表示する Paged Comments Plugin をご紹介します。このプラグインを用いることでスクリーンショットのようにコメントを分割表示することができます。
このプラグインはコメント以外に Guestbook のコメント分割も可能です（Guestbook での利用方法については別エントリーで紹介します）。
以下、カスタマイズ方法です。
１．プラグインのダウンロード
Paged Comments Plugin の Download ? Latest Version の Version x.x (200x-xx-xx) のリンクをクリックします。
２．プラグインのアップロード
アーカイブを解凍し、paged-comments-config-sample.php を paged-comments-config.php にリネームします。
また、解凍したプラグインフォルダ直下にある、
paged-comments.phppaged-comments-config.php
を plugins ディレクトリにアップロードします。
また同梱されている themes/[テーマ名] 配下にある、いずれかの comments-paged.php を現在利用中のテーマディレクトリに配置します。
上記をまとめると、下記の配置になれば OK です。
wp-content
├ plugins
│ ├ paged-comments.php
│ └ paged-comments-config.php
└ themes
└ [利用中テーマディレクトリ]
└ comments-paged.php３．プラグインの有効化
管理メニューの[プラグイン]をクリックして、表示されている「Paged Comments」右側にある[アクション]欄の「有効化」をクリックします。緑色で表示されれば OK です。
４．小粋空間テーマ用 comments-paged.php
当サイトで配布中の WordPress テーマ用に作成した comments-paged.php です。よろしければ下記のリンクをクリックしてダウンロードしてください。バージョン 2.5 までは動作確認できています。
解凍した中にある comments-paged.php を、２項でアップロードした comments-paged.php と差し替えてください。
５．paged-comments-config.php のカスタマイズ
分割表示の詳細な設定は paged-comments-config.php をカスタマイズします。下記に各設定項目の内容を紹介します。
$paged_comments->all_posts- true：パーマリンク（is_single()）でのページ分割を有効
- false：パーマリンク（is_single()）でのページ分割を無効
$paged_comments->all_pages- true：他のページ（is_page()）ページ分割を有効
- false：他のページ（is_page()）ページ分割を無効
$paged_comments->per_page- 分割コメント数
$paged_comments->ordering- 'ASC'：コメントの表示順序を昇順にする
- 'DESC'：コメントの表示順序を降順にする
$paged_comments->fill_last_page- true：最後のページに per_page のコメント数を表示
- false：最後のページに per_page のコメント数を表示しない
$paged_comments->page_range- 表示する分割ページ数
$paged_comments->fancy_url- true：カスタム URI を利用している場合、URI の最後にコメントページを設定
- false：カスタム URI を利用している場合、URI の最後にコメントページを設定しない
$paged_comments->show_all_option- true："Show All（全コメント表示）" のリンクを表示
- false："Show All（全コメント表示）" のリンクを表示しない
$paged_comments->show_all_ordering- 'ASC'："Show All" をクリックした時の表示順序を昇順にする
- 'DESC'："Show All" をクリックした時の表示順序を降順にする
$paged_comments->default_page- first：デフォルトページを最初のページ（ordering = 'ASC'：1ページ目/ordering = 'DESC'：最後のページ）
- last：デフォルトページを最後のページ（ordering = 'ASC'：最後のページ/ordering = 'DESC'：1ページ目）
- auto：デフォルトページを ordering で決定
Slider の利用方法
Ajax ライブラリとしてスライダーの API が色々と公開されていますが、それとは関係なく、1年近く前にみつけてエントリーしていなかったWebFX：Slider を紹介したいと思います。
Slider は Mozzila 系ブラウザで動作しなかった、同サイトで公開されていた slidebar を新しく作り直したものです。
なお、WebFX は、国内ではグラフ描画の Chart Usage がブログ等で紹介されています。
１．機能
Slider は下記の機能があります。
- スライダーを操作することにより、予め設定した最小値?最大値の値を取得
- 予め設定したデフォルト値の位置にスライダーハンドルを固定
- 値の途中変更が可能
- スライド方向（縦・横）を指定可能
また
- マウスサポート（ドラッグだけでなくクリックによる操作も可能）
- キーボード操作のサポート（矢印キーやPageUp/PageDown による操作が可能）
- ホイール操作のサポート（IEのみ）
- CSSによるスキン変更（Demoのページでサンプルを見ることができます）
と、スライダーとしては結構良い仕上がりです。
２．ダウンロード・インストール
Slider の一番下にある「Download」をクリック。ダウンロードしたアーカイブを解凍し、中にある slider というフォルダを index.html のディレクトリに丸ごとアップロードします。
動作に必要なのは下記です。
slider/css/bluecurve/*
slider/css/luna/*
slider/css/swing/*
slider/js/range.js
slider/js/slider.js
slider/js/timer.jscss ディレクトリは使用するスキン別に分けられています。例えば bluecurve を使用するのであれば luna / swing ディレクトリはアップロード不要です。
３．スライダーの表示
</head> の直前に下記を追加します。
<link type="text/css" rel="stylesheet" href="slider/css/bluecurve/bluecurve.css" />
<script type="text/javascript" src="slider/js/range.js"></script>
<script type="text/javascript" src="slider/js/timer.js"></script>
<script type="text/javascript" src="slider/js/slider.js"></script>1行目はサンプルで用意されているスキンから「bluecurve」を利用した場合です。他に「winclassic」「luna」「swing」がありますのでお好きなデザインを選んでください（winclassic は winclassic.css ファイルのみ）。
スライダーを表示させたい位置に下記のタグを追加します。tabIndex 属性は TAB キーによる選択を可能にします。
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>上記タグのすぐ下に、下記のデバグ用タグ（青色）を表示させておくと良いでしょう（不要になったら削除します）。
<div class="slider" id="slider-1" tabIndex="1">
<input class="slider-input" id="slider-input-1" name="slider-input-1" />
</div>
<p>
Value: <input id="h-value" onchange="s.setValue(parseInt(this.value))"/>
Minimum: <input id="h-min" onchange="s.setMinimum(parseInt(this.value))"/>
Maximum: <input id="h-max" onchange="s.setMaximum(parseInt(this.value))"/>
</p>４．script タグの追加
４．１ Horizontal （水平方向にスライド）の場合
２項で設定した位置より後方に下記の script タグを追加します。ここでは上記のデバグ用 input タグにスライダーの値を表示するだけのサンプルを示します。
<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.onchange = function () {
// デバグ用
document.getElementById("h-value").value = s.getValue();
document.getElementById("h-min").value = s.getMinimum();
document.getElementById("h-max").value = s.getMaximum();
};
window.onresize = function () {
s.recalculate();
};
</script>４．２ vertical （垂直方向にスライド）の場合
４．１項のコンストラクタ（new ?の行）の第3パラメータに下記を追加します。
<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"), "vertical");
：または次のように setOrientation を追加します。
<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setOrientation("vertical");
：５．各値の変更
下記の API を利用して値を変更します。
- デフォルト値：
setValue - 最大値：
setMaximum - 最小値：
setMinimum
以下、設定例です。
<script type="text/javascript">
var s = new Slider(document.getElementById("slider-1"), document.getElementById("slider-input-1"));
s.setValue(10);
s.setMaximum(100);
s.setMinimum(0);
：６．API
Slider で提供されている各 API です（間違っていたらご指摘ください）。
Timer
setTimeout のオブジェクト指向カプセル化
getPauseTime：ポーズ時間（ms）取得isStarted：タイマー開始可否を返却setPauseTime：ポーズ時間（ms）設定start：タイマー開始stop：タイマー終了
Range
スライダー・スクロールバー・プログレスバーの動作で使用されるデータのモデル化。 Sun Java によって定義された javax.swing.BoundedRangeModel インタフェースの考えに基づいています
getMaximum：最大値を取得getMinimum：最小値を取得getValue：スライダーの値を取得setMaximum：最大値を設定setMinimum：最小値を設定setValue：スライダーの値を設定
Slider
最大値?最小値の値を変えるためにハンドルをドラッグずるスライダーコントロール
getBlockIncrement：PageUp/PageDownキーの増減値を取得getMaximum：最大値を取得getMinimum：最小値を取得getOrientation：スライダーの縦・横を取得getUnitIncrement：矢印キーの増減値を取得getValue：スライダーの値を取得ontimer：タイマー設定recalculate：*スライダーがリサイズされた後にこのAPIを使用setBlockIncrement：PageUp/PageDownキーの増減値を設定setMaximum：最大値を設定setMinimum：最小値を設定setOrientation：スライダーの縦・横を設定setUnitIncrement：矢印キーの増減値を指定setValue：スライダーの値を設定
７．スキン用 CSS
スキンは下記のセレクタで設定されています。
/* スライダー全体 */
.dynamic-slider-control {}
/* スライダー外側(horzontal用) */
.horizontal {}
/* スライダー外側(vertical用) */
.vertical {}
/* スライダー内側 */
.dynamic-slider-control input {}
/* ハンドル */
.dynamic-slider-control .handle {}
/* ハンドルの画像(horizontal用) */
.dynamic-slider-control.horizontal .handle {}
.dynamic-slider-control.horizontal .handle div {}
.dynamic-slider-control.horizontal .handle.hover {}
/* ハンドルの画像(vertical用) */
.dynamic-slider-control.vertical .handle {}
.dynamic-slider-control.vertical .handle.hover {}
/* スライダーバー */
.dynamic-slider-control .line {}
/* スライダーバー幅(vertical用) */
.dynamic-slider-control.vertical .line {}
/* スライダーバー幅(horizontal用) */
.dynamic-slider-control.horizontal .line {}
/* スライダーバーのドロップシャドウ */
.dynamic-slider-control .line div {}2008.04.21
サンプルのマークアップを変更（IE6で表示できなかったため）
WordPress テーマ（テンプレート）・3カラム版
WordPress 用のテーマ（テンプレート）・3カラム版を作りました。
スクリーンショットの3カラム固定レイアウトの他、3カラムリキッドレイアウトや2カラム・1カラムレイアウトなどに変更することも可能です。カラムレイアウトの設定方法につきましては本エントリーを参照ください。
１．利用規定
ご利用の前にテンプレートのページを必ずご覧くださいますよう、よろしくお願い致します。
２．ダウンロード
下のリンクからテーマ（テンプレート）をダウンロードしてください。
2007.02.05 初版
2007.02.06 クレジットバナーにアンカーを追加
2007.02.11 サイドバーのアンカーのない文字への color プロパティ追加
2007.02.24 リキッドレイアウトのサイドバーの垂直開始位置修正
2007.03.13 日付表示のテンプレートタグを変更と、それに伴う５項の JavaScript 削除
2007.07.22 XHTML 1.0 Strict 等、変更
2007.12.03 月別アーカイブリストの件数表示、0件のカテゴリーの非表示等、変更
2008.06.16 floatのクリア方法変更、フッタのWordPress MEへのリンクを変更
2008.10.25 記事ページの title 要素修正
2009.07.07 画像に本文が回り込まない不具合を対処
2010.03.17 検索結果でレイアウトが崩れる不具合を対処
2010.12.07 WordPress 3.0 対応
2011.03.17 ブログのパス変更でバナー画像が表示されなくなる不具合を修正
2011.11.03 v3.0.20「Commented entry listプラグイン」機能を同梱／パンくずリスト表示の不具合を対処／非推奨テンプレートタグの削除／フォントサイズ変更
プラグインのご利用および質問に対する回答等について、ご支援・ご賛同くださる方からの寄付をお待ち申し上げます。
３．テーマの切り替え
ダウンロードしたファイルを展開し、中にある koikikukan3 というフォルダを、wp-content/themes 配下にアップロードしてください。
そのあと、管理画面の「外観」→「テーマ」をクリックすれば、アップロードしたテーマとサムネイルが表示されます（下）。
サムネイルまたは「プレビュー」をクリックすれば、テーマをプレビューできます。「有効化」をクリックすれば即座にテーマが切り替わります。
プレビューの状態からテーマを切り替えるには、プレビュー画面右上の"koikikukanを有効化"をクリックします。
４．カラムレイアウト変更方法
カラムレイアウトを変更するには、テーマエディタで「ヘッダー」を選択し、下記の赤色部分を変更するだけです。
<?php global $layout; $layout = 'layout-three-column'; ?>各レイアウトの設定値は次の通りです。記事冒頭の画面は「3カラム固定（左右サイドバー）」です。
- 3カラム固定（左右サイドバー）：layout-three-column
- 3カラムリキッド（左右サイドバー）：layout-three-column-liquid
- 3カラムリキッド（右サイドバー）：layout-three-column-liquid-right
- 2カラム固定（左サイドバー）：layout-two-column-left
- 2カラム固定（右サイドバー）：layout-two-column-right
- 2カラムリキッド（左サイドバー）：layout-two-column-liquid-left
- 2カラムリキッド（右サイドバー）：layout-two-column-liquid-right
- 1カラム固定：layout-one-column
- 1カラムリキッド：layout-one-column-liquid
以下に切り替えイメージをいくつか示します。
3カラムリキッド（左右サイドバー）
3カラムリキッド（右サイドバー）
2カラムリキッド（右サイドバー）
５．注意事項
サイドバーのリストマークは画像を用いて表示しています。この画像が表示されない場合、アップロードしたテーマの中にある images ディレクトリのパーミッションを変更してください。755 等になっていれば大丈夫と思います。
また、リキッドレイアウトを選択した場合、背景色は必ず「#ffffff」を設定してください。他の色や背景画像を設定していると正常に表示されません。
６．記事の日付表示について
本項目は 2007.03.13 以前にダウンロードされた場合のみ該当します。
本テンプレートでは、タイトル前方に記事の公開日を表示するようにしており、JavaScript を用いてページの前方に同一日付の記事がある場合、日付を重複して表示しないようにしています。なおデフォルトの環境設定でのみ動作確認していますので不具合ございましたらご連絡ください。
この機能を無効にする場合はベースHTMLテンプレート下にある
<script type="text/javascript">
<!--
var elements = document.getElementsByTagName('p');
var work;
var work_old = '';
for (i=0; i<elements.length; i++) {
if (elements[i].getAttribute('class') == 'date' ||
elements[i].getAttribute('className') == 'date') {
work = elements[i].innerHTML;
if(work == work_old){
elements[i].style.display = 'none';
}
work_old = work;
}
}
//-->
</script>を削除してください。
７．XHTML1.0 Transitional valid
テンプレートを設定した状態で W3C Markup Validation Service での XHTML1.0 Transitional valid および、Another HTML-lint gateway で高得点になるようにしています。
2007.02.06 追記
リストマークが表示されない問題について記述を追加しました。またテーマの右サイドバー下にあるクレジットバナーにリンクが設定されていなかったため、修正しました。
2010.12.07 追記
記事本文をWordPress 3に合わせて全面改訂しました。
2011.01.13
Commented entry listのリンク先を変更しました。
旧：http://hirobee.jp/archives/2005/05/commented-entry-list-11/
新：http://www.koikikukan.com/archives/2011/01/13-005555.php
Ajax 月送りカレンダー（縦型）
「Ajax 月送りカレンダー」の縦型版のカスタマイズを紹介します。下のスクリーンショットは完成例です。
これまでに Movable Type の月送り縦型カレンダーを iframe を用いてカスタマイズを試みたのですが、クロスブラウザ問題、つまりブラウザによって表示の崩れが発生し、これを解消できないため、当サイトでは公開を見送ってました。
が、Ajax 版では iframe が不要になり、上記のような表示が可能になります。
以下に簡単なサンプルを作りましたので動作をお試しください。
仕様
ここで紹介する月送りカレンダー（縦型）の主な仕様です。
- Ajax を利用して縦型カレンダーを月送りにします。Ajax 化されるのはページ表示時および月送り時のカレンダー取得です
- クッキーを利用して月送り状態を保持します
- カレンダーの取得に失敗した場合、カレンダー表示エリアには何もされません（カスタマイズ可能）
以下、カスタマイズ方法です。テンプレートの指定はありませんので、CSS を変更すればどのテンプレートでもお使いになれると思います。
１．スクリプトのダウンロード・アップロード
下記のスクリプトをダウンロードします。
prototype.js（"Download the latest version" のリンクをクリック）ajaxCalendar.jsdayChecker.js（「２．ダウンロード」にある dayChecker.js をクリック）
ダウンロードした ajaxCalendar.js と dayChecker.js はメインページと同じディレクトリにアップロードしてください。
また、prototype.js はダウンロードしたアーカイブを解凍して、dist フォルダの中にある prototype.js をメインページと同じディレクトリにアップロードしてください。
注：ここで配布している ajaxCalendar.js は縦型カレンダー専用です。テーブルタイプや横型カレンダーで配布している ajaxCalendar.js はお使いになれません。
２．カレンダーテンプレート作成
注：ブログの文字コードが UTF-8 以外で運用されている場合は、２．１項のカスタマイズも併せて行ってください。
バージョンが 3.2-ja 以降の場合、管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。3.1x-ja 以前の場合、管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。
次画面で下記を設定してください。
- テンプレート名：カレンダー（名称は何でもOKです）
- このテンプレートにリンクするファイル：（設定不要）
- テンプレートの内容：下記
<table summary="<MTArchiveDate format="%Y/%m">">
<caption class="calendarhead">
<MTArchivePrevious><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');">＜</a></MTArchivePrevious> <MTArchiveNext><a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/%i">');" >＞</a></MTArchiveNext><br />
<$MTArchiveDate format="%Y"$><br />
<$MTArchiveDate format="%m"$>
</caption>
<MTCalendar month="this">
<MTCalendarIfBlank><MTElse><tr><td><span></MTElse></MTCalendarIfBlank><MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank><MTElse></span></td></tr></MTElse></MTCalendarIfBlank></MTCalendar></table>設定が終わったら「保存」をクリックしてください。
なお、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストで2ヶ所出現する
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="calendar/%Y/%m/index.html">');">＜</a>の赤色部分を変更します。
例えば「archives」というパスを付与している場合は、
<a href="javascript:void(0);" onclick="changeMonth('<$MTBlogURL$><MTArchiveDate format="archives/calendar/%Y/%m/index.html">');">＜</a>とします。
２．１ ブログの文字コードがUTF-8以外の場合
Ajax（XMLHttpRequest）は UTF-8 で動作することを前提としています。他の文字コードでブログを運用している場合、本カスタマイズが正常に動作しない可能性があります。*1
ここではひとつの解決方法として Ogawa::memoranda さんの MT-I18N プラグインを利用する方法を紹介します。つまりブログの文字コードが UTF-8 以外の場合、プラグインを利用してカレンダーアーカイブの文字コードだけ UTF-8 で出力するという作戦です。
まず、MT-I18N Plugin.ja JP をダウンロードして、プラグイン mt-i18n.pl を plugins フォルダにアップロードします。
そして、２項で示したカレンダーテンプレート全体を下記の青色のタグで括ってください。
<MTEncodeText to="utf8">
：
（カレンダーテンプレート）
：
</MTEncodeText>本プラグインを利用し、EUC-JP、Shith_JIS で作成した Movable Type のサイトで、カレンダー動作と日本語表示の正常性は確認済です。ただし、.htaccess 等で文字コードを強制的に指定している場合は未確認です。
３．カレンダーテンプレートを月別アーカイブに関連付け
バージョンが 3.2-ja 以降の場合、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成」をクリックして下記の設定を実施してください（バージョン 3.3 以降の場合、右上にある「詳細モードに切り替え」のリンクをクリックすることで「公開」というメニューが表示されます）。
バージョンが3.1x-ja 以前の場合は、管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施してください。
- アーカイブの種類：月別
- テンプレート：カレンダー（←２項で設定した「テンプレート名」です）
「追加」をクリック後、その下の「アーカイブ」欄にある「月別」に、２項で付与した「テンプレート名（ここでは"カレンダー"）」が追加されていればOKです。
次に同じ「アーカイブ」欄の「月別」の「カレンダー」の右側にある「出力フォーマット（3.2-ja 以降）」または「アーカイブ・ファイルのテンプレート（3.1x 以前）」に下記を設定してください。
出力フォーマット（3.2-ja 以降）
calendar/%y/%m/%iアーカイブ・ファイルのテンプレート（3.1x-ja 以前）
<$MTArchiveDate format="calendar/%Y/%m/index.html"$>これがカレンダー用のディレクトリおよびファイル名となります。
設定後、ページ下にある「変更を保存」をクリックしてください。
またカレンダーを初めてご利用になる場合は、「アーカイブ種類」欄の「日別アーカイブ」をチェックして保存してください。このチェックがされていないと、再構築で下記のようなエラーが発生します。
４．テンプレート修正
カレンダーを表示させたいテンプレートに下記の設定を行います。
４．１ 外部ファイルのインクルード
<head>～</head> の間に下記を追加します。
<script type="text/javascript" src="<$MTBlogURL$>prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>ajaxCalendar.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>dayChecker.js"></script>４．２ カレンダー表示部分の設定
カレンダーを利用したいテンプレート（メインページ／カテゴリー・アーカイブ／日別アーカイブ／エントリーアーカイブ等）の任意の位置下に、カレンダー表示用のタグ（青色部分）を追加します。
ここではサンプルとして、公開テンプレート・固定3カラムの左サイドバーと中央カラムの間に表示する方法を示します。
：
</div><!-- /links-left -->
</div><!-- /links-left-box -->
<!-- 左カラム終了 -->
<div id="links-center-box">
<div id="links-center">
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="calendar/%Y/%m/" $></MTEntries>");
</script>
</div>
</div>
<!-- 中央カラム開始 -->
<div id="content">
<div class="blog">
：div id="calendar" は空要素ですが、Ajax によってこの部分にカレンダーが表示されます。
また、２項と同様、アーカイブパス（3.2 以降であれば管理画面の「設定」→「公開」→「アーカイブの設定」）を設定している場合は、上記リストの赤色部分を修正します。
例えば archives というアーカイブパスを設定している場合は、下記の青色のように修正てください。
getCalendar("<$MTBlogArchiveURL$>", "<$MTBlogID$>", "<$MTBlogURL$><MTEntries lastn="1" sort_order="descend"><$MTEntryDate format="archives/calendar/%Y/%m/" $></MTEntries>");５．CSS修正
下記をスタイルシートに追加します。すでにカレンダー関係のスタイル設定が行われている場合は競合を避けるため、古い設定を削除（またはコメントアウト）してください。
IE7 の CSS ハック（*:first-child+html）も組み込んでいます。
#calendar {
margin: 5px 0 10px;;
color: #444444;
}
.calendarhead {
margin-bottom: 3px;
padding-bottom: 3px;
font-size: 10px;
letter-spacing: 0em;
text-align: center;
border-bottom: 1px solid #999999;
}
#calendar table {
margin-left: 5px;
_margin-left: 0;
padding: 0;
border-collapse: collapse;
}
*:first-child+html #calendar table {
margin-left: 0;
}
#calendar td {
margin: 0;
padding: 2px;
text-align: center;
font-size: 10px;
line-height: 120%;
}
.holiday,
.tholiday,
.holiday a:link,
.tholiday a:link {
color: #e50003;
}
.saturday,
.tsaturday,
.saturday a:link,
.tsaturday a:link {
color: #0000ff;
}
.tholiday,
.tsaturday,
.today {
_margin: 0 2px;
padding: 1px 2px;
display: block;
border: 1px solid #444444;
}６．縦カレンダーをカラムレイアウトに挿入するための修正
当サイトで配布しているテンプレート（3カラム・固定レイアウト）を例に説明します。端的に申し上げますと 4 カラムに変更して、その中の1カラムをカレンダー表示用として利用します。
まず下記の CSS をスタイルシートに追加してください。
.layout-three-column #links-center-box {
float: left;
width: 40px;
}
.layout-three-column #links-center {
padding: 10px 0 0;
color: #ffffff;
}追加したカレンダー分の幅（40px）を、全体の幅をひろげるか、中央カラムの幅を少なくすることで帳尻を合わせます。
中央カラム幅を変更しない場合は全体の幅を 40px ひろげます。
.layout-three-column #box {
width: 890px;
margin-right: auto;
margin-left: auto;
padding: 0 0 15px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
text-align: left;
background-color: #ffffff;
}中央カラム幅を変更する場合は中央カラム幅を 40px 少なくします。
.layout-three-column #content {
float: left;
width: 438px;
margin: 0 0 10px 0;
border-bottom: 1px solid #666699;
border-left: 1px solid #666699;
border-right: 1px solid #666699;
}７．ページ表示時にローディング状態を表示する場合
インチキっぽいですが、４．２項で設定した
<div id="calendar"></div>に、例えば青色の
<div id="calendar"><img src="[画像のURL]" /></div>を追加することで、ページ描画でカレンダーが表示されるまでローディング画像を示すことができます。テキストも表示可能ですが、縦型では横幅に制約があるので画像を表示する方が良いでしょう。
月送りのリンククリック時はローディング画像は表示されません。またカレンダー取得失敗の場合は表示が消えます（これは８項の設定と関連します）。
８．カレンダー取得失敗時にメッセージ等を表示する
Ajax 月送りカレンダーは HTTP 非同期通信でカレンダーファイルを取得・表示しますが、何らかの原因で通信に失敗し、正常に取得できない可能性があります。当サイトで運用していた時も 503 エラーが多発すると取得に失敗するようです。
このカスタマイズではカレンダーの取得に失敗した場合、カレンダー表示エリアに正常に取得できなかったメッセージ
File Not Foundを表示するようにしています。このメッセージは ajaxCalendar.js の下記の青色部分が対応します。
function errorProcess() {
$('calendar').innerHTML = 'File Not Found';
}メッセージを変更したい場合はこの青色部分を修正してください（きれいに表示する場合は「NG」等の短い文言に変更してください）。またこの1行を丸ごと削除すれば、HTTP 非同期通信に失敗した場合にカレンダー表示エリアの書き換えが行われなくなりますが、７項の表示がそのまま残りますのでご注意ください。
「失敗してもカレンダーを表示させたい」という場合は、上記メッセージ出力の1行を削除して、７項のローディング画像の代わりに、カレンダータグ（通常のカレンダータグ）を埋め込んでおくという手もあります。通信が成功すれば Ajax 月送りカレンダーに切り替わり、失敗すれば通常のカレンダーがそのまま表示されます。
９．トラブルシューティング
カレンダーが正常に表示されない場合、つまり上記のカスタマイズをそのまま行って、カレンダーが表示される位置に "File Not Found" が表示された場合、以下の問題が考えられます（全てではありませんが思いついたものを挙げておきます）。
- カレンダーアーカイブの再構築ができていない
- カレンダーアーカイブページへのパス設定が誤っている
ajaxCalendar.jsの修正誤り- テンプレートに設定したカレンダーアーカイブページの拡張子が不一致
- カレンダーアーカイブが UTF-8 で出力されていない
ご質問の前に確認していただきたいのは、
- ブラウザの[表示]-[ソース]（あるいは「ソースの表示」）で、カレンダーを設定しているページのソースを表示
- 表示されたソースから下記のタグをみつけ、そこに記述されている URL（赤色）をブラウザに設定して実行
<div id="calendar"></div>
<script type="text/javascript">
getCalendar("http://user-domain/calendar/yyyy/mm/");
</script>何も表示されない場合（404 Not Found）はカレンダーアーカイブへのパスの設定が誤っているか、アーカイブが生成されていない可能性があります。
逆に、カレンダーが表示されてブラウザにそのカレンダーが表示されない場合は、ブラウザの再起動や、ブラウザのキャッシュ・一時ファイルの削除等を行ってみてください。また UTF-8 以外で運用されている方は、カレンダーが表示されている状態で、ブラウザの[表示]-[エンコード]でカレンダーのページの文字コードが UTF-8 になっていることを確認してください。
クッキーを削除した直後のカレンダーは表示されるけれども、月送りのリンクをクリックすると File Not Found が表示されるという場合は、２項のテンプレートに埋め込んでいるカレンダーアーカイブへのパスが誤っている可能性があります。
また、縦型カレンダーをカラムレイアウトに組み込んでレイアウトが崩れる場合、カラム幅の計算が誤っています。スタイルシートで設定したカラム幅を見直してください。
2007.03.21 追記
Cookie に保持された場合にカレンダーが表示されなくなる不具合および、複数ブログで利用可能になるよう、ajaxCalendar.js および４．２項のMTタグを修正しました。
*1：文字コードの設定を行わずに Movable Type をインストールした場合の文字コードは UTF-8 です。
ブログのパフォーマンス改善：その後（YSTとの戦い：その5）
先日エントリーした「サーバ移転延期とパフォーマンス改善内容について」の、現在のアクセスに関する状況報告です。
実施した改善策は下記の通りです。詳細は上記の記事を参照ください。
- PHP ファイルで条件付き GET ができるように変更
- PHP ファイルを最小限にして、最近のエントリー／コメント／トラックバック等のダイナミックなモジュールは PHP を用いたモジュール化から Ajax に変更
- ヘッダやバナー類のスタティックなモジュールも PHP モジュール化を行っていたので、これらは MTInclude に置き換え
１．エラーについて
通常のページ閲覧で 503 エラーは発生しなくなりました。ただしコメント投稿では数回発生することを確認しています。
２．Google Analytics による訪問者とページビュー数
「エラーが減る = アクセスが増える」ということで、現在のページビューの状況です。
下は Google Analytics による、対策前（12/14?1/21）と対策後（1/25?1/31）の「訪問者とページビュー数」です。
対策前
対策後
503 エラーが多発している時点では 4500?7000 PV だったのが、7500?10000 PV に上昇しています。実際は対策後の前の週でアクセスの多いエントリーをあげ、その余波があると思われるのでもう少し下がるのではないかと思います。
３．Google Analytics による参照ソース別訪問者数
これは意外な結果でしたが、これまでアクセスが伸びずに悩んでいた Yahoo からのアクセスが倍近くになりました。
下は Google Analytics による当サイトの昨日（1/31）の「ソース別の訪問数」です。
- 60.34%：google
- 9.56%：yahoo
- 6.76%：(direct)
- 1.81%：msn
- 1.53%： b.hatena.ne.jp
- 20.00%：(other)
ここ数ヶ月、3?4% をうろうろしていた Yahoo がようやく復活しました。２のページビュー増加にも貢献しています。
「Google と Yahoo からのアクセスは 1:1」という話を聞くので、10% 辺りという数値が妥当な数字であるかどうかについてですが、SEO で効果をあげられている「世界中の１％の人々へ」の蒲生トシヒロさんの下記の記事で Google と Yahoo の比率が似ていることから、いい線ではないかと考えています。
ちなみに、他で運用している音楽サイトは Yahoo の登録サイトで、1:1 の比率になっています。
思い返すと、503 エラーが多発し始めてから Yahoo からのアクセスが激減したような気がします。この点については、Google からのアクセスに変化がなかったので、よもや 503 エラーが YST の SEO と関係しているとは思いもよりませんでした。
４．YST に関する過去の記事
カレンダーの日曜と祝日のスタイルを別にする
当サイトで公開しているカレンダーのカスタマイズは、日曜と祝日に同じスタイル（厳密には同一のクラス属性値）を割り当てていますが、「日曜日と祝日のスタイルを分けるにはどうすれば良いでしょうか」というご質問を頂きましたので、本エントリーにてクラス属性を個別に割り当てる方法をご紹介致します。
ここでは Movable Type の「Ajax 月送りカレンダー」を例に説明していますが、他のブログのカレンダーカスタマイズでも同じような変更を行えば大丈夫だと思います。
１．dayChecker.js の修正
任意のエディタで dayChecker.js を開き、下記の赤色部分を削除します。
function isHoliday(year, month, day) {
var week = new Date(year, month - 1, day).getDay();
if (week == 0) {
return true;
}
switch(parseInt(month,10)) {
case 1:
if (day == 1) {
return true;
}
：削除した部分は祝日判定の中で日曜日も抱き合わせで判定している部分です。
今思うと、isHoliday() という関数で日曜判定を行うこと自体、妥当でなかったかもしれません（反省）。
２．ajaxCalendar.js の修正
任意のエディタで ajaxCalendar.js を開き、下記の青色部分を追加します。
function setWeekendAndHoliday(y,m) {
：
（略）
：
if (isHoliday(year, month, day)) {
spans[i].setAttribute('class', 'holiday');
spans[i].setAttribute('className', 'holiday');
} else if(isSunday(year, month, day)) {
spans[i].setAttribute('class', 'sunday');
spans[i].setAttribute('className', 'sunday');
} else if(isSaturday(year, month, day)) {
spans[i].setAttribute('class', 'saturday');
spans[i].setAttribute('className', 'saturday');
}
if (isToday(year, month, day)) {
spans[i].parentNode.setAttribute('class', 'today');
spans[i].parentNode.setAttribute('className', 'today');
}
：プログラムが書ける方はお分かりと思いますが、上記のロジックは祝日が土日より先に判定されるようにしてますので、結果として祝日のスタイルが土日のスタイルより優先されます。
なお、他のブログのカレンダーカスタマイズで ajaxCalendar.js がない場合も、上記の土日祝日判定処理はどこかに埋め込まれています。
３．CSS の修正
ひとまとめにしている日曜と祝日のスタイルを分けて設定します。
変更前
.sunday,
.holiday,
.holiday a:link,
.holiday a:visited {
color: #e50003;
}変更後
.sunday,
.sunday a:link,
.sunday a:visited {
（日曜日のスタイルを設定）
}
.holiday,
.holiday a:link,
.holiday a:visited {
（祝日のスタイルを設定）
}なお、.sunday はカレンダーの曜日部分にも使われてます。異なるスタイルを設定したい場合はどちらかの クラス名を変更すると良いでしょう。
