TopMovable Typeテンプレート > 2004年10月
2004年10月27日

Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ可変)

October 27,2004 12:31 AM
Tag:[]
Permalink

3カラム テンプレート(サイズ可変)サンプル最新バージョン対応のテンプレートについてはテンプレートのページをご覧ください。
Movable Type 3.0x/3.1x用の3カラムテンプレートで、中央カラムのサイズ可変です(サイズ固定は別エントリーにあります)。日本語版での動作確認バージョンは、3.01D-ja/3.11-ja/3.121-ja/3.122-ja/3.15-ja/3.151-ja/3.17-ja/3.171-jaです。
画像の通り本サイトのデザインと同じです(タイトルバナー色およびタイトル色が違います)。画像をクリックすると原寸大の画面がポップアップします。

サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています(カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため)。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。
TypeKeyサイン・イン時の表示が変わらない問題については対処を盛り込んでいます。

テンプレートご利用時、下記に示すスタイルシート1行目の文字コード(青色部分)をウェブログの文字コード(mt.cfgのPublishCharsetに指定された文字コード)に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。

@charset "utf-8"; /* 文字コード */

カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後(前でもいいです)に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。

カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。まず幅の指定に関係するのは下記スタイルシート(抜粋)の赤字で示した部分です。

/* エントリーのある大段落(トップページ) */
#content {
    border-bottom: 1px solid #666699;
    border-left: 1px solid #666699;
    border-right: 1px solid #666699;
    margin-right : 185px ;
    margin-left : 185px ;
    margin-top : 0px ;
    margin-bottom : 10px ;
}
 
/* カレンダーのある大段落(トップページ右) */
#links-right{
    position: relative; z-index: 2;
    color: #ffffff;
    position : absolute ;
    right : 15px ;
    top : 95px ;
    width : 155px ;
}
 
/* リンクのある大段落(トップページ左) */
#links-left{
    position: relative; z-index: 2;
    color: #ffffff;
    position : absolute ;
    left :15px ;
    top : 95px ;
    width : 155px ;
}

#content の"185"はブラウザの両端から中央カラムまでのマージン(線のあるところまで)を示しています(この間に左右のカラムが挿入されます)。
#links-right および #links-left の"155"は左または右カラムのそれぞれのテキストエリア幅、"15"はブラウザの端から左または右カラムのテキストまでのマージンです。
つまり左右カラムのレイアウトについては下記の計算が成り立つように指定しています。

155 + (15*2) = 185

15を2倍しているのは、中央カラムの両端から左右カラムのテキストまでのマージンを足しています。

次に具体的な修正例を示します。左右カラムのテキスト幅を例えばあと10増やしたい(155→165)場合は先の計算式に当てはめると、

165 + (15*2) = 195

となりますので、

#content の margin-right :195
#content の margin-left :195
#links-right の width : 165
#links-left の width : 165

と変更してください。

また #links-right と #links-left の

top : 95px ;

の値はブラウザの上端からメニュータイトルまでのマージンです。この値は管理メニュー→「ウェブログの設定」→「設定」の「ウェブログ説明」がタイトルバナー下に表示されることを想定して設定しています。「ウェブログ説明」が設定されていない場合はメニュー表示開始位置が中央カラムより若干低くなってしまいますので、この値を少なくして左右カラムのメニュータイトル開始位置を上げることをお勧めします。

コメント・トラックバックをポップアップ画面に変更したい場合は、下記のエントリーを参照して修正してください。

ポップアップ画面を用いたコメント投稿(その3:公開テンプレート修正方法)

ポップアップしない場合は「ポップアップ用」と書かれているテンプレートは不要です。

不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています(ダイナミックページ動作環境が構築できておりません)。ダイナミックページに関する問題については他のサイトにてご確認ください。

本テンプレート公開にあたって参考にさせて頂いたエントリーおよび関連エントリーを挙げておきます。ありがとうございました。

不具合等が発生した場合、記述内容を適宜追記していく予定です。

なおこちらのページへ直接訪問された方は、ご利用の前にテンプレートのページをご覧くださいますよう、お願い申し上げます。

スタイルシート

メインページ

