投稿者: Tadashi

Movable Typeのカスタマイズ(7)
-余白の調整-
さて７回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
前回の右に偏った月移動可能なカレンダーを調整しましょう。スタイルシートのいろいろな余白を調整したらどこを直したのかわからなくなりました。とりあえず、次の２箇所を修正します。marginとpaddingはともに余白の設定ですが、上、左、下、右の順となります。
body { margin: 0px 0px 20px 0px; }
.sidebar { padding: 0px 5px; }
カレンダーの表示幅を90%にします。
#calendar table { width: 90%; }
そして左サイドと右サイドのコンテンツを整理しました。どんどん続く・・・予定。

さて６回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、カレンダーを月移動可能なカレンダーを設置する。書籍と書籍にも紹介されているsukesamさんのホームページを参考に作成してみたが、どうもうまくいかない。そこで、スタイルシートはそのまま使えるように変更してみた。
※表示するためHTMLタグの<>を[]に変換している。
まず、以下のテンプレートを「新しいアーカイブ・テンプレートを作る」から「calendar」というテンプレート名で保存します。
[!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”]
[head]
[meta http-equiv=”Content-Type” content=”text/html; charset=[$MTPublishCharset$]” /]
[title][$MTBlogName$][/title]
[link rel=”stylesheet” href=”[$MTBlogURL$]styles-site.css” type=”text/css” /]
[MTBlogIfCCLicense]
[$MTCCLicenseRDF$]
[/MTBlogIfCCLicense]
[/head]
[body]
[div id=”container”]
[div id=”left-side”]
[div class=”sidebar”]
[div align=”center” id=”calendar”]
[table summary=”記事のリンク付き月間カレンダー” border=”1″]

