2009年5月アーカイブ

背景(background)を4パターン切り替えられるようにしました。

かみさんに、kahoyanテンプレートのモニターになってもらおうと思ったわけですが、軽く要望を聞いたところ「背景ピンクがいい。」っていきなりそこですか。。

そこでせっかくなので、JavaScriptによるCSS切り替えってやったことなかったので試しました。

かみさんに

「産休のあいだ、kahoyanの成長記録みたいなブログやらない?」

とさそい、kahoyanテンプレートのモニターやってもらおうと思いました。


そこで、サブドメインで新規のブログ作成を試す。

アーカイブページがデフォルトでは、月別アーカイブとカテゴリーアーカイブだけになってるので
最初のうちは、エントリー全部表示しておくことにします。(日付タイトルだけ。)

月別アーカイブ、カテゴリーアーカイブの前に次のコードを追加しました。

<div class="all-entry">
<div class="archive-content">
<h2 class="archive-header">All Entries</h2>
<ul>
<MTEntries lastn="0">
<li><span class="date"><$MTEntryDate format="%Y-%m-%d"$></span>&nbsp;:&nbsp;<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a></li>
</MTEntries>
</ul>
</div>
</div>

MTEntries タグの lastn アトリビュートを0と設定すると全エントリーを取得します。
こちら何調べてても辿り着く「小粋空間」さんの記事を参考にしました。


ソースコードを表示するケースが多いと思うので pre、code、blockquote、あたりのスタイルを指定しました。

capture003.jpg

キレイに色分けされ行番号など付加してくれるプラグインやJSライブラリがあるようですが
今回は、CSSで指定したのみ。

MTOSには「汎用ウェブサイトのテンプレートセット」は入ってないってことで・・・

やりたかったのは、ウェブページ機能を使って作成した個別ページをヘッダーにグローバルナビゲーションとして横並びに表示することでした。

んじゃ、自力でなんとかやってみる。

meta タグで keywords と descriptionを追加してみる。

ブログ記事ごとに変える方法もあるみたいだけど、このサイトはMTカスタマイズ情報に絞ってるので(今んとこ)サイト全体で統一にしようと思います。

テンプレートモジュールの「HTMLヘッダー」テンプレートを編集。

keywordsはMT関連のキーワードをカンマ(,)区切りで羅列。

descriptionは最初に <$mt:BlogDescription$> でブログの説明文

Movable Type 4  Customize memo

を挿入し、ちょっとさびしいので日本語での説明文を後に続けました。

ウェブページをヘッダに横渡りグローバルナビとして表示しようと思い、version4.1から実装されたという
「汎用ウェブサイトのテンプレートセット」を試してみようと思いました。

はい。ドキュメントみながら、テンプレートの初期化しちゃってから、MTOSでは利用できないことに気付きました。。。

既存のテンプレートのバックアップ作成にチェック入れといてよかった・・

テンプレートカスタマイズの過程でどんな感じで変更してったかわかるように、定期的にキャプチャを貼ってくことにします。

capture001

やっぱり2カラムに変更。
デザイン/スタイル/スタイルを選択→レイアウト(プルダウンメニューから)2カラム、大・小
デザインを適用。

んで、右カラムの幅なども変更してみる。

/MTをインストールしたフォルダ(ここの場合mt)/mt-static/themes-base/blog.css

browser styling のResetや大枠のレイアウトなどを指定している上記の【blog.css】はバックアップとして取っておいて、同ディレクトリに【blog02.css】でコピーする。

スタイルシートテンプレートのimportファイルを【blog02.css】に修正

@import url(mt/mt-static/themes-base/blog02.css);

【blog02.css】の /* Wide-Thin */ ってとこ探して #alpha と #beta

の幅を変更。

PICT0344.jpg

画像まわりのスタイルを設定したので、違うサイズでもうまくいくかテスト




PICT0340.jpg


お友達にベビーバスをいただきました。

お風呂入れながら、じぶんも体洗ったり出来るので、とっても楽ちん♪!


まだ、2個しかエントリーしてないけど、Analyticsの設定をしちゃおう。

まずはGoogle Analyticsで新規プロファイルを作成しkahoyan.com用のトラッキングコードを作成します。

何処に貼るのがいいんだろう?ってことですが、bodyの終了タグの前に・・とあるので
テンプレートモジュール バナーフッターに貼り付けることにします。

各ページでバナーフッターをIncludeしてるので、これで全ページに設定されることになります。

貼り付け方法ですが、今回は
新規でテンプレートモジュールを作成しそれをバナーフッターにIncludeすることにします。

テンプレートモジュールを作成+マークから「Analyticsトラッキングコード」と名前をつけて
作成したトラッキングコードをコピペします。

そんで、バナーフッターテンプレートの最後に

<$mt:Include module="Analyticsトラッキングコード"$>

と追加します。

ソースは

<body>
<div id="container">

<script>トラッキングコード</script>
</div>
</body>

って感じで厳密に</body>の前になってないんですが、問題ないようです。
解析してくれてます。

とりあえず、規定スタイルから適当に選んで、3カラム、大・小・小でスタイルを適応してみました。

/MTをインストールしたフォルダ/mt-static/support/themes

に選択したスタイル名でディレクトリが作成されます。

こんなかのcssファイルを弄くってこうと思います。

まず、/themes ディレクトリに新規に kahoyanフォルダを作成し弄くったcssファイル(今回は【style.css】としました。)、背景画像等をアップしていきます。

スタイルキャッチャーにもオリジナルスタイルが反映されるように、【style.css】の上部にコメントアウトで

/* 
name: kahoyan 
designer: ko sato 
designer_url: http://yukinachu.com/
layouts: layout-wtt, layout-twt, layout-wt, layout-tw
*/

と記述しました。(サムネイルの設定はある程度サイトが出来てきてからにしよう。)

kahoyan.com

| コメント(0) | トラックバック(0)
娘にちなんで、kahoyan.com というドメインを取得しました。
YN design の姉妹サイトとして運営して行こうと思います。

このサイトは Movable Type(Open Source) version 4.25 で構築しています。
MTのカスタマイズ・メモを中心にエントリーして行こうと思ってます。

page top