カテゴリー・アーカイブ

日付アーカイブ

個別エントリーアーカイブ(1カラム:3.17-ja以降)
3.17-ja より Typekey 関連のタグが変更になっています。
変更箇所の詳細は「Movable Type 3.17-ja 個別エントリーアーカイブの変更点について」をご覧ください。

個別エントリーアーカイブ(1カラム:3.151-ja以前)

個別エントリーアーカイブ(3カラム:3.17-ja以降)
3.17-ja より Typekey 関連のタグが変更になっています。

個別エントリーアーカイブ(3カラム:3.151-ja以前)

コメント・プレビュー(1カラム)

コメント・プレビュー(3カラム)

コメント・エラー(1カラム)

コメント・エラー(3カラム)

コメント・保留

コメント・リスト(ポップアップ用)

コメント・プレビュー(ポップアップ用)

コメント・エラー(ポップアップ用)

コメント・保留(ポップアップ用)

トラックバック・リスト(ポップアップ用)

Remember Me

検索画面(default.tmpl)

検索画面テンプレートは、mt.cgi が配置してあるところに"search_templates"というディレクトリがあり、その中の"default.tmpl"というファイルです。このテンプレートはMovable Typeの管理画面から編集できませんので、普通のファイルと同様の方法で編集・保存・配置(レンタルサーバご利用の場合はFTPによるアップロード)してください。なお mt.cfg で設定されている文字コードで保存してください。

2004.10.29 追記
カテゴリー・アーカイブ、日付アーカイブのエントリータイトルに「●」が抜けていたので追加しました。

2004.11.09 追記
スタイルシートの文字コード設定について追記しました。

2004.11.10 追記
RSSリーダーで「このページのスクリプトでエラーが発生しました」というエラーや、ブラウザで「実行しましたが、ページでエラーが発生しました」というエラーが発生する場合は、Temporary Internet Files内にあるウェブログ関連のCookieを一旦削除してみてください。

2004.11.24 追記
スタイルシートのサブカテゴリー属性指定がsideクラス指定の内容と重複していたので削除しました。

2004.12.17 追記
検索画面のテンプレートを追加しました。

2004.12.30 追記
ポップアップ用画面のテンプレート(コメント・リスト/コメント・プレビュー/コメント・エラー/コメント・保留/トラックバック・リスト)を追加しました。それに伴いスタイルシート/メイン・ページ/カテゴリー・アーカイブ/日付アーカイブを修正しました。

2005.01.14 追記
個別エントリーアーカイブのコメント・トラックバックのアンカーを修正しました。また個別エントリーアーカイブ(3カラム用)/コメント・プレビュー(3カラム用)/コメント・エラー(3カラム用)のサイドメニューにあるコメント投稿者の href 属性を、誤りを含めて修正しました。

2005.02.02 追記
タイトルを「Movable Type 3.11-ja/3.121-ja 3カラム テンプレート(サイズ可変)」から「Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ可変)」に変更しました。また動作確認バージョンを文中に追加しました。

2005.02.14 追記
テンプレートのページを新たに設け、本文からのリンクを設定しました。

2005.03.13 追記
サイドメニューの"Search this site"のタイトルが一部異なっていたため統一しました。

2005.03.28 追記
既存HTML UAが対応できるよう、br タグの"/"の前に空白を挿入しました。

2005.04.30 追記
W3C XHTML1.0 および CSS検証に対応しました。

2005.08.11 追記
個別エントリーアーカイブ(1カラム/3カラム)に3.17-ja?用を追加しました。

2005.10.20 追記
コメント・プレビュー(1カラム)のdiv要素(box属性の閉じタグ)が欠けていたので追加しました。

Comments [360] | Trackbacks [164]
2004年10月23日

Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ固定)

October 23,2004 1:23 AM
Tag:[]
Permalink

