MovableType5を使いブログを作っているのですが、
思い通りに行かず四苦八苦しております。
添付した画像の様に、投稿したブログ記事をボックス(枠やらテーブル)で小さくまとめ、三つセットを横並びで配置し、ボックスかテキストに該当する記事へのリンクを積める物(ボックスの中には記事は全て載らない。ボックスサイズに合わせて途中で文章が終わり、リンクで該当記事(全文表示)へ)を作りたいのです。
ブログのエントリを小分けして並べる方法を見つける事すら出来ず、ここに辿り着きました
どなたか知恵を貸していただければ幸いです、よろしくお願いします
No.3ベストアンサー
- 回答日時:
そうでしたか、3つの質問とも、HTMLやCSSに関するある程度の知識がないと理解が難しい部分もあるのですが、簡単に説明しますと…
■箱を2つ3つほど横一列で並べて小分けする枠組みの作り方
<table border="1">
<tr>
<td>コンテンツ1</td><td>コンテンツ2</td><td>コンテンツ3</td>
</tr>
<tr>
<td>コンテンツ4</td><td>コンテンツ5</td><td>コンテンツ6</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
No.2
- 回答日時:
申し訳ございません、私の理解力の至らなさのせいか、今ひとつご質問者様の質問の最大の論点がどこにあるかが把握できていない状態なのですが(汗)、私の頭では論点がなお3つあるような感じがするのです。
すなわち、
■箱を2つ3つほど横一列で並べて小分けする「枠組みの作り方」
■その枠組みの中のそれぞれの枠の中にエントリの「一部」を表示させる方法
■その枠組みの中のそれぞれの「枠全体が個別記事へのリンクになる」ようにする方法
このうちのどれが論点なのかによってお示しする解決策も異なってくるので、場合によってはずいぶん遠回りな問答になる恐れがあります。
なお、もしご質問者様がレイアウトを模倣したいと思っているページがあるのならば、そのページのHTMLソースを解析することで問題が迅速に解決できると思うのですが。
この回答への補足
私の方こそ、こちらの説明が至らぬあまり余計な
お手数をかけてしまい、まことに申し訳有りません…。
先に述べられました
■箱を2つ3つほど横一列で並べて小分けする「枠組みの作り方」
■その枠組みの中のそれぞれの枠の中にエントリの「一部」を表示させる方法
■その枠組みの中のそれぞれの「枠全体が個別記事へのリンクになる」ようにする方法
…は、その三つ全てがまさしく私の「狙い」であり「求めているもの」です。
中でも上2つが、より重要で、枠組そのものでなくとも
個別記事に飛べるリンク(エントリタイトル等)さえ有れば問題ありません
イメージに一番近いページはこちらで、
http://www.triton-cafe.jp/blog
最初に貼った画像の元でもあります。
No.1
- 回答日時:
ブログのエントリを“新着順に”小分けして並べる方法ということで良ろしいでしょうか?
これにはMTの独自タグの知識が必要になるわけですが…
記事の一覧を表示するためのタグとして<MTEntries>~</MTEntries>(このタグに囲まれた内容が新着順にくり返し表示される)タグがあるわけですが、これに或る2つのモディファイアを付加することにより、記事を新着順に並べた場合の特定の記事を抽出することが出来ます。
具体的には、「ある2つのモディファイア」とは、"lastn"と"offset"です。"lastn"とは新着何番目の記事までを表示するかを指定するためのモディファイアであり、"offset"とは新着何番目までの記事を除外するかを指定するためのモディファイアです。
タグの記述例として、
つねに「最新記事」を示すタグの記述方法としては、
<MTEntries lastn="1">~</MTEntries>
になります。
次に新着2番目の記事を示すタグの記述方法としては、
<MTEntries lastn="2" offset="1">~</MTEntries>
となります。
新着3番目の記事を示すタグの記述方法としては、
<MTEntries lastn="3" offset="2">~</MTEntries>
となります。
そして、新着n番目の記事を示すタグの記述方法としては、
<MTEntries lastn="n" offset="n-1">~</MTEntries>
となります。
ここまでは、良ろしいでしょうか?
参考URL:http://www.movabletype.jp/documentation/appendic …
この回答への補足
さっそくの回答、丁寧な解説ありがとうございます。
すこし補足させていただきますと…
新着順、カテゴリ別、月ごと…いかような分類であろうと構わず、
ブログのエントリを「小さい箱(サイズの指定、変更が可能)」でまとめ、
箱を2つ3つほど横一列で並べて小分けにし、
箱の中にエントリが一部(冒頭部分や日付、見出し)が表示される様にしたいのです。
例えば…
http://0riginal.sakura.ne.jp/0001.jpg
▲このurl先の画像の、グレー部分がブログエントリ表示枠(箱づめ)にあたるような
まとめ方、表示方法です
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンクを貼ると文字の色が勝手...
-
mixiにリンクを貼る方法
-
テプラの文字を大きくしたいで...
-
レポート2000字程度なら何文字...
-
つぶれた文字
-
Gmailの表示文字を大きくする方...
-
ブログとHPの併用
-
謎の文字記号 これどうなって...
-
ワードのヘッダーの文字について
-
ライブドアブログで、本文上の...
-
lovelogの全ての記事の文字の色...
-
2KB~4KBって何文字ですか?
-
IE7で変更した文字サイズを固定...
-
Wordでのレポート、文字数行数...
-
javascriptを使うとデザインが...
-
Facebookの文字を大きくする方法
-
Wordで勝手に文字サイズが変わる?
-
文字を消すやつ・・・・
-
CSSのボックスの背景色を交互に...
-
ブログのCSS編集について教...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リンクを貼ると文字の色が勝手...
-
検索避けタグ・・・
-
MYRSSのようにHTMLサイトのRSS...
-
リンクの出し方を基礎から教え...
-
MovableTypeのMTEntriesタグの...
-
liveboor blog タグクラウド設置
-
リンク先にメール作成を入れた...
-
ワードプレスで、投稿一覧ペー...
-
mt5のブログで記事を小分けにし...
-
livedoorブログの本文でタグが...
-
アメブロの日付を消す方法
-
さくらのブログでの時間の非表示
-
ブログ投稿時にタグ名を入力し...
-
ジュゲムブログでのEntryの日付...
-
パソコンを変えたら、アメブロ...
-
mixiにリンクを貼る方法
-
ブログでAA(アスキーアート)...
-
コメントにリンクをつけたい
-
ヤフーブログへのテーブル挿入
-
レポート2000字程度なら何文字...
おすすめ情報