テンプレート・モジュールの利用
ここではタイトル下にメニューを与える方法についてのメモです。参考サイトは下記です。ありがとうございました。デザインが合うようにスタイルシートは若干修正致しました。
なおこちらのサイトは訳ありで閉鎖されるようで残念です。
今回はMTIncludeというタグを使ってのモジュール化です。PHPを利用したモジュール化もありますので、Magic WhiteさんのPHP利用のテンプレートモジュール化をご覧ください(他のサイトでJavaScriptを使ったのもありました)。
1.新しいモジュールの追加
管理メニューより「テンプレート」をクリック。次の画面で一番下右の「新しいテンプレート・モジュールを作る」をクリック。
次画面で以下の情報を設定(URLは私のサイト用になってますので適宜変更ください)。
- テンプレートの名前:globalnavi
- モジュールの中身:下記
<div id="globalnavi">
<li><a href="<$MTBlogURL$>">Home</a></li>
<li><a href="<$MTBlogURL$>site.html">About</a></li>
<li><a href="<$MTBlogURL$>about.html">Profile</a></li>
</div>
2.スタイルシートの追加
下記をStylesheetに追加(場所はどこでもOK)
#globalnavi {
padding-top: 10px;
}
#globalnavi li {
padding-left: 0px;
padding-right: 10px;
display: inline;
}
#globalnavi li a,
#globalnavi li a:link,
#globalnavi li a:visited {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: none;
}
#globalnavi li a:hover {
font-family: Verdana, Arial, sans-serif;
font-size: 12px;
text-decoration: underline;
}
3.テンプレートにモジュールを引き込む設定の追加
各テンプレートのタイトル部分(下記)の該当位置に青色の記述を追加してください。
<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<h2><$MTBlogDescription$></h2>
<$MTInclude module="globalnavi"$>
</div>
4.スタイルシート修正
上記の設定を行ったあと再構築を実施すれば表示されると思いますが、メニュー配置位置がタイトルのパディングに依存するのとバナー部分が広がることでサイドバーのレイアウトが影響を受けますので、必要に応じて下記の部分を修正してください。
#banner {
padding-bottom:15px; ← バナー下からリンクまでのパディング
}
#links-right{
top : 95px ; ← 右サイドバーのトップからの開始位置
}
#links-left{
top : 95px ; ← 左サイドバーのトップからの開始位置
}
![]() | 図は上記のカスタマイズを行った結果です。こんな感じでタイトルの下にリンクメニューが表示されます。 |
リンクをマウスオン時にずらす
これも使い始めて随分日が経ちましたがとりあえずご紹介まで。
文字や画像のリンクにマウスをポイントすると表示が右下にずれるという技です。我楽さんのサイトで使われているのが気に入って、使ってみました。とりあえずタイトル文字と右下のバナーに適用させています。こういう小技は洒落ていていいですね。
カスタマイズ方法は、スタイルシートで該当するa:hoverの中に
position:relative; top:1px; left:1px;
を入れればOKです。
MT 3カラム テンプレート(サイズ固定)
デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します。コメント・トラックバックはポップアップしない指定にしています。個別アーカイブ・コメント・コメントプレビュー・コメントエラー・コメント保留のテンプレートは1カラムで作成しています。
カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後(前でもいいです)に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。
カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。
#box {
width: 800px; ←3カラム全体の幅
}
#content {
width: 428px; ←中央カラムの幅(左右border分の2px差し引く)
}
#links-right{
width : 155px ; ←右カラムのテキスト幅
}
#links-left{
width : 155px ; ←左カラムのテキスト幅
}
値は、
全体の幅 = (中央カラム幅 + 2) + (左カラム幅 + (15*2)) + (右カラム幅 + (15*2))
となるように設定してください。左右カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。
不明な点または不具合等ございましたらご連絡ください。
Main Index
Stylesheet
Category Archive
Date-Based Archive
Individual Entry Archive(1カラム用)
Individual Entry Archive(3カラム用)
コメント・プレビュー(1カラム用)
コメント・プレビュー(3カラム用)
コメント・エラー(1カラム用)
コメント・エラー(3カラム用)
コメント・保留
2004.09.29 追記
コメント関連のテンプレートに3カラム用を追加しました。
2004.10.15 追記
スタイルシートの本文・コメント
サイドバー部分はカレンダーの曜日表示に影響があることが判明したためコメントアウトしました。
2004.10.19 追記
Individual Entry Archive(1カラム・3カラム)のトラックバック表示部分のデザインを変更しました(きちんとできていなかったので他と統一しました)。
2004.10.22 追記
TypeKeyのサイン・イン時の不具合を修正しました。修正したファイルはIndividual Entry Archive(1カラム/3カラム)/コメント・プレビュー(1カラム/3カラム)/コメント・エラー(1カラム/3カラム)/コメント保留です。
ポータブルCDプレーヤー購入
先日秩父に行った際、CDプレーヤーを使いたい用事があったのですがうっかり忘れたことに気がつき、「今持っているCDプレーヤーも古いし調子悪いし、ACアダプタ使えないし、この際だから新調しちゃえ!」と言い聞かせ(真実ですが)、道中でみつけた秩父市街の某電気店に立ち寄りました。
都会と比べてそれほど種類は置いてないだろうとタカをくくって入りましたが予想を遥かに超える品数の少なさで、選択肢は5つ。いつもはどれにしようかと悩むのですが少な過ぎて欲しいものがなく、悩みました。
それでもとりあえずファンのSONY製(1種類しかない)に決定。広い割りに二人しかいない店員さんの一人を呼んで「これください」。
とりあえずこれで一安心と思いきや、在庫をとりにいって戻ってきた店員さん「すいません、品切れでした」。在庫管理やってないみたいです。
「じゃ展示品を割り引きましょう」と持ちかけられましたが程度の割りに値引き率よくなく、「いや、やっぱり新品がいいです」と、残り4種類でさらに悩むことにしました。
どれも量販店で買えばもっと安いだろうな、と思っていると店員さんが「KENWOODの在庫処分品なら新品がありますけど」。
あ、これ在庫処分品ですか?現品処分品と勘違いしてました。それでこの値段ならかなりお買い得感ありです。機能は二の次で(というか選択の余地なし)これに決めました。
で購入したのは「KENWOOD DPC-X337L」というヤツで税込6470円でした。とりあえず持参したCDが聴ければ良かったのですが思った以上に低機能。バッテリーも相当持ちません(笑)。電池すら付属してなくておいおい…って感じです。
スケルトンのカバーなのでCD回っているのが見えます。それで知ったのですが最近のCDプレーヤーって演奏中に止まって*るんですね(無知)!
*音飛び防止のため先にキャッシュに読み込ませているようで、読み込みが終わると回転が停止するみたいです。
外は
リンク修正
我楽さんのPHP化とページ分割。とFLIRTさんからのコメントで気がつきましたが、以前個別アーカイブで使っていたhtmlファイルをphpに修正した際にリダイレクトせず、さらにサーバを更改した関係で旧ファイルが全てなくなっていたので旧ファイル向けに設定していたリンクが全て切れてしまってました。
#他のリンクにもURLの設定がもれているものがありました _| ̄|○
ということで現在自サイトに埋め込んでいるリンクを見直しています。あとリンク変更もれ回避のため、とりあえず旧サーバから古いhtmlファイルごっそりコピーしておきましたが、どこかで自サイトのエントリーへのリンクで404が出たら遠慮なくツッこんでやってください。
そういえばphpファイルに変更してからgoogleのPageRankがひとつ下がった気が…
月送りカレンダー
|
以下、公開テンプレート用にデザインを修正した手順メモです。
2006.10.10 追記:現在 Ajax 月送りカレンダーを公開中です。
1.アーカイブテンプレート用ディレクトリ設定
この項目はアーカイブテンプレート専用のディレクトリを作成するためのものです。月送りカレンダーのためだけの設定ではありませんが、この設定を行うことでトップディレクトリ(index.html があるディレクトリ)をすっきりさせることができます。
注:この設定を行うと他のアーカイブテンプレートのURLも変更されます。変更したくない場合は、この項目をスキップしてください(ただし3項および5項のリスト内にある "archives/" を削除してください)。
設定方法は次の通りです。ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。
1.1 バージョン 3.2 以降
管理メニューの「設定」→「公開」の「アーカイブの設定」にチェックをいれて、その下に表示されたフォームに下記の内容を設定。
- アーカイブURL:http://ブログURL/archives/
- アーカイブパス:アーカイブURLまでのパス
例えば、当サイトの場合、
- アーカイブURL:http://www.koikikukan.com/archives/
- アーカイブパス:/home/koikikukan/public_html/archives
という具合になります。
1.2 バージョン 3.1x 以前
管理メニューの「ウェブログの設定」→「基本設定」の「ローカル・アーカイブ・パス」と「アーカイブのURL」に、上記と同様、
- ローカル・アーカイブ・パス:アーカイブURLまでのパス
- アーカイブのURL:http://ブログURL/archives/
を設定します。
2.カレンダー用スタイルシート作成
ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。
2.1 バージョン 3.2 以降
管理メニューの「テンプレート」→「インデックス」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。
- テンプレートの名前:カレンダー用スタイルシート
- 出力ファイル名:calendar.css
- テンプレートの中身:リスト1をコピー&ペースト
2.2 バージョン 3.1x 以前
管理メニューより「テンプレート」→「インデックステンプレート」右の「新しいインデックステンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。
- テンプレートの名前:カレンダー用スタイルシート
- 出力ファイル名:calendar.css
- テンプレートの中身:リスト1をコピー&ペースト
@charset "<$MTPublishCharset$>";
body {
margin: 0;
padding: 0;
font-family: Verdana, Arial, sans-serif;
}
.calendar {
color: #444444;
text-align: center;
}
.calendarhead {
font-size: 9px;
letter-spacing: .2em;
}
.calendar table {
padding: 0;
border-collapse: collapse;
}
.calendar th {
padding-top: 5px;
font-size:8px;
width : 20px ;
}
.calendar td {
padding: 2px 0;
font-size:10px;
line-height: 120%;
}
.today {
display: block;
border: 1px solid #444444;
}
.holiday {
color: #e50003;
}
.saturday {
color: #0000ff;
}
リスト1:カレンダー用スタイルシート
3.カレンダー用アーカイブテンプレート作成
ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。
3.1 バージョン 3.2 以降
管理メニューの「テンプレート」→「アーカイブ」→「テンプレートを新規作成」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。
- テンプレートの名前:カレンダー
- テンプレートの内容:リスト2(本日の日付部分がboldになるようにしています)
3.2 バージョン 3.1x 以前
管理メニューより「テンプレート」→「アーカイブに関連したテンプレート」で「新しいアーカイブテンプレートを作る」をクリック。次画面で下記を設定します。設定が終わったら「保存」をクリック。
- テンプレートの名前:カレンダー
- テンプレートの内容:リスト2(本日の日付部分がboldになるようにしています)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0/ Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" /><title><$MTBlogName$></title>
<link rel="stylesheet" href="<$MTBlogURL$>calendar.css" type="text/css" />
</head>
<body >
<div class="calendar">
<table id="calendarTable" summary="<$MTArchiveDate format="%Y/%m"$>">
<caption class="calendarhead">
<MTArchivePrevious>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html"><</a>
</MTArchivePrevious>
<$MTArchiveDate format="%B %Y"$>
<MTArchiveNext>
<a href="<MTBlogURL>archives/calendar/<MTArchiveDate format="%Y/%m/index">.html">></a>
</MTArchiveNext>
</caption>
<tr>
<th abbr="Sunday" ><span class="holiday">Sun</span></th>
<th abbr="Monday" >Mon</th>
<th abbr="Tuesday" >Tue</th>
<th abbr="Wednesday" >Wed</th>
<th abbr="Thursday" >Thu</th>
<th abbr="Friday" >Fri</th>
<th abbr="Saturday" ><span class="saturday">Sat</span></th>
</tr>
<MTCalendar month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td><MTCalendarIfBlank><MTElse><span<MTCalendarIfToday> class="today"</MTCalendarIfToday>></MTElse></MTCalendarIfBlank><MTCalendarIfEntries>
<MTEntries lastn="1">
<a href="<$MTEntryLink archive_type="Daily"$>" target="_top"><$MTCalendarDay$></a>
</MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>
<MTElse></span></MTElse></MTCalendarIfBlank></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</body>
</html>
リスト2:カレンダー用アーカイブテンプレート
4.ファイルの関連付け
ご利用のバージョンを確認して「3.2 以降」または「3.1x 以前」のいずれかを行ってください。
4.1 バージョン 3.2 以降
予め、管理メニューの「設定」→「公開」の「アーカイブ・マッピング」の項目の右側にある「マッピングを新規作成 」をクリックして下記の設定を実施。
- アーカイブの種類:月別(またはMonthly)
- テンプレート:カレンダー
設定後、「追加」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。追加された部分の設定は下記の通りです。
- 「優先」欄のラジオボタン:日付アーカイブのまま
- 「出力フォーマット」欄:リスト3
calendar/%y/%m/%i
リスト3:出力フォーマット(3.2 以降)
4.2 バージョン 3.1x 以前
管理メニューより「ウェブログの設定」→「アーカイブの設定」で「新しく、テンプレートとアーカイブを関連付ける」より下記の設定を実施。
- アーカイブの種類:月別(またはMonthly)
- テンプレート:カレンダー
設定後、「保存」をクリック。正常に保存されると下の「月別」の欄にカレンダーテンプレートが追加されます。
追加された部分の設定は下記の通りです。
- 「優先」欄のラジオボタン:日付アーカイブ(またはDate-Based Archive)のまま
- 「アーカイブ・ファイルのテンプレート」欄:リスト4
<$MTArchiveDate format="calendar/%Y/%m/index.html"$>
リスト4:アーカイブ・ファイルのテンプレート(3.1 以前)
5.カレンダーの設置
「テンプレートの編集」 で各テンプレートのカレンダー表示用タグ・リスト5(赤色)を全て削除し、カレンダー表示用の iframe タグのリスト6(青色)と入れ替えてください。
<div class="side">
<div class="calendar">
<table border="0" cellspacing="4" cellpadding="0" align="center" summary="投稿した日にリンクする月別のカレンダー">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday"><span class="calendar"><font color="#e50003">Sun</font></span></th>
<th abbr="Monday"><span class="calendar">Mon</span></th>
<th abbr="Tuesday"><span class="calendar">Tue</span></th>
<th abbr="Wednesday"><span class="calendar">Wed</span></th>
<th abbr="Thursday"><span class="calendar">Thu</span></th>
<th abbr="Friday"><span class="calendar">Fri</span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue">Sat</font></span></th>
</tr>
<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<td align="center" <MTCalendarIfToday>bgcolor="#ffffe0"</MTCalendarIfToday>><span class="calendar">
<MTCalendarIfEntries>
<MTEntries lastn="1"><a href="<$MTEntryLink archive_type="Daily"$>"><$MTCalendarDay$></a></MTEntries>
</MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank> </MTCalendarIfBlank>
</span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>
</div>
</div>
リスト5:カレンダー用テンプレートタグ
<div align="center" class="side">
<iframe name="cal-iframe" src="<MTBlogURL>archives/calendar/<MTDate format="%Y/%m/index">.html" width="150" height="115" scrolling="NO" frameborder="0" marginwidth="0" marginheight="0">
</iframe>
</div>
リスト6:月送りカレンダー用 iframe タグ
6.サイトの再構築
以上です。これで過去の日別アーカイブへのリンクが有効になりました。
なお iframe を使用している関係上、カレンダー下の空白については制御することはできません(6週表示で丁度良い高さになります)。
2004.10.02 追記
その月のエントリーが存在しない状態で(コメント等により)再構築されるとカレンダーが表示されない状態になります。元サイトの記事を見てもこれという策はないみたいです(なぜ普通のカレンダーが生成されてこちらが生成されないのかは?です)。これを回避する場合は、月送りカレンダー・毎月1日に表示されない不具合を改善を参照ください。
回避策は、月が変わる前に空のエントリーを一旦「公開」で登録し、その後削除しておけばカレンダーが生成されます。ただしエントリーがないため前月のカレンダーに移動すると今月に戻るリンクがなく、動作的にはやや妙な感じです。
2004.10.04 追記
カレンダーからのリンクは日別アーカイブを参照する設定にしてますので、以下のいずれかの設定を実施してください。
【パターン1】
管理メニュー左より「ウェブログの設定」をクリックし、次ページの右上で「アーカイブの設定」をクリック。次ページで「アーカイブ」というタイトルの設定欄がありますので「日別」の左のチェックボックスをつけて再構築してください。
個人的にはこちがお勧めです(趣味の問題ですが)。
【パターン2】
テンプレートのカレンダーの設定部分に
<a href="<$MTEntryLink archive_type="Daily"$>">
というのがありますので、これを
<a href="<$MTEntryPermalink$>">
に変更。こちらはカレンダーを使っているテンプレート全てを修正する必要があります。
両者の違いですが、前者は1日分のエントリーが全て表示されるページにリンクされます。後者はその日の(多分)最初の個別アーカイブのエントリーにリンクされます(その代わりコメント欄も併せて表示されます)。
2004.12.21 追記
「カレンダーの設置」の説明の中で入れ替え前のカレンダータグを明示しました。
2005.01.04 追記
項番付与変更しました。また3項の青色部分のiframeのサイズを修正(幅160→150/高さ110→115)しました。
2005.02.02 追記
タイトルを「カレンダー切り替え」から「月送りカレンダー」に変更しました。
2005.02.24 追記
カレンダーファイルの拡張子を .php から .html に変更しました(PHPスクリプトが存在しないため)。
2005.06.05 追記
1日に表示されなくなる不具合を解消する記事へのリンクを追加しました。
2005.06.08 追記
2項の説明を修正しました。また設定後の画面を追加しました。
2005.10.31 追記
3.2-ja 用の記述を追加しました。また項番の割り振りを修正しました。
2006.03.23 追記
CSSとテンプレートの内容を見直しました。
2006.03.27 追記
テンプレートの日付アーカイブリンクに target 属性指定がもれてましたので修正しました。
2006.09.10 追記
記述を全面的に見直しました。
2006.09.12 追記
table 要素に id 属性を追加しました(休日表示カスタマイズのため)。
ギターコンクール
今日(23日)は某ギターコンクールのお手伝い(扉係)に行ってきました。今回は計41名の方が参加され、午前10:30から結果発表までの19:30までという長い1日でした。
どのギターコンクールも(他の音楽コンクールも?)演奏開始前に演奏順を決める抽選を行うのですが、このコンクールでは今年から演奏順を事前に決めておくという方式になりました。最初に演奏する人等はやや不利かも知れませんが、遠方から来られる方や抽選のために午前中に集合することで後半の方が集中力を欠かないための配慮です。要するに少しでも良いコンディションで演奏して欲しいという主旨です。
これまでのような抽選による緊張感がなくなるのと、集合時間がバラバラになるので一体どうなるのかな?と思っていましたが、終演後に奏者の方に尋ねてみると概ね好評だったようです。出演者は演奏する少し前に到着しればいいので楽ですし、今までのように出番が後半の方の待ち時間による疲れもなかったみたいです。
主催者側もクジの用意をしなくて良いとか、聴きに来られたお客さんに「××さんは何番目ですか」と聞かれることもなく(出演者一覧のチラシが最初から演奏順に記されている)のでお互いにメリットは大きかったようです。
このコンクールは毎年裏方をやっておりソツなくやっていたのですが今回はミスの連発でした。以下、時系列で。
- 審査員・係りの弁当がひとつ足りなかった(私が食べ損ねたのでコンビニで調達)
- 舞台の照明を100%にするのを忘れて少し暗いまま一人演奏
- 出場者への呼び出しが間違っていたらしく舞台袖に次に演奏する人がいなかった(その次の人が待っていた)
- 昨年の優勝者の記念演奏で本人がネクタイを上手に締められず私が手伝った(笑)
- 同じく記念演奏で奏者が楽器の下に敷く布を控え室に忘れた(私が取りに行った)
- 表彰式で舞台に審査員の方が座るが椅子がひとつ足りなかった(審査員の先生が自分で椅子を担いで舞台に出た)
- 表彰式で表彰状を控え室に置きっぱなし
- 表彰式で名前がわからず舞台で本人に名前を聞いていた(おいおい…)
…今回は段取り悪すぎでした。反省。
あと会場に到着すると「審査員を交代して欲しい」と、体調不十分な審査員の方から頼まれましたが、分不相応なため丁重にお断り致しました。
サイドメニューのレイアウト変更
これまでアーカイブページ別にサイドバーのメニュー配置を変えていましたがユーザビリティを見直し、同じ配置になるよう変更しました。それに伴いトップページの「最近のコメント」、カテゴリーアーカイブ、月別アーカイブのエントリー一覧は左側に移動しました(ここだけアーカイブページ毎に切り替わるというイメージです)。
サイドメニューで他に細かい不具合があったので併せて修正。
メニューの折りたたみ状態も引き継げるようになったのでページ移動によるメニュー操作がかなり分かりやすくなったのではないかと思います(自己満足)。
コメントエラーのテンプレート
- 1カラム用(3.01D-ja)
- 3カラム用(3.01D-ja)
なお本エントリーにある3カラムテンプレートをご利用になる場合は、個別アーカイブテンプレートで使用されているメニューをサイドバーの位置に適宜挿入してください(サイドバーの殻だけ用意しています)。ちなみに1カラム用と3カラム用の違いですが、1カラム用のid属性
<div id="container">が
<div id="content">に変わることと、3カラム用の場合は
</div><!-- container -->
:
</body>の赤色の部分にサイドバーの指定
</div><!-- container -->
<div id="links-right">
(ここに右側メニューを配置)
</div>
<div id="links-left">
(ここに左側メニューを配置)
</div>
</body>が加わるだけです。これは他のテンプレートも同様ですので途中でカラムを変更される場合の参考になれば幸いです。
1カラム用(3.01D-ja)
3カラム用(3.01D-ja)
2004.10.15 追記
3カラム用の表示順序を「中央→右→左」から「中央→左→右」に変更しました。
スタイルシート引継ぎもれ
コメントプレビュー画面から投稿した後でページのスタイルが崩れる(読み込むべきスタイルシートが存在しない状態になり1カラムで縦長に表示される)ケースが発生していました。コメントプレビュー画面でスタイルシート切り替え用の設定がもれていたのが原因のようです。すいません。先程修正致しました。
大丈夫とは思いますが万が一スタイルが崩れましたら、エントリー後方にある「Stylesheet(これが3カラムで右上に表示されているメニュータイトルです)」の「+」をクリックして「Default」をクリックしたら元に戻ります。
一番慌てたのは自分です(笑)。
サーバ更改作業まとめ
今回のサーバ更改のまとめです。つまり次回の更改時のためのメモ(笑)。
| 切替前 | 新サーバ | 【インストール】 ・Apache HTTP Server ・Active Perl ・Movable Type(ファイル配置まで) ・Perl DBモジュール ・PHP ・DICE(DDNSサーバへの自動IP通知) |
| 旧サーバ | 【Movable Type】 ・テンプレートメニューよりカスタマイズしたテンプレートをコピー&ペーストでテキストファイルに保存 (個別に作成したテンプレートの出力ファイル名も忘れずに) ・ウェブログの設定→アーカイブの設定よりテンプレートのファイル名保存 ・読み込み/書き出しメニューよりエントリーの書き出し なお3.0Dでは午前・午後の情報が書き出されないことが判明(12時間表示のため投稿が全て夜中?午前中になってしまう)。一時的に作った3.01D-ja環境にDB配下を丸ごとコピーして再書き出したらうまく取得できました。 | |
| 【Movable Type 関連ファイル・ディレクトリコピー】 ・css(Large/Netscape) ・JavaScript(Styleswicther) ・MT4i(index.cgi) ・画像ファイル・ディレクトリ ・検索結果画面テンプレート(search_templates/default.tmpl) ・カレンダー複数表示プラグイン(extlib/bradchoate/calx.pm) | ||
| 切替 | 【ルータ固定IP書き換え】 ルータのWAN側のケーブルを抜き、ブラウザよりルータの旧サーバと新サーバの固定IPを書き替えて保存を試みましたが予想通り設定が反映されずNG。書き換え後リブートや電源再投入してもNG。その後、IP書き替え後にWAN接続して電源再投入したところ一発OK! (本来はバーチャルサーバの設定でIPの割り当てを変えれば良いのですがこちらも購入時の設定でかなり苦労したので作業的にはボツ←一応やってみましたがNGでした)。 | |
| 【切り替え中表示】 新サーバのBlogURLにindex.htmlを作成し「サーバ切り替え中」の情報配信 | ||
| 切替後 | 新サーバ | 【Movable Type】 ・mt-ckech.cgi/mt-load.cgi実施 ・プロフィール変更 ・基本設定変更 ・アーカイブファイルを設定 ・旧サーバから読み出したエントリーをインポート ・デフォルトテンプレートで再構築 index.htmlは工事中ファイルを上書きしないようにindex2.html等に変更 ・テンプレートを順次カスタマイズしたものに入れ替えて再構築 |
| 【MT4i】 mt.cfgのDBパスを絶対パスに修正(blog_IDはそのまま) | ||
| 【DICE】 旧サーバの設定をそのまま書き写す | ||
携帯からの投稿で不具合?
土曜日に下書きのエントリーを携帯から投稿しましたが文章の後半が欠落してしまい、本日まで中途半端なエントリーが放置状態になってしまい大変失礼致しました。欠落した文章を思い出しながら修正し、残りの溜まっていたエントリーをPCから改めて投稿しました。
MT4iの方は再度動作確認をしてからTonkeyさんに相談してみたいと思います。
2004/09/22 追記
既知の不具合でした(送信512バイトまで)。失礼致しました。m(__)m
Trackback元記事表示
変更してからかなり日が経ってますが表題のカスタマイズを実施しました。これまでの状態でも不便は感じてなかったのですがTrackback元が分からないTrackbackを頂いたので導入することにしました。Blog開始当初はTrackbackなんて無縁でしたし、あるはずもないと思ってましたが人生何が起こるか分からないものです。
リンクされている方で使われている方が結構多いので「こちらから参照しました」の掲載は割愛させて頂きました。すいません。
オリジナルの記事は下記です。
上記のエントリーより「MTPingedEntry」をダウンロードして解凍、mt-pingedentry.pl を plugins ディレクトリに配置し、テンプレートのTrackback部分の設定を変更するだけです。
レイアウトは元記事と変えてみました。そのままでも良かったのですがTrackbackを視覚的に表現できないかなという試みです。何かいいレイアウトが思いついたらまた変更します。
MTEntryLinkとMTEntryPermalinkについて
最近のコメントのアンカー修正で気になったのが、リンク先を表すタグ「MTEntryLink と MTEntryPermalink の違いって何だ?」ってことです(おいおい…)。先のエントリーに MTEntryPermalink は使っていないのですが、他サイトのコメントのリンクで MTEntryPermalink を使っているケースがあるのを見つけたからです。
ということで以下調査メモです。
いずれのタグもエントリーを含むアーカイブページへの絶対URLを示します。そしてこのリンク先のアーカイブ種別によって機能が異なるようです。
リンク先が個別アーカイブ、つまりアーカイブページとエントリーが1:1の場合は機能的に同じですが、例えばカテゴリーアーカイブ等のように一つのページに他のエントリーと一緒にそのエントリーが入っていた場合、MTEntryPermalink を用いれば特定のエントリーを指すためのアンカー (#) が自動的に付与されるようです。MTEntryLink にはアンカーを付与する機能はありません。
なお試しに MTEntryPermalink を用いてコメントのリンクを作ってみたところ、個別アーカイブを指している場合はアンカーは付与されませんでした。
リンクがどのアーカイブを指しているかを示すかは、管理メニューの「ウェブログの設定」→「ウェブログの設定」→ページ真ん中辺りの「アーカイブの設定」の最初にある「優先するアーカイブのタイプ 」で決定されます。デフォルトの設定は「個別」なので設定を変更しなければ個別アーカイブにリンクされるという仕組みです。
設定とは別にアーカイブファイルを変更したい場合はタグに archive_type 属性を付与します。例えばカテゴリーアーカイブにリンクしたい場合は、
<$MTEntryLink archive_type="Category"$>
と記述すればOKです。
MTタグについてはMovable Typeユーザー・マニュアル:テンプレート・タグに掲載されています。
2005.08.09 追記
本文にユーザー・マニュアルのリンクを追加しました。
BlogPeopleとMyBlogListの動作比較
…というのが目的ではなかったのですが下記の作業を行っているうちに気になったのでメモ。
リンクさせて頂いているサイトが更新された場合、(私の設定では)自動的にリストの上位に移動(そのリンクにマウスをのせると詳細情報がポップアップ表示)するのですが、BlogPeopleのリンクリストで更新対象にならないサイトがいくつかあります。それでそれらのサイトをMyBlogListのリンクリストへ移動してみることにしました。BlogPeopleで更新情報を取得できないサイトもMyBlogListでは取得できる(らしい)というのが理由です。
試しに、いずれのサービスにもユーザ登録していない自分の試験用サイトのURLを自分のリンクリストに追加してみたところMyBlogListでは更新情報が取得でき、BlogPeopleでは取得できませんでした。
そもそもこういったサービスの仕組み自体よく理解していないので(爆)ちょっと調べてみました。
BlogPeopleの場合はそこに登録されたサイトか、Weblogs.comやping.bloggers.jpに送信された更新Pingを収集して更新を検知しているようです(BlogPeopleのサポートより)。つまりこのサイトに更新Pingが送信されていれば更新情報が取得できるようです。
MyBlogListはそのような情報が載ってませんでした(見落としていたらすいません)が、追記を参照ください。なお不正なURLを入力するとリンクの追加が拒否されたので少なくとも正しいURLであることが条件のようです(BlogPeopleでは登録できました)。
ただしリンク追加時のみRSSリーダで情報を取得しているのか周期的に取得しているのか不明なので、サイトが更新されてもリンクに反映されないかも知れません。
2004.10.14 追記
MyBlogListは下記のURLにpingを送信する必要があります。
- http://ping.myblog.jp
ping送信の設定方法は、管理メニューの「ウェブログの設定」→次ページ右上の「ウェブログの設定」→次ページ真中辺りの「広報 / リモートインターフェイス / トラックバック」の「他のサイト」のテキストエリアに上記URLを設定します。
また上記URLはMyBlogListのトップ画面から次の手順でみつかります。
- 右上の「Myblog」のバナーをクリック
- 次の画面で「blogを楽しもう」の「更新通知(Ping)を送ろう」をクリック
- 次の画面のping送信フォームの「ping送信先URL」がそうです。
MyBlogListのメニューからの掲載はありませんでした。私は「MyBlogList」を検索キーに辿って使い始めたのですが、ちょっと分かりにくいというのが正直な感想です。
Movable Type 3.11 を使ってみる
Movable Type 3.11(英語版)をダウンロードして試しに動かしてみました。Movable Type 3.1の主な新機能には、
- テンプレートごとに管理可能なダイナミックPHPページ生成
- 予約投稿
- サブカテゴリー
- アプリケーション・レベルのコールバック
があります。この中から、「サブカテゴリー」と「テンプレートごとに管理可能なダイナミックPHPページ生成」「予約投稿」についての感想(といっても画面上でちょこっと触ってみた程度)をメモします。
日本語版もそのうちリリースされると思いますので、後の楽しみにとっておきたいという方は「続き」を開かない方がいいかも知れません(冗談です)。
「最近のコメント」のアンカー修正
hateさんよりコメント欄でご質問頂いていた件で、サイドバーメニューの「最近のエントリー」に表示されるコメント投稿者のリンク(#指定)が期待する動作になっておりませんでした(投稿者名をクリックするとエントリーの投稿者コメント位置にジャンプせずにエントリーのトップにジャンプしてしまう)。申し訳ございません。m(__)m
その関係で関連テンプレートを修正致しました。
既にテンプレートご利用の方は恐れ入りますが適宜修正くださいますようお願い申し上げます。
Main Indexテンプレート等のサイドメニューの「最近のコメント」
└ <a href="<$MTEntryLink$>#<MTEntryID pad="1"$>">
の赤字部分を青字部分に変更。
└ <a href="<$MTEntryLink$>#<$MTCommentID$>">
個別アーカイブテンプレートのMTCommentsタグのすぐ下に青字部分
<MTComments>
<a name="<$MTCommentID$>"></a>
を追加。
以上です。
ご迷惑おかけして申し訳ございませんがよろしくお願い致します。
Movable Type の編集画面をひろげる
ディスプレイの解像度やブラウザ、フォントの設定等に依存する話かも知れませんが、以前よりテンプレート編集画面のテキストエリアが狭く感じてまして(IE使ってます)、ふと思い出して広げてみました。ついでにエントリー投稿画面の方もひろげました。
3.0Dから3.01D-jaに移行した時、特にテンプレート編集画面のテキストエリアは狭く感じました。実は3.0Dのテキストエリアは3.01D-jaのそれより横に広かったんです。といっても文字コードの関係で広く見えただけで1行の表示文字数は同じなんですが、精神衛生上はそちらの方が良かった感じがします。
以下、手順メモです。
まずテンプレート編集画面ですが、テキストエリアサイズ変更で編集するファイルは mt.cgi を配置したディレクトリから辿って、
- /tmpl/cms/edit_template.tmpl
です。変更行は86行目128行目のrows属性およびcols属性(赤字部分)です。
<p>・・・<textarea name="text" id="text" rows="20" cols="72">・・・</p>
とりあえず縦40・横120に広げました。横はその値を超えると表示が崩れるみたいです。折り返しが減り、表示される情報量も増えたのでかなりスッキリしました。
次にエントリー投稿画面です。編集するファイルは
- /tmpl/cms/edit_entry.tmpl
です。変更行は182行目200行目のrows属性(赤字部分)です。
<textarea class="full-width" ・・・ rows="<TMPL_IF NAME=DISP_PREFS_SHOW_EXTENDED>10<TMPL_ELSE>20</TMPL_IF>"> ・・・
追記(extend)をひろげる場合は同ファイルの231行目のrows属性(赤字部分)を変更します。
<textarea class="full-width" name="text_more" id="text_more" tabindex="4" rows="15"><TMPL_VAR NAME=TEXT_MORE ESCAPE=HTML></textarea>
ちなみに横幅はmt.cgiと同じディレクトリにある管理画面用スタイルシート styles.css の
#edit-entry textarea.full-width {
width: 577px;
}
で制御されているようです。エントリー編集画面の横幅は特に不便に感じていないのと、スタイルシート修正による影響範囲が不明なので変更していません。横幅を変更する場合は、「Movable Type の編集画面を横にひろげる」を参照ください。
2005.05.04 追記
追記部分の変更方法を追加しました。また3.1x用に行番号を修正しました。
2005.08.11 追記
横幅を広げる記事へのリンクを追加しました。また本文を一部修正しました。
「続き」を折りたたむスクリプト
使っていただけたようで感謝です(自分で0から作れないのが情けないですが)。
#このエントリーはビボウロクさん:リフォームでお世話になったブログサイトのトラックバック返しということで。
サイドメニュー折りたたみ状態保持スクリプト
2004.12.06 追記
サイドメニュー折りたたみのエントリーを書き直しましたので
を参照ください。
このblogではサイドバーメニューの折りたたみ機能を利用させて頂いてますが、折りたたみ状態を変更した後で他のページに移動して戻ってきたり、新たにブラウザを起動するとblog管理者(つまり私)が予め設定しているデフォルトの折りたたみ状態に戻ってしまいます。このようにせっかくカスタマイズした折りたたみ状態が一瞬にして水の泡となってしまうのは何となく不便に感じていました。
そういう訳で折りたたみ状態を保持できるようにスクリプトを改造してみました。これにより折りたたみ状態をカスタマイズした訪問者はページを移動しても、別の日にブラウザを起動した時でも、常に直前に行った折りたたみ状態でblogを閲覧することができます。つまりblog管理者が設定したデフォルトの折りたたみ状態に縛られる必要がなくなる訳です。
具体的にどのような動作になるかは、このサイトでメニューの折りたたみ状態を変更して更新ボタンをクリックするか、他のページへ移動して戻ってきてみられるとお分かり頂けると思います(動作の都合上一瞬デフォルト状態になります)。
この機能を有効にするためにはブラウザのcookieが有効になっていること、折りたたみスクリプトは当方が利用させて頂いているJUGEMカスタマイズ講座:ナビゲーションの折り畳みを使われていることが前提です。
2004.09.20追記
この機能はcookieを利用しています。id属性名("?name"や"?list"を除いた文字列)がそのままcookie名となりますので他のcookie名と重複しないようなユニークな名称を使用してください。重複している場合、cookieを用いたスクリプトの動作に不具合が生じる場合があります。
またプレビュー画面では正常に動作していません(原因未確認です)。
動作確認済ブラウザはIE6.0およびNC7.1です。
2004.09.24追記
下記のサイトで公開中の折りたたみ用スクリプトに状態保持機能を採用くださいました。ありがとうございます。
以下、スクリプトの修正方法です。
1.cookie取得・設定用スクリプトの追加
メニュー毎の折りたたみ状態をcookieに保持およびcookieから読み出すスクリプトを<head>~</head>の間に追加します。ちなみにこのスクリプトはスタイルシート切り替えのstyleswitcher.jsのcookie用関数の一部を流用しておりますので、そちらを既に使われている方はこの項目をスキップしてください。
注:styleswitcher.jsを利用する場合、状態を保持したいテンプレートに全て指定されている必要があります。
<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
</script>
2.折りたたみ用スクリプトにcookie保持・読み出しスクリプト追加
折りたたみ用スクリプトを設定している各テンプレート(注:サイドバーメニューの折りたたみからの修正であればmenufolder.js)に下記の青色部分を追加します。
function FoldNavigation(idName,initMode,viewNum) {
:
if (!dispMode) {
var cookie_initMode = readCookie(idName);
if(cookie_initMode){
initMode = cookie_initMode;
}
createCookie(idName, initMode, 365);
var tmpText = Array('FoldNavigation(',"'",idName,"','chng','');return(false);").join('');
:
} else if (initMode == 'chng') {
:
objLists.style.display = (dispMode == 'none') ? 'block' : 'none';
if (dispMode == 'none') {
createCookie(idName, 'on', 365);
} else {
createCookie(idName, 'off', 365);
}
}
}
InitFoldNavi();
以上です。
メニューの折りたたみ状態をページ毎に制御したい場合(例えばメインページでたたんでいる「月別アーカイブ一覧」を月別アーカイブのページでは開いた状態にしたい等)は、id属性の名称をそれぞれ異なる名称で設定すればOKです。同じid属性名にしておけばページが変わっても同じ折りたたみ状態が引き継がれます。
2006.04.04 追記
リストから language 属性を削除しました(HTML4.01/XHTMLで非推奨あるいは廃止されているため)。
検索画面テンプレート
対象のファイルはmt.cgiが配置してあるところに"search_templates"というディレクトリがあり、その中の"default.tmpl"というファイルです。当サイトのテンプレートご利用の方はファイルの内容を下記のものと丸ごと入れ替えて頂ければOKです。
このテンプレートはMovable Typeの管理画面からは編集できませんので、一般のファイルと同様の方法で編集してください。直接編集できるのであればファイルの内容を書き換えればOKです。レンタルサーバであればサーバに配置されている default.tmpl を一旦ご自身のPCにダウンロードし、エディタ(メモ帳でもOK)編集後サーバにアップロードしてください。
念のため編集に際しては文字コードにご注意ください(mt.cfgで設定されている文字コードで保存してください)。
default.tmpl
なお、デフォルトの設定では検索結果文章の最後に"[Edit]"という編集用のリンクが追加されますので、表示したくない場合は、liib/MT/App/Search.pmの539行目
q([<a href="%s%s?__mode=view&_type=entry&id=%d&blog_id=%d">Edit</a>]),を、例えば青色のように、
q(<!--[<a href="%s%s?__mode=view&_type=entry&id=%d&blog_id=%d">Edit</a>]-->),コメントアウトしておけばOKです。
2004.10.11 追記
検索結果NG時および、検索文字列が設定されていない場合の結果画面の設定がもれていましたので追加しました。
2004.10.19 追記
編集方法の記述を追加しました。
サーバ更改
大変お待たせ致しました。10日午後20時頃よりサーバを停止しておりましたが、自宅サーバをCerelon・633MHzからPen4・2.8GHzマシンに無事更改致しました。11日午前1時より運用を再開致します。しばらく接続できない状態が続きましたこと、お詫び申し上げます。
これでコメントの登録待ち時間はかなり短くなりました(サクッと感まではいきませんがテストコメントでは20秒ほどで完了)。エントリーの」登録待ち時間も半分くらいになりました。待ち時間でblogに携わるかなり多くの時間を費やしていましたのでこれで少し生活が改善されることを期待しています。
更改時の顛末記は別途筆をとりたいと思います。
MyBlogList追加
これまでのリンクは全てBlogPeople上に登録していたのですが、何サイトかMyBlogListで登録下さっている方もいらっしゃるのでMyBlogListにも登録してメニューを追加、BlogPeopleと分割しました。
重複しているサイトもありますがとりあえずそのまま(自分でどちらを削除すれば良いか決められないので…)。またどちらにも属していないサイトは引き続きBlogPeople上で。
コメントプレビューのテンプレート
- 1カラム用(?3.0D/3.01D-ja)
- 3カラム用(?3.0D/3.01D-ja)
なお本エントリーにある3カラムテンプレートをご利用になる場合は、個別アーカイブテンプレートで使用されているメニューをサイドバーの位置に適宜挿入してください(サイドバーの殻だけ用意しています)。ちなみに1カラム用と3カラム用の違いですが、1カラム用のid属性
<div id="container">が
<div id="content">に変わることと、3カラム用の場合は
</div><!-- container -->
:
</body>の赤色の部分にサイドバーの指定
</div><!-- container -->
<div id="links-right">
(ここに右側メニューを配置)
</div>
<div id="links-left">
(ここに左側メニューを配置)
</div>
</body>が加わるだけです。これは他のテンプレートも同様ですので途中でカラムを変更される場合の参考になれば幸いです。
1カラム用(?3.0D)
1カラム用(3.01D-ja)
3カラム用(?3.0D)
3カラム用(3.01D-ja)
2004.10.15 追記
3カラム用の表示順序を「中央→右→左」から「中央→左→右」に変更しました。
楽器店二題
その1:YAMAHA某店の楽譜売り場で。
この店の楽譜売り場のカウンターにはレジが3つあります。で、買いたい楽譜を手にとって空いているレジのところへ行き、係のお姉さんに楽譜を渡したのですが、お姉さんがいきなり「あれ?」と言って何かを探すような仕草をして、前に対応したお客さんのところへ走っていってしまいました。
その後、そのお客さんと何か話し込んでいる様子で、レジに戻ってくる気配がありません。結局待っているうちに隣のレジが空いたのでレジに預けた楽譜を再び手にとって隣に移りましたが、
- 「恐れ入りますが隣のレジに移ってください」
とか一言告げてからその場を離れてください、って感じです。
その2:山野楽器某店のCD売り場で。
CDを物色しているとカウンターから電話応対している女性店員さんの声が聞こえてきました。その会話の中で店員さんが「はい、四重奏曲ですね」と言うところ、
自宅サーバ再構築(その2)
本日の作業進捗です。
- PHP5.0.0のインストール
これだけです。自分で書いた内容が間違っていて(PHP関連のモジュールをC:WINDOWS/system32配下に配置しなければならないところを「C:WINDOWS配下に配置」と書いてしまってた…)、Apacheが再起動しなくなりてこずってしまいました。
Apacheと連携させて動作確認までOK。
自宅サーバ再構築(その1)
最近、エントリー投稿やコメント登録、再構築の処理が顕著に重くなってきたのでサーバをCeleron・633MHzから今年初めに購入したPen4・2.8GHzに切り替えることにしました。Celeronを使用していたのは電気代節約のためでWeb閲覧程度なら問題なく動作。blog開始当初もそれなりに動いていたのですが、エントリー数が増えた現状でCGIを走らせると性能の低さが如実に現れてきました。
例えばエントリー登録など3分ほど待たないと表示が元に戻らないという状態で、文章の細かな修正をする度に固まったような画面を眺めながら次の作業をじっと待たなければならず、睡眠時間減少の一因です。精神衛生上もよろしくありません。あ、これはコメント書き込んでくださる方も同様ですね。すいません…。
電気代については運用後計測してどうするか(例えばPentium Mマシン等の導入)検討したいと思います。
ということでまた1から出直しです。現在のサーバ構築で何の作業をやったのか、かなり忘却の彼方です。昨日はとりあえず備忘録(blogとも言う)を見ながら、
- Apache HTTP Server 2.0.50 + コンフィグ設定
- Active Perl 5.6.1
- Perl DBモジュール
- Movable Type 3.01D-ja
のインストールをそれぞれ行いました。localhostからのCGI動作確認までOK。Apacheは2.0.47から最新の2.0.50に。httpd.confの内容は概ね同じでした。
この後、外部からのアクセスを旧マシンから新マシンへ変更しなければならないのですが、一番の問題はそのためのプロ?ドバンドルータの設定がきちんとできるかどうかです。というのは、ルータにCorega BAR Pro3を使ってまして、これがIPアドレスやバーチャルサーバ等の設定を手順通りに行ってもサクッと反映されない(再起動や電源抜き差しを繰り返すと偶然反映される)というかなり厄介ものです。ルータを購入してから現在の設定を完成させるまでに、通常ならものの数分で終わる作業が都合3日くらいかかりました。あと1日要していたら別の機種と取り替えていたでしょう。
という訳で切り替え期間中は突然サーバ停止状態となりますのでご理解の程よろしくお願い致します。
スタイルシート切り替え
メイン各ページのスタイルシートを右上のリンクで切り替えられるようにしました。スタイルシートを切り替えるとページ全体のデザインをダイナミックに変更できます。ここでの目的はフォントサイズを変更できるようにするために用いています。とりあえず「Default」「Large」「Netscape」の3種類を用意しました。「Default」は現在のスタイル。「Large」は本文のフォントを大きくします。「Netscape」はNetscape利用者用にサイドバーのフォントを1px大きくしたものです。
注:現在は異なる設定にしています。
この機能はGoing My Wayさんのスタイルシート切り替えスクリプトを参考にカスタマイズしました(こちらのサイト右上のカラーボタンをクリックするとスタイルシートが切り替わります)。オリジナルはStyleswitching JavaScriptです。cookieを利用しているのでブラウザでcookieが利用できる設定になっていれば、最後に利用したスタイルシートが次回ブラウザ起動時に自動的に選択されるようになります。また各テンプレートに設定しておけば状態が引き継がれます。例えば個別アーカイブがマルチカラムでない場合は後述する手順の2・4だけを行えばうまく引き継ぐことができます。
以下、スタイルシート切り替えの手順です。
1.新しいスタイルシートの作成
元のスタイルシートをコピー等して新しいスタイルシートを作成します。ちなみに私の場合はMovable Typeの管理画面上で新しいスタイルシートを作るという作業はしていません。単なるコピーです。ここではStyles-site.cssをコピーしてLarge.cssと、Netscape.cssを作りました(名称は任意で結構です)。
作成したスタイルシートはStyles-site.cssと同じディレクトリに配置します。
まず Large.css 用のテンプレートを作ります。管理画面のテンプレートの「インデックステンプレート」右上にある「新しいテンプレートを作る」をクリックします。次のページで下記を設定します。
- テンプレートの名前:スタイル(Large)
- 出力ファイル名:Large.css
- このテンプレートにリンクするファイル:空白のまま
- 再構築オプション:チェックを外す
テンプレートの中身はスタイルシート(styles-site.css)の内容を丸ごとコピーします。
コピーしたスタイルシートの内容を修正します。Large.css はフォントを大きくするためのものなので、font-size と書かれた部分を大き目のフォントサイズ(赤字から青字)、
.blogbody {
font-size: 12px;
font-size: 14px;
}
に書き換えます。もちろんフォント以外のスタイルも自由に変更して構いません。
修正が終わったら、保存・再構築します。
Netscape.css についても「新しいテンプレートを作る」をクリックし、
- テンプレートの名前:スタイル(Netscape)
- 出力ファイル名:Netscape.css
- このテンプレートにリンクするファイル:空白のまま
- 再構築オプション:チェックを外す
という設定にして、後は Large.css と同じ作業を繰り返してください。
2.テンプレート修正
テンプレート上部にある既存のスタイルシートの設定を、赤色から青色に変更します。
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Large.css" type="text/css" title="Large" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Netscape.css" type="text/css" title="Netscape" />
一番上に書かれたスタイル
<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" title="Default" />
が起動時にデフォルトとして選択されるものです。その下に2つの新しいスタイルシート
<link rel="alternate stylesheet" href="<$MTBlogURL$>Large.css" type="text/css" title="Large" />
<link rel="alternate stylesheet" href="<$MTBlogURL$>Netscape.css" type="text/css" title="Netscape" />
をそれぞれ追加しており、以降で説明する切り替え用リンクをクリックすることでこれらのスタイルが選択されます。設定したタグの href 属性に、作成したスタイルシートのファイル名、title 属性に任意の名称を設定します。これが次項のスクリプトで起動される際のキー情報となります。
3.styleswitcher.js のダウンロード・アップロード
下記の公式サイトに styleswitcher.js があります。
記事の下の方に「download」または「Download styleswitcher.js」というリンクがありますので、クリックして styleswitcher.js をダウンロードしてください。そしてダウンロードした styleswitcher.js をそのままローカル・サイト・パス(index.html と同じディレクトリ)にアップロードします。
4.テンプレートに styleswitcher.js インクルードの設定
2項で修正した各テンプレートの <head>~</head> の間に下記を追加します。既にJavaScriptが存在すればそこに埋め込んでも構いません。この行だけ丸々独立させて埋め込んでも大丈夫です。
<script type="text/javascript" src="<$MTBlogURL$>styleswitcher.js"></script>
5.切り替えメニューの追加
各テンプレートのサイドバーに以下のタグを追加します。なおデザイン自体を変更するような使用方法であればタイトルバナー部分に切り替えメニューを設定しているサイトが多いようです。
<div class="sidetitle">
Stylesheet
</div>
<div class="side">
<a href="#" onclick="setActiveStyleSheet('Default'); return false;">Default</a><br />
<a href="#" onclick="setActiveStyleSheet('Large'); return false;">Large</a><br />
<a href="#" onclick="setActiveStyleSheet('Netscape'); return false;">Netscape</a>
</div>
"setActiveStyleSheet" の後ろにあるパラメータは、先に指定した title 属性の名称(Large や Netscape等)と一致するように設定します。
以上です。
6.FAQ
Q:スタイルが反映されませんが?
A:古いデータがキャッシュに残って変更が反映されない場合があるようですのでIEであれば更新ボタンをクリックするか、一時ファイルを削除してください。
Q:表示が崩れました。
A:全てのテンプレートに同じ設定がされていないとページを移動した瞬間やスタイルを切り替えた瞬間に表示が崩れる可能性があります。もし表示が崩れてしまったら、元のスタイルのリンクをクリックするか、きちんと表示できていたページに戻って、スタイルを切り替えれば元に戻ります。
2005.08.12
スタイルシートの作成方法について修正しました(テンプレート)として保存する方法に変更)。また他の内容についても全面的に見直しました。
リンクのアンダーライン一部削除
なんとなく表示が煩わしい感じがすると思ったらリンクのアンダーラインが全部出っ放しでした(早く気がつけって?)。で全部消したらすごい違和感があったので(笑)、
- 本文
- 投稿者欄
- カレンダー
のアンダーラインだけ消してみました。言い換えるとサイドバーの各メニューだけアンダーラインを残してます。
ちなみにアンダーライン有無の指定はstyles-site.cssの各aタグ指定の
text-decoration: underline;
という部分を
text-decoration: none;
に変更すればOKです。
アンダーラインだけに、
ギターフェスティバル
本日は某ギターフェスティバルに参加します。
このフェスティバルでは個人的にひとつ大変なことがあります。演奏や運営に関してではありません。
実は昨年からこのフェスティバルのプログラムデザイン?印刷(コピー)を引き受けています。それ自体は趣味の範疇なのでまあいいのですが、プログラム枚数は300部。しかも裏が透けないように通常の紙よりやや厚めのもの(通常のコピー用紙は64g/?のところ倍の128g/?)を使ってます。しかもA3。
つまりこの紙のかたまりを楽器や衣装と一緒に演奏会場まで運ばなければならず、昨年はかなり重い思い(←ダジャレ)をしました。引き受ける時にその大変さまで予想できなかったのが敗因です。
今年も運びます。_| ̄|○
JR東日本のゴミ箱
![]() | 中身が見えるように側面が透明になっているゴミ箱が最寄駅に設置されていました。このごみ箱、私は初めてお目にかかりましたが他駅では以前から導入されているのでしょうか。 透明になっているのはテロ対策でしょうね。どちらかといえば雑誌を拾う人達にとって便利になったような気がします(笑)。 |
Trackbackの不具合・その後
直りました(というかいわゆるIllegal Operation Error _| ̄|○)。
お騒がせして申し訳ありません。
ですがコメント登録に時間がかかる等の性能問題は相変わらずです。再構築に時間がかかる話を以前書いたのですがアクセス状況が以前と大幅に変わってきているのでどうやらCeleron・633MHzのマシンでは限界のようです。こちらについてはPCの交換を検討中ですがサーバ構築に時間がかかりそうなのでしばらくお待ち頂きたいと思います。
Trackbackの不具合
ここ数日に書いたエントリーで参照させて頂いているサイトの該当記事にTrackbackを送信しているのですが、相手方のサイトにTrackbackが反映されないという事象にでくわしています。
ということでただいま調査中です。ちなみに現在の状況ですが、
- エントリー登録時にTrackbackエラーは出ていません
- 送受信ともNGの模様(他blogからのTrackbackが反映されません)
- 作成日時を変えるとTrackbackしないという記事があったので試しましが×
- 同一エントリーからリトライしても×
という状況です。性能的に無理が生じてきたのでしょうか…。
エントリー投稿画面へのリンク追加
Magic Whiteさんの編集修正楽にするでご連絡いただいていた方法でエントリーの投稿画面へのリンクを個別アーカイブ右下に「Edit」で追加しました。
これは自分の投稿したエントリーを読んでいる最中に編集したくなった時、このリンクをクリックしたらすぐに編集画面にジャンプできるというものです(PC上でMovable Typeのログイン・パスワードのcookieが残っていれば編集画面へ、残っていなければログイン画面にジャンプします)。
便利よさそうです。ありがとうございました。
2004.11.01 追記
ソースを追加しました。個別アーカイブテンプレートの場合、下記の部分に青色のタグを追加すればOKです。
<div class="posted">Posted by <$MTEntryAuthor$> at <$MTEntryDate$>
| <a href="<$MTCGIPath$>mt.cgi?__mode=view&_type=entry&id=<$MTEntryID$>&blog_id=<$MTBlogID$>">Edit</a>
</div><!-- posted -->
あと細かいですが、<$MTEntryDate$> の後ろに半角スペースを入れてやってください。
コメントスパム対策(その4)
我楽さんのコメント投稿で500エラーが出るけど、投稿反映される件について。でアドバイス頂いた通り、mt-comments.cgiのファイル名変更してみました。これで様子をみてみたいと思います。ありがとうございました。

カレンダーを月送りタイプに変更するカスタマイズです。このカスタマイズを行うことでスクリーンショットのように年月の横に前月(および次月)のカレンダーへのリンクが表示されます。








