掲載年月日：2005年04月23日
トップ＞パソコン機材＞カテゴリー別表示を一覧表表示に変更
カテゴリー別表示を一覧表表示に変更
libedoor Blogの使用して１年４ヶ月余り。このブログのTipsで一番参考にさせていただいているのが「パンパでガウチョ」さんのブログです。
膨大な量のカテゴリーページが非常にすっきりしたと思います。最初の読み込みに少し時間が掛かかるのが欠点です。追記にＨＴＭＬを記載します。
パンパでガウチョ：Blogレイアウトの変更（2005年04月20日）との記事を見つけて、早速、このブログでもまねをしてみました。「パンパでガウチョ：livedoor Blogの特殊タグ一覧」の記事を参考にしながら、カテゴリー別のページのＨＴＭＬを編集しました。
あまりにも記事数の多くなったカテゴリーがあるので、カテゴリー別記事ページを記事のタイトルのみの表示に変えました。
本来なら、番号を付与した同名のカテゴリを新たに作り、分割したほうがいいのかもしれませんが、それはそれで過去記事の編集し直しやら、過去カテゴリーへのリンク付けなど、面倒な作業が付随するので見送りました。
膨大な量のカテゴリーページが非常にすっきりしたと思います。最初の読み込みに少し時間が掛かかるのが欠点です。追記にＨＴＭＬを記載します。
カテゴリーを表示するHTMLの変更箇所
カテゴリーリストの表示を整えるためのCSSの追加箇所
<div class="blog">
<DIV class="categoryname">カテゴリー：<$CategoryName ESCAPE$>のインデックス</DIV>
<UL>
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<li class="titlelist">
<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></A> （<a href="<$ArticlePermalink$>"></a> <$ArticleDate$>
<IfArticleAllowComment> <a href="<$ArticlePermalink$>#comments">CM</a>:<$ArticleCommentCount$></a>
</IfArticleAllowComment>
<IfArticleAllowPing> <a href="<$ArticlePermalink$>
#trackback">TB:<$ArticlePingCount$></a>
</IfArticleAllowPing>）
</li>
</CategorizedArticlesLoop>
</UL>
<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
</div>
<DIV class="categoryname">カテゴリー：<$CategoryName ESCAPE$>のインデックス</DIV>
<UL>
<CategorizedArticlesLoop>
<$TrackBackAutoDiscovery$>
<li class="titlelist">
<a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></A> （<a href="<$ArticlePermalink$>"></a> <$ArticleDate$>
<IfArticleAllowComment> <a href="<$ArticlePermalink$>#comments">CM</a>:<$ArticleCommentCount$></a>
</IfArticleAllowComment>
<IfArticleAllowPing> <a href="<$ArticlePermalink$>
#trackback">TB:<$ArticlePingCount$></a>
</IfArticleAllowPing>）
</li>
</CategorizedArticlesLoop>
</UL>
<div class="pagetop"><a class="aposted" href="#top">このページの上へ▲</a></div>
</div>
カテゴリーリストの表示を整えるためのCSSの追加箇所
.titlelist{
padding: 5px 10px 3px 5px;
margin-bottom: 5px;
vertical-align: super;
list-style: url(http://www.jsdi.or.jp/~y_ide/16_midashi.gif);
}
.categoryname{
color: #000080;
border: solid #000040 1px;
font-weight: bold;
font-size: medium;
background: #F0FFFF;
vertical-align: middle;
padding: 5px 50px 5px 10px;
margin: 10px 50px 20px 0px;
}
padding: 5px 10px 3px 5px;
margin-bottom: 5px;
vertical-align: super;
list-style: url(http://www.jsdi.or.jp/~y_ide/16_midashi.gif);
}
.categoryname{
color: #000080;
border: solid #000040 1px;
font-weight: bold;
font-size: medium;
background: #F0FFFF;
vertical-align: middle;
padding: 5px 50px 5px 10px;
margin: 10px 50px 20px 0px;
}
最新ニュース読み込み中
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/domax2004/19748435
この記事へのコメント
初めまして、突然申し訳ありません。
この度、「週刊！ブログランキング」を開設致しました。
貴サイト様を拝見させて頂きまして大変興味深いブログだと感じました。
是非、当ランキングに登録して頂けませんでしょうか？
http://kutsulog.net/
初期の登録運営者様はライバルも少なく、ランキング上位サイトとして後々の訪問者数が期待できる事と思います。
当サイトも登録をお願いするだけのランキングサイトではなく、SEO対策・メルマガ・雑誌広告など広範にサイトプロモーションを行っております。
(ping受信に対応しておりますので設定して頂ければ投稿記事タイトルに反映されます)
宜しくお願い致します。
この度、「週刊！ブログランキング」を開設致しました。
貴サイト様を拝見させて頂きまして大変興味深いブログだと感じました。
是非、当ランキングに登録して頂けませんでしょうか？
http://kutsulog.net/
初期の登録運営者様はライバルも少なく、ランキング上位サイトとして後々の訪問者数が期待できる事と思います。
当サイトも登録をお願いするだけのランキングサイトではなく、SEO対策・メルマガ・雑誌広告など広範にサイトプロモーションを行っております。
(ping受信に対応しておりますので設定して頂ければ投稿記事タイトルに反映されます)
宜しくお願い致します。
Posted by 週刊！ブログランキング管理人 at 2005年04月23日 09:55
こんにちは。
井手さんの記事を見て、$CategoryName ESCAPE$を使うのを忘れていたことに気づきました。
どうもありがとうございます。
それと…ご提示のHTMLテンプレートですが、堅いことを申せば…。
(1) < ← < > ← >と書きます。
(2) ulはあまり単独では用いられないような気がします。用いてもあながち間違いではないのでしょうが…。
むしろ、Loopの外にulを追い出して各タイトルをliで括ってやったほうがHTMLマークアップの趣旨にかなうと思います。
ただ、これだと行が詰まった感じになるのと、デフォルトで行頭に●が付くので、classを設け、liに対して上下marginと"list-style-type"をスタイルシートで指定しなければなりませんが…。
<ul>
<CategorizedArticlesLoop>
<li class="titlelist">…</li>
</CategorizedArticlesLoop>
</ul>
li .titlelist{
list-style-type:none;
margin:8px 5px 8px 15px;
}
井手さんの記事を見て、$CategoryName ESCAPE$を使うのを忘れていたことに気づきました。
どうもありがとうございます。
それと…ご提示のHTMLテンプレートですが、堅いことを申せば…。
(1) < ← < > ← >と書きます。
(2) ulはあまり単独では用いられないような気がします。用いてもあながち間違いではないのでしょうが…。
むしろ、Loopの外にulを追い出して各タイトルをliで括ってやったほうがHTMLマークアップの趣旨にかなうと思います。
ただ、これだと行が詰まった感じになるのと、デフォルトで行頭に●が付くので、classを設け、liに対して上下marginと"list-style-type"をスタイルシートで指定しなければなりませんが…。
<ul>
<CategorizedArticlesLoop>
<li class="titlelist">…</li>
</CategorizedArticlesLoop>
</ul>
li .titlelist{
list-style-type:none;
margin:8px 5px 8px 15px;
}
Posted by kyorecoba at 2005年04月23日 11:42
初めまして、人気アニメ 動画集！のはるみと申します。
動画主体のブログを作ったのですが、
カテゴリーのページをインデックス化したいと思い、
色々探していたところ、こちらにたどり着きました。
まさに、私の希望のHTMLがあり、早速変更してみました。
我流でやっていますので、おかしなところがあると思いますが、
ご指摘いただけると助かります。
因みに、貴方のHTMLを参考にさせていただいたブログは
↓こちらです。
<a href="http://blog.livedoor.jp/anime__/" target=_blank>人気アニメ 動画集！</a>
本当に助かりました。
ありがとうございました。
動画主体のブログを作ったのですが、
カテゴリーのページをインデックス化したいと思い、
色々探していたところ、こちらにたどり着きました。
まさに、私の希望のHTMLがあり、早速変更してみました。
我流でやっていますので、おかしなところがあると思いますが、
ご指摘いただけると助かります。
因みに、貴方のHTMLを参考にさせていただいたブログは
↓こちらです。
<a href="http://blog.livedoor.jp/anime__/" target=_blank>人気アニメ 動画集！</a>
本当に助かりました。
ありがとうございました。
Posted by 人気アニメ 動画集！ at 2007年01月27日 16:17
