Bloggerでサイトマップ（CSS/HTML)用２列メニューを作成する

ここでの「サイトマップ」とは…

クローラに読ませるための sitemap.xml ではなく…

サイトのナビゲーションとしての…

CSS / HTML で書くメニューの事です…

オイラ自身、他サイトを覗く際に…

検索エンジンでヒットした記事が素晴らしく…

他の記事も読んでみたい…

と、思っても…

サイトマップが設置されていなければ…

サイトの全体像が把握し辛いので…

「や～めたッ」なんて事も度々…

…なので…

作りましょッ…サイトマップ…

手作業で…（￣ー￣）邪笑

…この時点で…

半数の方は脱落しそうですね…

巷間「面倒臭い」などと思われているようですし…

設計だけしてしまえば…後は…

記事を書く度にリンクを追加するだけなんですがねぇ…

サイトマップに載せたい記事も選別できますし…

載せる順序も思いのままですし…

また…前置が長くなりました…いきますッ

実際の表示はヘッダーかサイドバーのタブメニューからどうぞ…
現在は別のサイトマップを表示させています…

２列メニューサンプル

解りやすいようにサンプルを使います…

サンプル ページ…

Site Map / style-List  


単純な「ul 要素」の入れ子構造ですが…

間違えやすいので…

上記画像と連動させて下記 HTML では…

色分けして書いてあります…

３階層目の子要素（４階層目）があるリストは…

HTML で太字、斜体にしています…

class 名はお好きなように…

項目も適宜増減して下さい…

CSS では…

サイトマップの幅を表示領域の 96% にして…

区切り線と同色（#1E90FF）の枠線で囲み…

背景色（#222222）を指定しています…

２階層目の ul 要素に float を指定して横に２列並べ…

区切り線は１列目の背景に設定して y 方向に伸ばしています…

区切り線の仕様上１列目の高さを…

２列目より高くなるように配置して下さい…

表示位置は margin で調節して下さい…

２階層目以降のインデント幅は…

左 padding で各 10px とっています…

使用画像は５個です…
 １階層目のリストマーク
 ２階層目のリストマーク
 ３階層目のリストマーク
 ４階層目のリストマーク
区切り線画像

サイトマップ用２列メニューの「HTML」です…

サイトマップ用２列メニュー「HTML」

<ul class="sitemap">
<li><a href="URL"><span style="color: #F15B55; font-size: 16px;">Home（1階層目）</span></a>
<div class="container2 clearFix">
<ul class="section separator">
<li><a href="URL"><span style="color: #1E90FF;">Example-1（2階層目）</span></a>
<ul>
<li><a href="URL">3階層目-1</a></li>
<li><span style="color: #BDB76B; font-weight: bold; font-style: italic;">3階層目-2</span>
<ul>
<li><a href="URL">4階層目-1</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL"><span style="color: #7777FF;">Example-2（2階層目）</span></a>
<ul>
<li><a href="URL">3階層目-3</a></li>
<li><span style="color: #BDB76B; font-weight: bold; font-style: italic;">3階層目-4</span>
<ul>
<li><a href="URL">4階層目-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul class="section">
<li><a href="URL"><span style="color: #8AC75A;">Example-3（2階層目）</span></a>
<ul>
<li><a href="URL">3階層目-5</a></li>
<li><span style="color: #BDB76B; font-weight: bold; font-style: italic;">3階層目-6</span>
<ul>
<li><a href="URL">4階層目-3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL"><span style="color: #008080;">Example-4（2階層目）</span></a>
<ul>
<li><a href="URL">3階層目-7</a></li>
<li><span style="color: #BDB76B; font-weight: bold; font-style: italic;">3階層目-8</span>
<ul>
<li><a href="URL">4階層目-4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>

サイトマップ用２列メニューの「CSS」です…

サイトマップ用２列メニュー「CSS」

/* Site Map
------------------------------ */
.sitemap {
width: 96%;
margin: 0;
padding: 0;
background: #222222;
font-weight: bold;
font-style: italic;
list-style-type: none;
border: 1px #1E90FF solid;
}
.sitemap ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.sitemap li {
margin: 5px 0 0 5px;
padding: 0 0 0 15px;
background: url(１階層目のリストマークのURL) no-repeat left top;
line-height: 120%;
}
.sitemap .container2 {
width: 100%;
margin-top: 5px;
}
.sitemap .section {
width: 49.9%;
float: left;
}
.sitemap .separator {
background: url(区切り線画像のURL) repeat-y right top;
}
.sitemap .section li {
margin: 5px 20px 5px 0;
padding: 0 0 0 10px;
background: url(２階層目のリストマークのURL) no-repeat 0 3px;
}
.sitemap .section ul {
margin: 3px 0 0 8px;
font-weight: normal;
font-style: normal;
font-size: 95%;
}
.sitemap .section ul li {
margin: 0 0 3px 0;
padding: 0 0 0 10px;
background: url(３階層目のリストマークのURL) no-repeat 0 3px;
}
.sitemap .section ul li li {
padding: 0 0 0 10px;
background: url(４階層目のリストマークのURL) no-repeat 0 3px;
}
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

Tips Universal Sidebar Main Footer Current-Label : Header