本業のホームページ制作が忙しくて、更新が滞ってすみません。
今日は、ガンガンと更新していきます。

この「ホームページ制作の現場」ブログは、ライブドアブログで作られていますが、おそらくライブドアブログを使われている方からしたら、「これ、どうやってるの？」という機能がポロポロみられると思います。
今日は、その方法をお知らせしましょう。

1）最新の記事を表示、他をタイトルのみにする方法

2）パンくずリストの作り方

まず「1）最新の記事を表示、他をタイトルのみにする方法」ですが、独自タグの
<IndexArticlesLoop>
<IfFirstArticle>
<Else>
</IfFirstArticle>
</IndexArticlesLoop>
を使っています。
<IndexArticlesLoop>と</IndexArticlesLoop>はどなたのテンプレートにも表示されているでしょう、記事の繰り返しですね。
記事を繰り返し表示する箇所に使います。
ブログの設定で記事を何件まで表示するかの設定があると思いますが、うさこは「11件」としていますので11回繰り返されます。

<IfFirstArticle>と</IfFirstArticle>は初めの記事に対して行われる表示になります。
<Else>はそれ以外、つまり2件目から11件目について行われる表示です。

<IfFirstArticle>
一般的な記事の表示
<Else>
2〜11件目までのリスト表示
</IfFirstArticle>
とすることで、この「ホームページ制作の現場」のトップページのような表記となるのです。
すっきりして綺麗なので気に入っています。


次に「2）パンくずリストの作り方」ですが、こちらはカンタンです。
カテゴリページは
<ul class="crumb"><li><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></li><li>&nbsp;>&nbsp;<$CategoryName ESCAPE$></li></ul>
月別ページは
<ul class="crumb"><li><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></li><li>&nbsp;>&nbsp;<$MonthLabel$></li></ul>
詳細ページは
<ul class="crumb"><li><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></li><li>&nbsp;>&nbsp;<IfArticleCategory1><a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a></IfArticleCategory1></li><li>&nbsp;>&nbsp;<$ArticleTitle ESCAPE$></li></ul>
としています。

あとはcssで
ul.crumb{
font-size: 80%;
background-color: #d8c1d5;
margin-bottom: 30px;
padding: 3px; }
ul.crumb li {
display: inline; }
と設定しています。
１行で表示するにはliに対して、display: inline;を忘れないで下さいね。
 
↓役に立ったぞ、という方はクリックお願いします。

2007年09月21日18:36