3カラム最新バージョン対応のテンプレートについてはテンプレートのページをご覧ください。
Movable Type 3.0x/3.1x用の3カラムテンプレートで、中央カラムのサイズ固定です(サイズ可変は別エントリーにあります)。日本語版での動作確認バージョンは、3.01D-ja/3.11-ja/3.121-ja/3.122-ja/3.15-ja/3.151-ja/3.17-ja/3.171-jaです。
画像の通り、デフォルトテンプレートと同じようにカラムの両脇および下に背景が存在します(画像をクリックすると原寸大の画面がポップアップします)。
サイドメニューのカテゴリーリストはデフォルトテンプレートではツリー表示になっていますが、本テンプレートでは一覧表示する設定に変更しています(カテゴリーのページにジャンプした時に該当カテゴリー配下しか表示されないため)。なおツリー表示の設定もカスタマイズした状態でコメントアウトしていますので適宜入れ替えてください。

TypeKey ID が日本語の場合、表示が文字化けする可能性があります。3.01D-jaでの対処方法はこちらですが3.11ではJavaScriptのインクルード方法が変更されているため動作は未確認です。予めご了承ください。同エントリーにあるTypeKeyサイン・イン時の表示が変わらない問題については対処しています。

テンプレートご利用時、下記に示すスタイルシート1行目の文字コード(青色部分)をウェブログの文字コード(mt.cfgのPublishCharsetに指定された文字コード)に合わせてください。初期値は Movable Type デフォルトの"UTF-8"に設定しています。他の文字コードを設定されている場合は"euc-jp"または"Shift_JIS"に変更してください。

@charset "utf-8"; /* 文字コード */

カレンダーは日別アーカイブにリンクさせていますので、テンプレート入れ替え後(前でもいいです)に管理メニュー左下の「ウェブログの設定」をクリック→次ページ右上の「アーカイブの設定」をクリック→次ページの真中あたりの「アーカイブ」欄の「日別」にチェックを入れて再構築してください。

カラム幅を変更する場合はスタイルシートの下記の部分を適宜変更してください。

#box {
  width: 800px; ←3カラム全体の幅
}
 
#content {
  width: 428px; ←中央カラムの幅(左右border分の2px差し引く)
}
 
#links-right{
  width : 155px ; ←右カラムのテキスト幅
}
 
#links-left{
  width : 155px ; ←左カラムのテキスト幅
}

値は、

全体の幅 = (中央カラム幅 + 2) + (左カラム幅 + (15*2)) + (右カラム幅 + (15*2))

となるように設定してください。左右カラムの15*2はメニューカラム全体とテキストとのパディングです。右辺が左辺の値を超えるとカラムがずれますのでご注意ください。

不明な点または不具合等ございましたらご連絡ください。なお本テンプレートはスタティックページでのみ確認しています(ダイナミックページ動作環境が構築できておりません)。ダイナミックページに関する問題については他のサイトにてご確認ください。

本テンプレート公開にあたって参考にさせて頂いたエントリーおよび関連エントリーを挙げておきます。ありがとうございました。

本文はとりあえず版ですので記述不足分は適宜追記していきたいと思います。可変サイズ版は別途公開する予定です。

なおこちらのページへ直接訪問された方は、ご利用の前にテンプレートのページをご覧くださいますよう、お願い申し上げます。

スタイルシート

メインページ

カテゴリー・アーカイブ

日付アーカイブ

個別エントリーアーカイブ(1カラム:3.17-ja以降)
3.17-ja より Typekey 関連のタグが変更になっています。
とりあえず1カラム版を公開します(全てのテンプレートに共通です)。変更箇所の詳細は「Movable Type 3.17-ja 個別エントリーアーカイブの変更点について」をご覧ください。

個別エントリーアーカイブ(1カラム:3.151-ja以前)

個別エントリーアーカイブ(3カラム:3.17-ja以降)
3.17-ja より Typekey 関連のタグが変更になっています。

個別エントリーアーカイブ(3カラム:3.151-ja以前)

コメント・プレビュー(1カラム)

コメント・プレビュー(3カラム)

コメント・エラー(1カラム)

コメント・エラー(3カラム)

コメント・保留

コメント・リスト(ポップアップ用)

コメント・プレビュー(ポップアップ用)

コメント・エラー(ポップアップ用)

コメント・保留(ポップアップ用)

トラックバック・リスト(ポップアップ用)

Remember Me

検索画面(default.tmpl)

