mt5のブログで記事を小分けにしたい

MovableType5を使いブログを作っているのですが、
思い通りに行かず四苦八苦しております。

添付した画像の様に、投稿したブログ記事をボックス（枠やらテーブル）で小さくまとめ、三つセットを横並びで配置し、ボックスかテキストに該当する記事へのリンクを積める物（ボックスの中には記事は全て載らない。ボックスサイズに合わせて途中で文章が終わり、リンクで該当記事（全文表示）へ）を作りたいのです。

ブログのエントリを小分けして並べる方法を見つける事すら出来ず、ここに辿り着きました

どなたか知恵を貸していただければ幸いです、よろしくお願いします

No.3 ベストアンサー 回答者： noname#161038 回答日時： 2012/05/22 22:31

そうでしたか、３つの質問とも、HTMLやCSSに関するある程度の知識がないと理解が難しい部分もあるのですが、簡単に説明しますと…

■箱を２つ３つほど横一列で並べて小分けする枠組みの作り方

<table border="1">
<tr>
<td>コンテンツ１</td><td>コンテンツ２</td><td>コンテンツ３</td>
</tr>
<tr>
<td>コンテンツ４</td><td>コンテンツ５</td><td>コンテンツ６</td>
</tr>
</table>

上のタグをコピペしてみると、コンテンツの並べ方のイメージがつかめると思います。ただし、この記述だと枠線が表示された状態になります。枠線を消すにはタグの冒頭のborder="1"の記述部分をborder="0"にすればいいのです。


■その枠組みの中のそれぞれの枠の中にエントリの一部だけを表示させる方法

上の<td>タグに、以下のスタイルシートを適用させる方法があります。

td {
width:○○px;
height:△△px;
text-overflow:ellipsis;
}

上の○○、△△部分に任意の半角数字を挿入することにより、セルのサイズを指定することが出来ます。ただしこれは<td>というタグすべてにこのスタイルシートを適用させる方法です。特定の<td>タグにだけこのスタイルシートを適用する方法は、ご自身で研究して頂くしかありません。

"text-overflow:ellipsis;"という記述は、すべてのコンテンツを表示できずに溢れてしまったテキストの代わりに、省略記号「…」を表示させるための記述です。ただし、このプロパティはFirefoxの一部の古いバージョンには対応していないようです。この記述の代わりに"overflow:hidden;"と記述してもテキストの途中の部分までしか表示しないようにすることは出来ますが、「…」は表示されずに「ブツ切れ」状態の記述になってしまいます。


■それぞれの枠全体が個別記事へのリンクになるようにする方法

基本的には、リンクにしたい部分を<a>～</a>で囲めば、その部分がすべてリンクになります。

ただし、何もスタイルシートをかけない状態だと、リンクを貼られた画像（テキスト）には、枠線（下線）が表示されます。リンクが貼られた画像に枠線が表示されないようにするには、<img>タグに{border:0px;}のスタイルシートを適用します。また、リンクが貼られたテキストに下線が表示されないようにするには<a></a>タグの部分に{text-decoration:none}のスタイルシートをかければ良いです。

ただし、特定の画像（リンク文字）の部分だけ枠線（下線）を表示させない方法や、リンク文字にマウスを乗せた時だけ下線を表示させる方法などもあるりますが、これについてもご自身で研究して下さいませ。m(_ _)m

この回答へのお礼

質問の意図すらままならぬ中、長々とおつきあい頂き、
お手数おかけしました

おかげさまで、エントリを小さくまとめ、テーブルによる区分も果たし、
かなり目標に近づけたと思います…もはや感謝の念に堪えません　m(_ _)m

お礼日時：2012/05/24 13:21

No.2 回答者： noname#161038 回答日時： 2012/05/22 10:12

申し訳ございません、私の理解力の至らなさのせいか、今ひとつご質問者様の質問の最大の論点がどこにあるかが把握できていない状態なのですが(汗)、私の頭では論点がなお３つあるような感じがするのです。

すなわち、
■箱を２つ３つほど横一列で並べて小分けする「枠組みの作り方」
■その枠組みの中のそれぞれの枠の中にエントリの「一部」を表示させる方法
■その枠組みの中のそれぞれの「枠全体が個別記事へのリンクになる」ようにする方法

このうちのどれが論点なのかによってお示しする解決策も異なってくるので、場合によってはずいぶん遠回りな問答になる恐れがあります。

なお、もしご質問者様がレイアウトを模倣したいと思っているページがあるのならば、そのページのHTMLソースを解析することで問題が迅速に解決できると思うのですが。

この回答への補足

私の方こそ、こちらの説明が至らぬあまり余計な
お手数をかけてしまい、まことに申し訳有りません…。

先に述べられました
■箱を２つ３つほど横一列で並べて小分けする「枠組みの作り方」
■その枠組みの中のそれぞれの枠の中にエントリの「一部」を表示させる方法
■その枠組みの中のそれぞれの「枠全体が個別記事へのリンクになる」ようにする方法

…は、その三つ全てがまさしく私の「狙い」であり「求めているもの」です。
中でも上２つが、より重要で、枠組そのものでなくとも
個別記事に飛べるリンク（エントリタイトル等）さえ有れば問題ありません


イメージに一番近いページはこちらで、

http://www.triton-cafe.jp/blog

最初に貼った画像の元でもあります。

補足日時：2012/05/22 14:27

No.1 回答者： noname#161038 回答日時： 2012/05/20 20:43

ブログのエントリを“新着順に”小分けして並べる方法ということで良ろしいでしょうか？

これにはMTの独自タグの知識が必要になるわけですが…

記事の一覧を表示するためのタグとして<MTEntries>～</MTEntries>（このタグに囲まれた内容が新着順にくり返し表示される）タグがあるわけですが、これに或る２つのモディファイアを付加することにより、記事を新着順に並べた場合の特定の記事を抽出することが出来ます。

具体的には、「ある２つのモディファイア」とは、"lastn"と"offset"です。"lastn"とは新着何番目の記事までを表示するかを指定するためのモディファイアであり、"offset"とは新着何番目までの記事を除外するかを指定するためのモディファイアです。

タグの記述例として、

つねに「最新記事」を示すタグの記述方法としては、
<MTEntries lastn="1">～</MTEntries>
になります。

次に新着２番目の記事を示すタグの記述方法としては、
<MTEntries lastn="2" offset="1">～</MTEntries>
となります。

新着３番目の記事を示すタグの記述方法としては、
<MTEntries lastn="3" offset="2">～</MTEntries>
となります。

そして、新着n番目の記事を示すタグの記述方法としては、
<MTEntries lastn="n" offset="n-1">～</MTEntries>
となります。


ここまでは、良ろしいでしょうか？

参考URL：http://www.movabletype.jp/documentation/appendic …

この回答への補足

さっそくの回答、丁寧な解説ありがとうございます。
すこし補足させていただきますと…

新着順、カテゴリ別、月ごと…いかような分類であろうと構わず、
ブログのエントリを「小さい箱（サイズの指定、変更が可能）」でまとめ、
箱を２つ３つほど横一列で並べて小分けにし、
箱の中にエントリが一部（冒頭部分や日付、見出し）が表示される様にしたいのです。

例えば…
http://0riginal.sakura.ne.jp/0001.jpg
▲このurl先の画像の、グレー部分がブログエントリ表示枠（箱づめ）にあたるような
まとめ方、表示方法です

補足日時：2012/05/21 13:07