いるみおロゴ
About Blog & Me

当ブログ『いるみお』は管理人の日常の出来事を中心に、
Mac/iPhoneのことブログのこと美味しかった食べ物
子育ての話など、自由気ままに書いています!

管理人『とろあ』。平日は普通のサラリーマン。
通勤時間など時間を見つけてブログ更新中(不規則)。
ブログを中心に色々と勉強中。
2013年にパパになったので、子育ても奮闘中XD

author-icon
201302_mainpage_ss_1.jpg

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

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

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

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

見た目の変更点

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

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

201302_mainpage_ss_2.jpg

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

 

そして、変更後がコチラ

最新記事(5件)

201302_mainpage_ss_3.jpg

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

201302_mainpage_ss_4.jpg

上図の通り、最新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のタグリファレンスを見ればすぐ出来るようなことでしたが、自分自身の備忘録と更新記録としてここの残しておきます。

当ブログが気になったら…是非RSSにご登録ください。