ここからは、「小粋空間」でどのエントリーを使って変更したかのみお伝えします。
ここまで変更できたあなたは、それだけで簡単に理解できると思います。
1.
Top
> Movable
Type
> カスタマイズ
> ツリー化
>
JavaScript 不要なサイドメニューのツリー化 for Movable Type
何も難しいところはありません。
4.ツリー画像のダウンロード
でダウンロードした画像ファイルの名前
実線:tree_lst_solid.gif
/
tree_end_solid.gif
点線:tree_lst_dotted.gif
/
tree_end_dotted.gif
それぞれ、tree_end.gif
とtree_lst.gifに変えてください。
これは、
3.CSS
(全リスト共通)の
ul.tree li
{
margin:
0!important;
padding: 0 0
0 16px!important;
background-image:
url(tree_end.gif);
background-repeat: no-repeat!important;
list-style:
none!important;
}
ul.tree li.tree_end
{
background-image: url(tree_end.gif);
list-style:
none;
}
に合わせるためです。
background-image:
url(tree_end.gif);
この設定だと、ブログのルートフォルダ「blog」
にアップロードします。
例えば、「/blog/images/system」
に一括してシステムに関係する画像を置いておく場合なら、
background-image: url(./images/system
/tree_end.gif);
background-image: url(./images/system
/tree_end.gif);
となります。
「url(./ ・・・・・」 と見えにくいですが、“.”小文字のドットが入ります。
この小文字のドット1つは、カレントフォルダをさします。「今いるフォルダから」と考えます。
2.
Top
> Movable
Type
> カスタマイズ
> 新着表示
> 新着エントリーのあるカテゴリーに New マークをつける
ここも、難しいところはありません。
よかったら、「イの葉」が使っている“NEW!!”マークnew.gifを使ってください。
ちなみに、これ「ヤフー!」のNEW!マークに + !したものです。一応作ったので著作権違反はないかと。(笑)
3.
Top
> Movable
Type
> カスタマイズ
> PHP化
>
Movable Type の PHP化(その1)
ここも、難しいところはありません。ただここは、ページが5ページに分割されているので注意して下さい。
ちなみに、(その2)がありますが、できませんでした。
Movable Type の PHP化(その2:.html のままPHPを有効にする)
4.
カレンダーについて
公開テンプレートでもカレンダーをサポートしています。ただし、以下の設定を行うことでカレンダーは表示されます。
設定を行わないと表示されません。
管理画面にある「設定」→「公開」の順にクリックし、次ページの下にある「アーカイブのマッピング」で「日別」
の左側にチェックをつけて保存し、再構築してください。
注意:このカレンダーは、月送り機能がありません。
5.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> 月送りカレンダー
ここも難しいところはありませんが、「アーカイブの設定」による違いを見ていきましょう。
「小粋空間」の「1.アーカイブテンプレート用ディレクトリ設定」より
1.1
バージョン 3.2
以降
ここにチェックを入れる前は、管理画面は以下のようになっています。
この状態では、ディレクトリ「blog」
の中は下記のようになります。
それでは、「アーカイブの設定」にチェックを入れて、「アーカイブURL」
と「アーカイブ・パス」を設定し、再構築すると、
下記画像のように、「archives」
の下に上記画像(2つ前)
の青印部か生成されます。
ここで注意は、ここで設定したからといって、青印部が削除されるわけではありません。MovableTypeには、
フォルダの削除機能は無いはずです。
「blog」
フォルダがすっきりしました。(ffftpで削除してかまいません。
心配なら削除対象のフォルダを任意の名前に変更して、問題が無いことを確かめてから、削除してください。)
2.カレンダー用スタイルシート作成
手順通りに行ってください。
2.1
バージョン 3.2
以降
3.カレンダー用アーカイブテンプレート作成
手順通りに行ってください。
3.1
バージョン 3.2
以降
ここで注意です、「リスト2:カレンダー用アーカイブテンプレート」を下記のように作成しますが、
ここまででPHP化していますので、
下の画像の青印部分のようにhtmlからphpに変更してください。
4.ファイルの関連付け
手順通りに行ってください。
4.1
バージョン 3.2
以降
下の画像のように、黄印部のラジオボタンはそのまま、青印を「calendar/%y/%m/%i」
に変更して、保存します。
この時点で再構築をしても、ブログ自体に変化はありません。あとは、「5.カレンダーの設置」の通りに、
各テンプレートにカレンダーを設置することにより、カレンダーが表示されます。
「再構築」すると「blog/archives」
フォルダに「calender」
フォルダが作成されます。
5.カレンダーの設置
手順通りに行ってください。
「小粋空間」の「5.カレンダーの設置」は、php化する前の記事なので上記と同様に赤印部を「html
からphp」
として下さい。
6.サイトの再構築
再度「再構築」すると出来上がりです。^^
6.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> 月送りカレンダー状態保持スクリプト
ここも、難しいところはありません。
「小粋空間」に
1.JavaScriptファイルの設定
下記を"calendar.js"というファイル名でローカル・
サイト・パスに保存してください。
と言う所がありますが、このローカル・サイト・パスとはレンタル・サーバーのブログのパスのことです。「イの葉」で言えば、
「www.inoha.jp/blog」
のことで、ここにffftpを使って"calendar.js"をアップロードしてください。
後は順を追って変更すれば問題ないでしょう。
7.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> リアルタイムカレンダー(改)
ここは、少し難解??!!
Movable
Type
のカレンダーでは、エントリー投稿やコメント投稿が行われないとカレンダーは更新されず、本日の日付が古いままです。
これを解消するための変更がこの「リアルタイムカレンダー(改)」です。
「小粋空間」では、
ここでは拡張子がすでに .php
になっている場合とそうでない場合、および月送りカレンダー利用の場合の3つのケースについて説明しています。
それぞれに必要な項目は下記の通りです。
拡張子が .php
になっている場合:1、2.1(または2.3)
拡張子が .php
になっていない場合:1、3、4
月送りカレンダーの場合:1、2.2
とあります。
現在までで、「イの葉」のブログは拡張子が.php
で月送りカレンダー となっています。
よって、「月送りカレンダーの場合:1、2.2」の変更を行います。
また、
「小粋空間」での
月送りカレンダーの場合の注意事項
この最後の
・月送りカレンダー用ファイルの拡張子を「.html」
から「.php」
に変更した際、.html
ファイルが残っているとカレンダーが正常に表示されない場合があります。 .html
ファイルは必ず削除してください。
は注意してください。他の項目は大丈夫なはずです。
1.スタイルシートにカレンダー用スタイルの追加(共通)
ここは、
background :
#000000; /*
背景色をつける設定 */
のみを追加しました。ただこれだと、本日が真っ黒なので淡い黄色 #ffff99にしてみました。
これは好みの問題ですね。(笑)
よって
.today
{
display:
block;
text-align:
center;
border: 1px
solid #444444;
background :
#ffff99; /*
背景色をつける設定 */
}
としました。
2.カレンダー関連タグの変更(拡張子が .php
になっている場合/月送りカレンダーの場合)
「小粋空間」では
カレンダーの設定がされている各テンプレートの <MTCalendar>~</MTCalendar>
の部分を下記のスクリプトに変更します。
とあります。具体的には、
2.2
月送りカレンダーの場合
月送りカレンダーご利用の方は「アーカイブ・テンプレート」の「カレンダー」に設定されている該当部分を下記に変更してください。
であり、「アーカイブ・テンプレート」の「カレンダー」の下の方
<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>
をごっそり下記に変更です。
<?php $day =
date("j"); $year = date("Y"); $month = date("m");
?>
<MTCalendar
month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$y="<$MTCalendarDate format='%Y'$>";
$m="<$MTCalendarDate format='%m'$>";
$d="<$MTCalendarDay$>"; if($year == $y &&
$month == $m && $day == $d) { $style = "
class=\"today\""; } else { $style = ""; }
?>
<td
align="center"<?php print "$style"; ?>><span
class="calendar"><MTEntries lastn="1"><a
href="<$MTEntryLink
archive_type="Daily"$>"
target="_top"><$MTCalendarDay$></a></MTEntries></span></td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php
$y="<$MTCalendarDate format='%Y'$>";
$m="<$MTCalendarDate format='%m'$>";
$d="<$MTCalendarDay$>"; if($year == $y &&
$month == $m && $day == $d) { $style = "
class=\"today\""; } else { $style = ""; }
?>
<td
align="center"<?php print "$style"; ?>><span
class="calendar"><$MTCalendarDay$></span></td>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
必ず各変更後、「保存」して「再構築」してください。これで終了です。また、各テンプレートを変更後「保存」してしまうと、アンドゥ
(Ctl+zなどで)
が効かなくなるので、変更前のファイルもしくは変更箇所を保存しておきましょう。
8.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> 月送りカレンダー・1日に表示されなくなる不具合を改善
ここも難しくありません。各テンプレート名が
1.
メインページ
2.
アーカイブペ-ジ
3.
エントリー・アーカイブ
4.
カテゴリ・アーカイブ
5.
日付アーカイブ
に対して、変更していきます。
具体的には
<!--
カレンダー開始 -->
<div
align="center" class="side">
<iframe
name="cal-iframe"
src="<$MTBlogURL$>archives/calendar/<MTEntries
lastn="1" sord_order="descend"><$MTEntryDate
format="%Y/%m/index" $></MTEntries>.php"
width="150" height="140" scrolling="NO" frameborder="0"
marginwidth="0" marginheight="0">
</iframe>
</div>
こうなります。
9.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> カレンダーのリンクにツールチップを設定する
ここも難しくありません。
しいて言えば、どこと置き換えるのか解りづらいことかな。テンプレート名「カレンダー」の
・
・
<!--
リアルタイムカレンダー(改) -->
<?php $day =
date("j"); $year = date("Y"); $month = date("m");
?>
<MTCalendar
month="this">
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>
<MTCalendarIfEntries>
<?php
$y="<$MTCalendarDate format='%Y'$>";
$m="<$MTCalendarDate format='%m'$>";
$d="<$MTCalendarDay$>"; if($year == $y &&
$month == $m && $day == $d) { $style = "
class=\"today\""; } else { $style = ""; }
?>
<td
align="center"<?php print "$style"; ?>><span
class="calendar"><MTEntries
lastn="1"><a href="<$MTEntryLink
archive_type="Daily"$>"
target="_top"><$MTCalendarDay$></a></MTEntries></span></td>
</MTCalendarIfEntries>
<MTCalendarIfNoEntries>
<?php
$y="<$MTCalendarDate format='%Y'$>";
$m="<$MTCalendarDate format='%m'$>";
$d="<$MTCalendarDay$>"; if($year == $y &&
$month == $m && $day == $d) { $style = "
class=\"today\""; } else { $style = ""; }
?>
<td
align="center"<?php print "$style"; ?>><span
class="calendar"><$MTCalendarDay$></span></td>
</MTCalendarIfNoEntries>
<MTCalendarIfBlank><td> </td></MTCalendarIfBlank>
<MTCalendarWeekFooter></tr></MTCalendarWeekFooter>
</MTCalendar>
<!--
リアルタイムカレンダー(改) -->
赤の部分を、
<MTEntries><MTDateHeader><a
href="<$MTEntryPermalink archive_type="Daily"$>"
title="</MTDateHeader><$MTEntryTitle$><MTDateFooter>"
target="_top"><$MTCalendarDay$></a><MTElse> / </MTElse></MTDateFooter></MTEntries>
と置き換えて!! おしまい。
10.
Top
> Movable
Type
> カスタマイズ
> カレンダー
> 休日表示付リアルタイムカレンダー for Movable Type
ここは、どこの設定を行うかだけ話します。それ以外は難しくありません。
1.休日表示用カレンダースクリプトのダウンロード
3.テンプレートの修正1(スクリプトのインクルード)
テンプレート名、カレンダーに追加します。
4.3
月送りカレンダーの場合
ここも、テンプレート名、カレンダーに追加します。
「カレンダー用アーカイブテンプレートの最後に下記を追加」とあります、場所は
</table>
</div>
<!--
休日表示付リアルタイムカレンダー for Movable Type
-->
<script
type="text/javascript">
setCurrentDate();
setWeekendAndHoliday('<$MTArchiveDate
format="%Y"$>','<$MTArchiveDate
format="%m"$>');
</script>
<!--
休日表示付リアルタイムカレンダー for Movable Type
-->
</body>
</html>
ここに追加しました。
5.テンプレートの修正3(スクリプト追加)
外部ファイル「dayChecker.js」
に追加します。くれぐれも、
<script
type="text/javascript"> と </script> を抜いた箇所を追加してください。
2.スクリプトのアップロード
そして、「再構築」してください。終了です。