[MTArchivePrevious]
[a href=”[MTBlogURL]archives/[MTArchiveDate format=”%Y_%m”].html” title=”« [MTArchiveDate format=”%B %Y”]” onmouseover=”window.
status='[MTArchiveDate format=”%B %Y”]’; return true” onmouseout=”window.status=”;return true”]«[/a]
[/MTArchivePrevious]
[$MTArchiveDate format=”%B %Y”$]
[MTArchiveNext]
[a href=”[MTBlogURL]archives/[MTArchiveDate format=”%Y_%m”].html” title=”» [MTArchiveDate format=”%B %Y”]” onmouseover=”window.
status='[MTArchiveDate format=”%B %Y”]’; return true” onmouseout=”window.status=”;return true”]»[/a]
[/MTArchiveNext]

[tr]
[th abbr=”日曜日”]日[/th]
[th abbr=”月曜日”]月[/th]
[th abbr=”火曜日”]火[/th]
[th abbr=”水曜日”]水[/th]
[th abbr=”木曜日”]木[/th]
[th abbr=”金曜日”]金[/th]
[th abbr=”土曜日”]土[/th]
[/tr]
[MTCalendar month=”this”]
[MTCalendarWeekHeader][tr][/MTCalendarWeekHeader]
[td align=”center”]
[MTCalendarIfEntries]
[MTEntries lastn=”1″][a href=”[$MTEntryPermalink$]” target=”_top”]
[$MTCalendarDay$][/a][/MTEntries][/MTCalendarIfEntries]
[MTCalendarIfNoEntries]
[$MTCalendarDay$][/MTCalendarIfNoEntries]
[MTCalendarIfBlank] [/MTCalendarIfBlank][/td]
[MTCalendarWeekFooter][/tr][/MTCalendarWeekFooter][/MTCalendar]
[/table]
[/div]
[/div]
[/div]
[/div]
[/body]
[/html]
次はアーカイブの設定です。「ウェブログの設定」画面で、「新しく、テンプレートとアーカイブを関連付ける」という欄で、アーカイブの種類を「月別」、テンプレートを「calendar」を指定して追加します。追加された月別のcalendarテンプレートの右のテキストボックスに
[$MTArchiveDate format=”%Y_%m.html”$]
を入力して、変更を保存します。スタイルシートは標準のものを利用します。
メインページの左サイドの最後にインラインフレームでcalendarテンプレートを設定します。
[h2]高機能カレンダー[br /](月移動可能)[/h2]
[iframe name=”cal-iframe” src=”[MTBlogURL]archives/[MTDate format=”%Y_%m”].html” frameborder=”0″ marginwidth=”0″ marginheight=”0″ width=”200″ height=”180″ scrolling=”no”][/iframe]
なんか少し右(中央)にずれています。文字のサイズを大きくすると明らかに標準のカレンダーとは違う表示である。あと一歩というところか。標準のカレンダーと入れ替えようかと思ったが、諦めた。まだまだ続く・・・予定。

さて５回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、２カラムであるメインページ(エントリーと右サイド)を３カラム(エントリーを挟んで左サイドと右サイド)に変更する。最近よく見るデザインであり、黄金分割の画面だそうです。
※表示するためHTMLタグの<>を[]に変換している。
変更箇所は主に２箇所。
1.スタイルシート
2.メインページ
スタイルシートに左サイド用の設定を#rightのすぐ下に#rightをコピーして貼り付けます。
#left-side {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}
次に、#centerのwidthを400pxに修正して縮めます。
メインページはcenterのエントリー部分の直前に以下を挿入します。
[div id=”left-side”]
[div class=”sidebar”]
[/div]
[/div]
[div id=”center”]
左サイドには、カレンダーと最近の記事、最近のコメントを移動します。おーっと、なかなかいい感じですね。どうですか？まだまだ続く・・・予定。

さて、４回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、サイドバーに最近のコメントを表示するように設定する。コメント関連のテンプレートタグには、MTEntriesの属性としてrecently_comment_onというオプションがあるので、これを利用する。そこで、最新のコメント5個を表示し、そのエントリーのタイトルとコメント投稿者名を併記し、投稿者名をクリックするとコメント表示画面に変わる、という動作を追加する。
※表示するためHTMLタグの<>を[]に変換している。
[h2]最近のコメント[/h2]
[ul]
[MTEntries recently_commented_on=”5″ sort_order=”ascend”]
[li][a href=”[$MTEntryPermalink$]”][$MTEntryTitle$][/a][br /]
[MTComments lastn=”5″]
└[a href=”[$MTEntryPermalink$]#[$MTCommentID$]”]
[$MTCommentAuthor$][/a][br /][/li]
[/MTComments]
[/MTEntries]
[/ul]
サイドバーに最近のコメントの表題が表示された。しかし、コメントがまだないため、コメントが出ない。誰かコメントを！！まだまだ続く・・・予定。

さて、３回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、メインページのサイドバーの検索ボックスをGoogleに変更しようと思ったが、なかなかサイト内のコンテンツがGoogleの検索対象とはならないため、標準の検索に追加する。
※表示するためHTMLタグの<>を[]に変換している。
初期設定では、
[h2]検索[/h2]
[div class=”link-note”]
[form method=”get” action=”[$MTCGIPath$][$MTSearchScript$]”]
[input type=”hidden” name=”IncludeBlogs” value=”[$MTBlogID$]” /]
[label for=”search” accesskey=”4″]このサイトの検索[/label][br /]
[input id=”search” name=”search” size=”20″ /][br /]
[input type=”submit” value=”検索” /]
[/form]
[/div]
次のように変更する。太字の部分がGoogle用の追加部分である。
[h2]検索[/h2]
[div class=”link-note”]
[form method=”get” action=”[$MTCGIPath$][$MTSearchScript$]”]
[input type=”hidden” name=”IncludeBlogs” value=”[$MTBlogID$]” /]
[label for=”search” accesskey=”4″]このサイトの検索[/label][br /]
[input id=”search” name=”search” size=”20″ /][br /]
[input type=”submit” value=” 検索 ” /]
[/form]
[center]
[form method=”get” action=”http://www.google.co.jp/search”]
[a href=”http://www.google.co.jp/”]
[img src=”http://www.google.com/logos/Logo_40wht.gif” border=”0″ alt=”Google” align=”absmiddle”][/A][br /]
[input type=”text” name=”q” size=”21″ maxlength=”255″ value=””]
[input type=”hidden” name=”hl” value=”ja”]
[input type=”hidden” name=”ie” value=”UTF-8″]
[input type=submit name=btnG value=” 検索 “][/center]
[input type=”hidden” name=”domains” value=”www.free-style.biz”]
[input type=”radio” name=”sitesearch” value=”http://www.free-style.biz/blog/” checked] ブログ内を検索 [br /]
[input type=”radio” name=”sitesearch” value=””] WWWを検索 [br /]
[/form]
[/div]
Googleのリンク、検索機能を追加のページを参考にできる。Googleのロゴは小さい順に25%、40%、50%、60%と４種類あるが、当サイトは一番小さい25%を利用している。
案の定、設定後にすぐ試してみたらサイト内検索はダメでした。さらにどんどん続く・・・予定。

さて、２回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、メインページのサイドバーにMTロゴを表示する。
※表示するためHTMLタグの<>を[]に変換している。
初期設定では、次のようにテキスト文字リンクのみである。
[div id=”powered”]
Powered by[br /][a href=”http://www.movabletype.jp”]Movable Type [$MTVersion$][/a][br /]
[/div]
次のように変更する。リンクに挟んで画像と文字を表示する。
[div id=”powered”]
[a href=”http://www.movabletype.jp”][img src=”[$MTStaticWebPath$]images/powered.gif” border=”0″][br /]
Movable Type [$MTVersion$][/a][br /]
[/div]
Movable Typeのロゴ画像は同時にインストールされている。場所はimagesディレクトリの中に「powered.gif」という名で入っているが、imagesディレクトリは静的ファイルとしてCGIファイルと別のディレクトリにアップロードしているため、URLの指定は「[$MTStaticWebPath$]images/」という専用タグを使用する。
どうだろう。少し見栄えよくなった。どんどん続く・・・予定。

今日から数回に渡り自分のブログサイトをカスタマイズしてみる。参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
まずは、メインページの日付と時刻の表示を変更する。初期設定の太字の部分を変更する。
※表示するためHTMLタグの<>を[]に変換している。
[MTEntries]
[$MTEntryTrackbackData$]
[MTDateHeader]
[h2][$MTEntryDate format=”%x”$][/h2]
[/MTDateHeader]
[h1 id=”a[$MTEntryID pad=”1″$]”][$MTEntryTitle$][/h1]
[$MTEntryBody$]
[MTEntryIfExtended]
[p class=”extended”][a href=”[$MTEntryPermalink$]#more”]続きを読む “[$MTEntryTitle$]”[/a][/p]
[/MTEntryIfExtended]
[p class=”posted”]投稿者 [$MTEntryAuthor$] : [a href=”[$MTEntryPermalink valid_html=”1″$]”][$MTEntryDate format=”%X”$][/a]
[MTEntryIfAllowComments]
| [a href=”[$MTEntryPermalink archive_type=”Individual”$]#comments”]コメント ([$MTEntryCommentCount$])[/a]
[/MTEntryIfAllowComments]
[MTEntryIfAllowPings]
| [a href=”[$MTEntryPermalink archive_type=”Individual”$]#trackbacks”]トラックバック ([$MTEntryTrackbackCount$])[/a]
[/MTEntryIfAllowPings]
[/p]
[/MTEntries]
変更後は次のようになる。
[MTEntries]
[$MTEntryTrackbackData$]
[!–
[MTDateHeader]
[h2][$MTEntryDate format=”%x”$][/h2]
[/MTDateHeader]
–]
[h1 id=”a[$MTEntryID pad=”1″$]”][$MTEntryTitle$][/h1]
[$MTEntryBody$]
[MTEntryIfExtended]
[p class=”extended”][a href=”[$MTEntryPermalink$]#more”]続きを読む “[$MTEntryTitle$]”[/a][/p]
[/MTEntryIfExtended]
[p class=”posted”]
[MTEntryIfAllowComments]
[a href=”[$MTEntryPermalink archive_type=”Individual”$]#comments”]コメント ([$MTEntryCommentCount$])[/a]
[/MTEntryIfAllowComments]
[MTEntryIfAllowPings]
／ [a href=”[$MTEntryPermalink archive_type=”Individual”$]#trackbacks”]トラックバック ([$MTEntryTrackbackCount$])[/a]
[/MTEntryIfAllowPings]
／ wrote by [$MTEntryAuthor$] : [a href=”[$MTEntryPermalink valid_html=”1″$]”]
[$MTEntryDate format=”%x(%a) %X”$][/a]
[/p]
[/MTEntries]
変更箇所は4つ。
1.エントリータイトルの前にある日付をエントリーの時刻の前へ移動する。
2.エントリーの後の時刻をトラックバックの後へ移動して、曜日を追加する。
3.「投稿者」から「wrote by」へ変更する。
4.区切り表示は「|」から「／」へ変更する。
日付を変更しました。見栄えはどうでしょう。どんどん続く・・・予定