Jimdoのサイトマップページのブログ記事一覧を見やすくする方法

Jimdoには、サイトマップページを自動生成してくれる大変便利な機能があります。
このサイトマップページは、新たにページやブログ記事を増やすと、こちらが何も操作しなくても自動的に更新されていきます。基本、放置です。それなのに、SEO的にもユーザビリティ的にも良いものとされるサイトマップページをどんどん更新してくれる訳です。ありがたいですね。

しかし、問題がひとつ。
ユーザーはサイトマップページのコンテンツ部分を編集できません。

そのため、例えば「サイト内ページ用のサイトマップだけ表示してブログ記事用サイトマップはいらない」というカスタマイズができません。
また、ブログ記事は書けば書くだけサイトマップページに掲載されるため、サイトマップページが長くなってしまいます。

情報がたくさん載っている分には問題ないので、長ーーくなってしまう見た目を整えたいと思います。

サイトマップページのHTML

※一部省略し簡略化しています。

<div id="content_area">
	<h1>サイトマップ</h1>
	<ul class="sitemap">
		<li><a href="/">ホーム</a></li>
		<li><a href="/page1/">ページ1</a></li>
		<li><a href="/page2/">ページ2</a></li>
		<li><ul class="sitemap">
			<li><a href="/page2/page2-1">ページ2-1</a></li>
			<li><a href="/page2/page2-2">ページ2-2</a></li>
		</ul></li>
		<li><a href="/page2/">ページ3</a></li>
	</ul>
	<h1>ブログ</h1>
	<ul class="sitemap">
		<li><a href="/blog/">ブログ記事1</a></li>
		<li><a href="/blog/">ブログ記事2</a></li>
		<li><a href="/blog/">ブログ記事3</a></li>
	</ul>
</div>

それぞれ独自IDがふられてないのでclass「sitemap」を使う必要があります。しかし、このclass、このページ内のすべての<ul>に付加されています。そのため、ちょっとめんどうくさいんですが、以下のように書きます。

追記するCSS

ul.sitemap:last-child {
	overflow: auto;
	height: ○○px; /*任意の値*/
}
#content_area ul.sitemap li ul {
	overflow: visible;
	height: auto;
}

ul.sitemap:last-child の記述のみでは、サイト内ページのサイトマップの第二階層、第三階層にもCSSが効いてしまうため、#content_area ul.sitemap li ul の指定を以って打ち消しています。
※heightはお好みの高さを指定してください。

これにより、ブログ記事一覧にoverflowがかかり、指定の高さのボックス内でスクロールできるようになります。

<header>内に追記する場合

管理メニュー > 設定 > ヘッダー部分を編集
編集エリア下部に<script>タグではさんで追記します。

<style type="text/css">
CSS
</style>

独自レイアウトを使用している場合

管理メニュー > レイアウト > 独自レイアウト > CSS
編集エリア下部にそのまま追記します。

「うわっ、サイトマップページなっがぁ…」って思われた場合、ぜひご活用ください。