Movable Type 備忘録

テンプレート・フォー・ユー７

Apr152007
Author: bzbell
Categories: Template
Tags: 3.3, Fixed Layout, Template

Next Page: 画像の使用を極力控えてカックいいCSSデザインやてみよ大会
Prev Page: テンプレート・フォー・ユー６

こんにちわ^^

テンプレート・フォー・ユー３のさくら色バージョンを作ってみました♪

今回は背景のセレクションに苦労しました。
気に入った素材が中々作れなくて、いろんな模様、色などを作っては表示して、作っては表示･･･を繰り返した結果、今の背景に落ち着きました (;￣∇￣A

ドライアイで最近思うようにパソコンに向かってられないので、次作るときは青葉色のテンプレート、時期は初夏になるかな。

右サイドバー上に、『Black』、『Brown』、『Sakura』というメニューを用意しましたので、そちらをポチっとしてもらえれば各色のテンプレートを確認できます (￣∇￣)b

テンプレートについて

このテンプレートでは今までと違い、個人的な趣味( わたしの好み )が思いっきり入っています。 MovableType備忘録でご紹介した、以下の内容が既にカスタマイズ済みになってます。

テンプレートの設置について

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou003-sakura.zip

次にCSSやイメージファイル、スクリプトをサーバにアップロードします。
アップロード先はどこでも構いません。ここでは以下のようなディレクトリ構成でテンプレート設定の説明を進めていきます。

http://●●●.com/
 +--- index.html
 +--- styles-site.css
 |
 +--- mt-memo/
      +--- ajax/
      |    +--- ajaxsearch.js
      |    +--- ajaxcomments.js
      |    +--- ajaxcontents.js
      |
      +--- js/
      |    +--- prototype.js
      |    +--- comment_res.js
      |
      +-- base-weblog.css
      +-- 3column-fixed.css
      +-- ajax-loader.gif
      +-- bg-button.gif
      +--      :
      +-- feed-icon-200x60.gif
      +--      :

圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。
同梱しているCSSの1行目に記述されている文字コード指定を変更してください。

@charset "utf-8";

次に、各テンプレートを設置します。変更するテンプレートを以下に記します。

スタイルシート( styles-site.css )
メインページ( index.html OR index.php )
エントリー・アーカイブ
カテゴリー・アーカイブ
日付アーカイブ
コメント・プレビュー
コメント・保留
コメント・エラー
コメントの一覧
検索結果

まずはスタイルシートから。
先ほどのディレクトリ構成を元に説明しますので、異なるディレクトリ構成の場合にはその都度読み替えてください。

@charset "<$MTPublishCharset$>";

@import "mt-memo/base-weblog.css";
@import "mt-memo/3column-fixed.css";

上記はstyles-site.cssがある場所からの相対パスとなっています。問題なければそのままコピーして上書きしてしまいます。

次に、メインページです。
圧縮ファイル中のtemplate/main_index.tmplをそのままメインページに上書きします。そして、以下の行について各自の環境に合わせて変更します。

21行目
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
244行目
<td><input type="image" id="search_button" onclick="javascript:blogAjaxJsonSearch('<$MTBlogURL$>search_data.txt', document.getElementById('search_box').value );" /></td>

次に、エントリー・アーカイブです。圧縮ファイル中のtemplate/individual_entry_archive.tmplをそのままエントリー・アーカイブに上書きします。そして以下の箇所を各自の環境に合わせて修正します。

27行目
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/prototype.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/js/comment_res.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxsearch.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcomments.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>mt-memo/ajax/ajaxcontents.js"></script>
189行目
<img id="progress" style="display:none;" src="<$MTBlogURL$>mt-memo/ajax-loader.gif" alt="Loading..." />

次に、カテゴリー・アーカイブ、日付アーカイブです。
圧縮ファイル中のtemplate/category_archive.tmpl、template/datebased_archive.tmplをそれぞれコピーして上書きします。そして、今までと同様にJavaScriptのパスを各自の環境に合わせて変更します。

最後に、コメント・プレビュー、コメント・保留、コメント・エラー、コメントの一覧と検索結果をそれぞれ上書きします。

template/comment_preview_template.tmpl
コメント・プレビュー
template/comment_pending_template.tmpl
保留
template/comment_error_template.tmpl
コメント・エラー
template/comment_popup_template.tmpl
コメントの一覧
template/search_results_template.tmpl
検索結果

以上で各テンプレートの設置は完了です。

次にブログ検索用のXMLテンプレートを新規作成します。
以下のコードをコピーして、インデックス・テンプレートを作成してください。

作成するファイル名は必ずsearch_data.txtとし、index.htmlと同じ場所に作成してください。

<?xml version="1.0" encoding="utf8"?>
{
data:[
<MTEntries all="1">{
title:"<$MTEntryTitle remove_html="1" encode_js="1"$>"
,link:"<$MTEntryLink$>"
,body:"<$MTEntryBody remove_html="1" encode_js="1"$><$MTEntryMore remove_html="1" encode_js="1"$><MTComments>【<$MTCommentAuthor remove_html="1" encode_js="1"$>】<$MTCommentBody remove_html="1" encode_js="1"$></MTComments>"
},</MTEntries>
{title:"",link:"",body:""}
]
}

最後にプラグインをインストールします。
月別アーカイブ一覧で使用しているArchiveDateHeaderプラグインとArchiveDateFooterプラグインのインストールします。
上記URLからダウンロードして、サーバにアップロードします。

もう1つ、コメント投稿時の返信機能を追加してますので、こちらのmt-link-numberプラグインをインストールします。
上記URLからmt-link-number.zipという圧縮ファイルをダウンロードして、サーバにアップロードしてください。

以上で一通りの作業は完了です。
後はいつものように再構築して、表示確認を行ってください。

修正履歴

2007.06.02: »個別エントリ・アーカイブにて、コメント一覧にリンク切れのイメージ表示がされる不具合が見つかりました。
これはわたしのサイトで、コメント投稿していただいた人のサイトのファビコンを表示するためのタグが残ったままによる現象でした。すいません。
2007.04.15: »新規作成

テンプレート・フォー・ユー７

テンプレートについて

テンプレートの設置について

修正履歴

Trackback Pings(0)

Comments(0)

Post a Comment