memo.xight.org

日々のメモ

Greasemonkey - Firefoxでユーザーサイドスクリプトを実現するためのエクステンション

Posted on | Tagged : ,

Summary

Firefoxでユーザーサイドスクリプトを実現するためのエクステンション
Amazon - Greasemonkey Hacks (Hacks): 洋書

Reference

Greasemonkey Hacks (Hacks): 洋書
Firefox まとめサイト - Greasemonkey
http://firefox.geckodev.org/?Greasemonkey
Dive Into Greasemonkey
http://diveintogreasemonkey.org/
はてなダイアリー - Greasemonkeyとは
http://d.hatena.ne.jp/keyword/Greasemonkey
はてなグリースモンキー(Greasemonkey)
http://www.hatena.ne.jp/tool/greasemonkey

理想的なサイトマップ

Posted on | Tagged : ,

Summary

<ul>と<li>だけでサイトマップを表現．
lastitem クラスがミソ．

HTML Source

<ul id="linkList">
	<li>
		<a href="/">Home</a>
		<ul>
			<li>
				<a href="/1/">2nd - 1</a>
				<ul>
					<li>
						<a href="/1/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/1/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/1/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="/2/">2nd - 2</a>
				<ul>
					<li>
						<a href="/2/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/2/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/2/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
			<li class="lastitem">
				<a href="/3/">2nd - 3</a>
				<ul>
					<li>
						<a href="/3/1/">3rd - 1</a>
					</li>
					<li>
						<a href="/3/2/">3rd - 2</a>
					</li>
					<li class="lastitem">
						<a href="/3/3/">3rd - 3</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>
</ul>


CSS Source

ul#linkList ul {
	margin-left:0;
	margin-bottom:1em;
	padding-top:0.3em;
	background:url("first-item.png") 20px 0px repeat-y;
	line-height:1;
}

ul#linkList li{
	list-style: none;
}

ul#linkList ul li{
	margin:0.3em 0 0.3em 0;
	padding-left:45px;
	background:url("all-item.png") 20px 0.7em no-repeat;
}

ul#linkList ul li.lastitem{
	background:url("last-item.png") 20px 0.5em no-repeat;
}


画像

first-item.pngの画像
all-item.pngの画像
last-item.pngの画像

Reference

ミツエーリンクス - サイトマップ
http://www.mitsue.co.jp/sitemap/