忍者ブログ
TMP*blog
  • « 07月 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •  »
July 24'2017
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

November 17'2006
ひたすら飾る人の為のものかもです。
ツリー化したときのリスト用の飾りを数種作りました。
追加するスタイルシートとかも少々長くなりますが、それでも飾るのよ!と言う方はドウゾ。
わたしはそういう派です。
見えないオシャレにこだわる人向きです(いえ見えるんですけどそのくらい些細な飾りです)

メニューのフォントサイズ10ピクセル専用です。
リストの最後の飾り画像をそれぞれのリストごとに分けれます。

画像はお持ち帰りでドウゾ(色の変更や加工とかもご自由に)

ツリーの部分用
リスト最後用


使い方やスタイルシートについては長くなるので追記からどうぞ。
見本は例によってウチのサイドバーです。
カテゴリーと記事リストの最後の部分にそれぞれ違う画像を使ってみました。
ツリー化についてはニンブロラボ様で紹介されているものを基準にしています。
まずは通常のツリー化準備をしてください。
ニンブロラボ様でとても詳しく説明が書かれていますので、「スタイルシートの追加」部分までを説明の通りに行って下さい

最後に追加するスタイルシートを下のものに変更します。ニンブロラボ様で紹介されているスタイルシートの内容を書き換えても勿論OKです。
フォントサイズ10px用に素材が作ってありますので、その場合はフォントサイズの指定だけはするようにしてください。また、できれば行間の指定もしておくとベストです。
行間(line-height)は140%くらいが丁度いいかんじです。

/*--ツリーの部分--*/
div#newentrylist ul.tree li, div#categorylist ul.tree li, div#commentlist ul.tree li, div#tblist ul.tree li, div#linkslist ul.tree li{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.shinobi.jp/list_line.gif);
background-repeat: no-repeat;
background-position: left top;
}

/*--新記事リスト最後--*/
div#newentrylist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}
/*--カテゴリーリスト最後--*/
div#categorylist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}
/*--コメントリストー最後--*/
div#commentlist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}
/*--トラックバックリスト最後--*/
div#tblist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}
/*--リンクリスト最後--*/
div#linkslist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}
/*--エントリーリスト最後--*/
div#entrylist ul.tree li.end{
margin: 0;
padding: 2px 0 0 11px;
font-size: 10px;
line-height: 140%;
background-image: url(http://file.xxxx.blog.shinobi.jp/list_drop.gif);
background-repeat: no-repeat;
background-position: left top;
}

赤文字部分はアップロードした画像のアドレスに書き換えてください。
ツリー最後の部分の画像はお好きなものをお選び下さい


で、なんでこんなにスタイルシートが長いのかと言うと…
リストの最後の飾りを項目ごとに変更できるようにしてあるからです。
「ツリーの部分」は今回は統一してありますが、これも分ければそれぞれ違う画像にできます。
項目ごとに別の画像を用意してそれぞれ指定すれば全てのリストを違う見た目にするのも簡単なので、ちょっとしたオシャレ心にどうぞ(笑)
リスト化しない項目の分は追加しなくても大丈夫なので、無駄にスタイルシートを長くしたくない方は使用しない項目の部分は削除してしまってください。

ウチのテンプレートをご利用の場合や、表示がちょっとおかしな場合は「忍者ブログでメニューをツリー化する場合の注意点」のほうもご確認くださいませ。

関連記事
忍者ブログでメニューをツリー化する場合の注意点
ツリー化の飾り色違い(グレー)

拍手

PR
Post your Comment
・メールアドレスは入力しても管理画面でしか表示されないようにしてあります。
・テンプレートのカスタマイズはなるべく自力でお願いします。
・テンプレートに関するお問い合わせの際はブログアドレスの記入をお願いします。
・アダルトな内容、英語のみの内容のコメント、トラックバックはできません。
・不適切な書き込みは管理人の独断で削除させて頂きます。あらかじめご了承ください。
Name:
Title:
Mail:
URL:
Color:
Comment:
pass: emoji:Vodafone絵文字 i-mode絵文字 Ezweb絵文字
とろ~りとゆら~りと
画像お借りします。
line-heightがうまくいかなかったんですが、この記事を参考にうまくいきました。
ちょっと文字が離れ気味なんですがまた修正しようと思ってます。
ありがとうございました。
ちかこ: URL 2006.12/19(Tue) 00:20 Edit
Re:とろ~りとゆら~りと
ちかこさん初めまして。
テンプレートによっては表示があわないこともあるかおしれませんが、色々いじってみてやってくださいね~
画像もつかってくださってこちらこそありがとうです^^
管理人:ころ ・2006/12/23(Sat)
はじめまして
こちらのサイトにお邪魔して初めて色んなカスタマイズが出来るのをしりました。
ニンブロラボ様のサイトにも初めて行きました。とても感謝しています。ありがとうございました。
こちらの画像listlineとlistheartお借りしました。
またお邪魔すると思いますが宜しくお願いします
ゆりん。: URL 2007.01/30(Tue) 17:11 Edit
trackback
・言及リンクを含まないトラックバック、記事内容が英語のみのトラックバックはできません。
この記事のトラックバックURL:
[117] [119] [115] [114] [113] [112] [111] [110] [109] [107] [106
«  BackHOME : Next »

About this site
  • 「忍者ブログ」と「忍者式メールフォーム」のテンプレートを作成配布しています。
search this site
Web clap!
拍手する

カスタマイズに関する質問を拍手で送信するのはどうかご遠慮ください。

PR

» Link Menu

» Other Menu

RSS
あわせて読みたい
Recommend


line

相変わらず常備するお気に入りの「牛とろフレーク」最近また入手困難で、確保に必死です^-^;


TMP*blog@koro wrote all articles.
TemplateDesign by TMP photo by たいしたことないもの

忍者ブログ[PR]