検索画面テンプレートは、mt.cgi が配置してあるところに"search_templates"というディレクトリがあり、その中の"default.tmpl"というファイルです。このテンプレートはMovable Typeの管理画面から編集できませんので、普通のファイルと同様の方法で編集・保存・配置(レンタルサーバご利用の場合はFTPによるアップロード)してください。なお mt.cfg で設定されている文字コードで保存してください。

2004.10.25 追記
テンプレートに Remember Me を追加しました(管理メニュー→「テンプレート」の一番下の「テンプレート・モジュール」にあります)。本テンプレートにTypeKey日本語文字化け対策を入れましたので、これに伴い本文の一部を打ち消しました。

2004.10.29 追記
カテゴリー・アーカイブ、日付アーカイブのエントリータイトルに「●」が抜けていたので追加しました。

2004.11.09 追記
スタイルシートの文字コード設定について追記しました。

2004.11.24 追記
スタイルシートのサブカテゴリー属性指定がsideクラス指定の内容と重複していたので削除しました。

2004.12.17 追記
検索画面のテンプレートを追加しました。

2004.12.30 追記
ポップアップ用画面のテンプレート(コメント・リスト/コメント・プレビュー/コメント・エラー/コメント・保留/トラックバック・リスト)を追加しました。それに伴いスタイルシート/メイン・ページ/カテゴリー・アーカイブ/日付アーカイブを修正しました。

2005.01.14 追記
個別エントリーアーカイブのコメント・トラックバックのアンカーを修正しました。また個別エントリーアーカイブ(3カラム用)/コメント・プレビュー(3カラム用)/コメント・エラー(3カラム用)のサイドメニューにあるコメント投稿者の href 属性を、誤りを含めて修正しました。

2005.02.02 追記
タイトルを「Movable Type 3.11-ja/3.121-ja 3カラム テンプレート(サイズ固定)」から「Movable Type 3.0x/3.1x 3カラム テンプレート(サイズ固定)」に変更しました。また動作確認バージョンを文中に追加しました。

2005.02.14 追記
テンプレートのページを新たに設け、本文からのリンクを設定しました。

2005.03.13 追記
サイドメニューの"Search this site"のタイトルが一部異なっていたため統一しました。

2005.03.28 追記
既存HTML UAが対応できるよう、br タグの"/"の前に空白を挿入しました。

2005.04.30 追記
W3C XHTML1.0 および CSS検証に対応しました。

2005.06.18 追記
IE6の後方互換モードによる解釈誤り(text-align および width と padding の分離)を対処しました。

2005.08.11 追記
個別エントリーアーカイブ(1カラム/3カラム)に3.17-ja?用を追加しました。

2005.10.20 追記
コメント・プレビュー(1カラム)のdiv要素(box属性の閉じタグ)が欠けていたので追加しました。

Comments [305] | Trackbacks [85]
2004年10月17日

テンプレート再修正

October 17,2004 2:02 AM
Tag:[]
Permalink

一昨日のテンプレート修正の件ですが、表示に影響があることが判明致しました。具体的には、連続した半角文字の折り返し対処をサイドバーに入れたため、カレンダー曜日欄の "Wed" が途中で折り返してしまうという事象になります。
ご利用の方にはご迷惑をおかけいたしまして大変申し訳ございません。m(__)m

10月15日~10月17日まででテンプレートをご利用になった方は上記の事象が発生致しますので、申し訳ございませんが下記の対処をお願い致します。対処は2通りあります。

【その1】
カレンダーの曜日表示の部分を全て

<nobr>Mon</nobr>

のように括ります(文字の途中で改行しない設定です)。下記に取り替えられるものをご用意しましたのでコピーして入れ替えてくださっても結構です。

<th abbr="Sunday"><span class="calendar"><font color="#e50003"><nobr>Sun</nobr></font></span></th>
<th abbr="Monday"><span class="calendar"><nobr>Mon</nobr></span></th>
<th abbr="Tuesday"><span class="calendar"><nobr>Tue</nobr></span></th>
<th abbr="Wednesday"><span class="calendar"><nobr>Wed</nobr></span></th>
<th abbr="Thursday"><span class="calendar"><nobr>Thu</nobr></span></th>
<th abbr="Friday"><span class="calendar"><nobr>Fri</nobr></span></th>
<th abbr="Saturday"><span class="calendar"><font color="blue"><nobr>Sat</nobr></font></span></th>

