ブログカスタマイズのブログ

HOME > サイドメニュー > 当ブログのカテゴリ
2005年08月01日
【レイさんのコメントはこちら】
当ブログ右サイドメニューのカテゴリの作成方法です。

当ブログのカテゴリは半手書きで書いています。
カテゴリコンテンツの編集で赤文字のようにif文を用いて書きました。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<div class="sidelink"><a href="<% blog.page_url %>">HOME</a></div>
<% content.header -%>
<% loop:list_category -%>
<% if:category.name eq 'お問い合わせ' %><div class="sidelink"><a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)</div><% /if %>
<% if:category.name eq '記事コンテンツ' %><div class="sidelink" style="color:#333333;">カスタマイズ紹介</div><div class="sidelinkt1"><a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)</div><% /if %>
<% if:category.name eq 'サイドメニュー' %><div class="sidelinkt1"><a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)</div><% /if %>
<% if:category.name eq 'その他' %><div class="sidelinkt2"><a href="<% category.page_url %>"><% category.name | tag_break %></a>(<% category.article_count | __or__ | echo("0") %>)</div><% /if %>


<% /loop -%>
<% content.footer -%>
</div>

スタイルシートで sidelink / sidelinkt1 / sidelinkt2 の3つを定義しました。それぞれ「お問い合わせ」「記事コンテンツ」「その他」の先頭の画像です。後は表示させたいカテゴリを赤文字のif文で記述します。

その他に青文字でカテゴリ一行目にトップページへのリンクも追加しています。

半手書きなので少し面倒ですが、この方法を用いると表示させたいカテゴリだけを表示させることができます。最終日のゴッゴルミニ暦ではこの方法で2つのカテゴリを作成しました。
00:28 | Comments(5) |
この記事へのコメント
2005年08月01日
こんにちは。
管理人様、解説ありがとうございます!
やはりif文を使った手書きだったのですか。
どうやってif分を使って良いのかがわからなかったのですが、解説をして頂いたおかげで私も設置する事が出来ました。
丁寧な解説ありがとうございました。
これからも頑張って下さい。
応援しています!
Posted by レイ at 14:41
2005年08月02日
レイさん、こんばんはー。
出来て何よりです!またやりたい事とかあったら遊びに来て下さい!
Posted by 管理人 at 00:00
2005年08月02日
スタイルシートで sidelink / sidelinkt1 / selinkt2 の3つを定義しました。ってありますが、
スタイルシートもいじるってことですか?
あと2つのカテゴリを表示させたいのですが、
具体的にどうやるのでしょうか?

すみません初心者なんでよくわからなくて…
おねがいします。
Posted by ねこ男爵 at 02:39
2005年08月02日
ねこ男爵さん、こんばんは。sidelink / sidelinkt1 / sidelinkt2 は、
http://www.blogcustomize.com/customize_itemize_sidelink2.html
の設定です。実際には、

.sidelink{
line-height:18px;
padding-left:12px;
background-image:url(image/link.png);
background-repeat:no-repeat;
}
.sidelinkt1{
line-height:18px;
padding-left:20px;
background-image:url(image/t1.png);
background-repeat:no-repeat;
}
.sidelinkt2{
line-height:18px;
padding-left:20px;
background-image:url(image/t2.png);
background-repeat:no-repeat;
}

を定義して、それぞれリンク先頭の三角形画像、T字画像、L字画像を表示させています。

メニューを二つに別ける方法は今からアップするのでお待ち下さーい。
Posted by 管理人 at 23:34
2006年02月09日
とても勉強になります♪
今は、まだ表示画像を探しているところですが、見つけ次第カスタマイズしてみたいと思います。

ありがとうございました。また来ます☆
Posted by 秋仁 at 17:57
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。