「んー。なんかメインページの見た目がしっくりこない」

そんな気持ちからブログデザインを変更したい衝動にかられ、メインページの記事概要表示を変更しました。とろあ( @tohroa )です。

変更までに紆余曲折あり、適用するまでに予定の倍以上の時間を要してしまいましたが、その辺はまた書きたいと思います。

この記事自体、今朝アップする予定が、デザインの変更に戸惑って、結局夜に……もっと色々スムーズに出来るようになろう。

見た目の変更点

今回変更したのは、メインページの「ブログ記事の概要」表示です。

まずは、今までの表示がコチラ

直近の記事10件について、すべて同じ形式で「タイトル+サムネイル+記事概要」を表示していました。

そして、変更後がコチラ

最新記事(5件)

最新(上を除く)10件記事

上図の通り、最新5件の記事を大きくアピールし、6件目以降の記事を簡易表示にして表示件数を増やすことが出来ました！

いままでの「記事の概要」部分が、ちょっと見づらいかなぁ…と思っていたので、見やすくするための変更です。

テンプレートの変更点

メインページのテンプレートと、ブログ記事の概要を変更します。

まずは、ブログ記事の概要から。

テンプレートの編集画面で「テンプレートの複製」を行い、内容を編集します。(ここは人によって異なってくると思うので割愛。単に楽をしたとも…

今回は新しく作ったテンプレートを「ブログ記事の概要2」としました。

これに伴い、「ブログ記事の概要」と「ブログ記事の概要2」の見た目に合わせて、CSSも編集する必要になりますが、今回は、とりあえずどちらも共通して適用出来るように調整しておきました。

後は、メインページのブログ記事の概要を読み込む部分を以下の通り、2つに分けて記述するだけです。

【Before】

[code:xml]
<$mt:Include module=”ブログ記事の概要”$>
</mt:entries>
[/code]

【After】

[code:xml]
<$mt:Include module="ブログ記事の概要"$>


<$mt:Include module="ブログ記事の概要2"$>

[/code]

一つ目の<mt:entries>にモディファイアlastn=”x”を設定して、「最新のx記事」を表示しています。

更に、二つ目の<mt:entries>にoffset=”x”とlastn=”y”を設定して、「最新x記事を飛ばして、y記事表示」。

MovableTypeのタグリファレンスを見ればすぐ出来るようなことでしたが、自分自身の備忘録と更新記録としてここの残しておきます。