【その2】
スタイルシートの

/* 「検索」「コメント」「エントリー」「カテゴリ」「リンク」等 */
.side {
        font-family: Verdana, Arial, sans-serif;
        color:#666666;
        background: none;
        font-size:9px;
        font-weight:normal;
        line-height:150%;
        padding:2px;
        margin-bottom:25px;
        word-break: break-all; /* 半角文字折り返し対処 2004.10.15追加*/
}

の一番下の赤色部分を削除してください。

公開中のエントリーはとりあえずスタイルシートの設定をコメントアウトしております。ブラウザによっては事象が発覚しません(IE系で発生します)が対処くださいますようよろしくお願い致します。

Comments [0] | Trackbacks [0]
2004年10月15日

テンプレート修正

October 15,2004 12:16 PM
Tag:[]
Permalink

まずスタイルシート(サイズ可変・固定とも)に、先日話題になった半角文字の折り返し対処を盛り込みました(忘れていました(爆))。本文・コメントとサイドバーのリスト部分に挿入しています。
なおサイズ固定の3カラムで半角文字が折り返さない文字列が存在するとカラムがずれて表示される可能性があります。発生した場合は本対処か、<wbr> タグで折り返す等でご対処ください。
修正イメージは下記の通りです。青色部分が追加になります。

styles-site.css

/* 各エントリー */
.blogbody {
    background:#ffffff;
        :
    margin-bottom:15px;
    word-break: break-all;
}
            :
/* 「検索」「コメント」「エントリー」「カテゴリ」「リンク」等 */
.side {
    font-family: Verdana, Arial, sans-serif;
        :
    margin-bottom:25px;
    word-break: break-all;
}
            :
/* 「コメント」の段落 */
.comments-body {
    font-size:12px;
        :
    margin-bottom:0px;
    word-break: break-all;
}

また3カラム用インデックステンプレート、アーカイブテンプレート(固定サイズ除く)の表示順序を

中央→右→左

から

中央→左→右

に変更しました。前者の順序になっていたのは、初期にいくつかのサイトからテンプレートを拝借して修正いた頃の名残みたいです。大変失礼致しました。
表示の遅いリンクリスト等がある場合を考慮して中央カラムを最初に表示するようにしていますが、サイズ可変のテンプレートにつきましてはどの順序で配置しても正常に表示されます。

上記はこれまでのテンプレート関連の各エントリーに盛り込みました(多分)。

Comments [14] | Trackbacks [0]
2004年10月12日

検索画面テンプレート修正

October 12,2004 12:10 AM
Tag:[]
Permalink

以前公開していた検索結果画面のテンプレートですが、検索文字列がヒットしない場合および、文字列を入力しないで検索した場合の結果画面の設定がもれていましたので、表示が統一されるよう該当エントリーのテンプレートを修正しました。
私のサイトに反映済ですので、どんな感じで表示されるかはお試しになってください。

2004.10.15 追記
具体的な修正箇所を下記の通り追加しました。青字部分が追加、赤字部分が削除です。

<MTNoSearchResults>
<h2 class="date">Searched for "<$MTSearchString$>"</h2>
 
<div class="blogbody">
<h3 class="title">No pages were found containing "<$MTSearchString$>".</h3>
</div>
</MTNoSearchResults>
 
<MTNoSearch>
<h2 class="date">Instructions</h2>
 
<div class="blogbody">
<p>By default, this search engine looks for all words in any order. To search for an exact phrase, enclose the phrase in quotes:</p>
 
<blockquote><pre>"movable type"</pre></blockquote>
 
<p>The search engine also supports AND, OR, and NOT keywords to specify boolean expressions:</p>
 
<blockquote><pre>personal OR publishing</pre></blockquote>
 
<blockquote><pre>publishing NOT personal</pre></blockquote>
</div>
 
</MTNoSearch>

英語は和訳してません。予めご容赦ください。

Comments [0] | Trackbacks [0]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3