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

• Feb252007
• Author: bzbell
• Categories: Template
• Tags: 3.3, Fixed Layout, Template

• Next Page: テンプレート・フォー・ユー４
• Prev Page: テンプレート・フォー・ユー２

こんにちわ^^

ついチョビッと前までは暖かかったのに、昨日、今日は寒かったですね (;￣∇￣A
風邪などひかないよう気をつけてくださいね♪って、そんなわたしは既に風邪ひいて、抗体を作成済み (＞∀＜　)てへ

さてさて、テンプレート作ってみました。 わたしが通勤に利用している山手線の窓が曇ってたのを見て、モヤモヤしたかんじのテンプレートに仕上げてみました!! って言われてもよく分からないですよね (;￣∇￣A
わたしのフィーリングということで流してくださいな♪

このテンプレートのフォントには、POP系フォントを使用するといいかも (￣∇￣)b と思って、一部POP系フォントを使用してますの♪
当然、本文にはPOP系フォントだと見にくくなるから使用してませんけどね。

テンプレートについて

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

• ブログの最終更新日付を表示する
• AjaxでIFRAME的な表示をやってみる
• ブログ内検索を高速化
• MovableTypeで2ちゃんねる風なコメントリストにする

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

まず、以下からテンプレート一式の圧縮ファイルをダウンロードして、適当なフォルダに展開します。
foryou003-black.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
      +--      :
      +-- site-title.gif

圧縮ファイル中のmt-memo/フォルダをそのままサーバにアップロードします。
文字コードにUTF-8以外をお使いの人は、CSSおよび、スクリプトをファイルの文字コード変換を済ませてからアップロードしてください。 そうしないと文字化けの原因になります。
文字コードの変換は、文字コード変換付きのテキストエディタなどで開いて、各自で使用している文字コードで保存し直せばOKです。

また、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という圧縮ファイルをダウンロードして、サーバにアップロードしてください。

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

修正履歴

• Related Entries
• 07/04/15テンプレート・フォー・ユー７
• 07/04/07テンプレート・フォー・ユー６
• 06/11/22アレンジ・テンプレート１
• 06/12/09アレンジ・テンプレート２
• 06/12/30アレンジ・テンプレート３
• 06/12/31アレンジ・テンプレート４
• 07/01/08アレンジ・テンプレート６
• 07/01/14アレンジ・テンプレート７
• 07/01/21アレンジ・テンプレート８
• 07/02/05テンプレート・フォー・ユー１

• Edit
• Permalink
• Comments(2)
• Trackbacks(0)

 Trackback Pings(0)

TrackBack URL for this entry:

No trackbacks found.

 Comments(2)

#1: Posted by けんじ [RES]

はじめまして！
Movable暦３日目の、けんじです。

bizcazさんのサイトは非常に分かりやすく、
勉強させてもらっています。

いきなりで恐縮なのですが、一点ご質問があります。

この「テンプレート・フォー・ユー３」を利用させてもらっているのですが、
コメントの「#1: Posted by ×　Name [RES] 」のように、
"Posted by"と"Name"の間に画像リンク切れが出てしまいます。

これは、どこのフォルダの画像を読みにいっているのでしょうか？

Posted on June 2, 2007

#2: Posted by bzbell [RES]

>>1 けんじ さん

はじめまして^^

> "Posted by"と"Name"の間に画像リンク切れが出てしまいます。

ごめんなさいっ!!
わたしのとこでは、コメントしていただいた人の、サイトのファビコンを表示してるんですっ!!
その名残りでしたっ!!

個別エントリ・アーカイブを以下のように修正すればリンク切れがなくなります。

<MTFaviconCommentIfAvailable>～</MTFaviconCommentIfAvailable>の1行を削除
<MTFaviconCommentIfAvailable><img src="<$MTFaviconComment$>" alt="" title="" class="favicon" /></MTFaviconCommentIfAvailable>

大変ご迷惑をおかけしました (m;_ _)mペコ

Posted on June 2, 2007