miauのブログ

はてなダイアリー「miauの避難所」をはてなブログに移行しました。 https://zenn.dev/miau に移行しようと考え中

TracWiki の h1、h2、h3 を目立たせる

Trac

Trac の Wiki はデフォルトのデザインだと h1、h2、h3 の区別がつきにくくて困ります。さらに h3 ただの太字みたいに表示されるから、

=== hoge ===

みたいに書くべき見出し項目をただの太字

'''hoge'''

で書いちゃうような人もいたりとか。それじゃ

[[PageOutline]]

とか使っても見出し一覧が見れなくて不便だってば。

ということで、ちゃんと構造化された TracWiki を流行らせるべく、私が使っている h1〜h3 を目立たせる CSS をさらしておきます。

適用するとどうなるの？

変更前は

こんなだったのが、変更後は

こうなります。

PukiWiki の CSS を元にしつつ、さらに h1〜h3 の見分けがつきやすいようにラベル部分の色＆サイズを調整しています。

適用方法

Trac 0.11 での例です。

まず、TracInterfaceCustomization を参考に、/templates/site.html を更新します。特にいじってない場合はコピペで OK です。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      py:strip="">

  <!--! Add site-specific style sheet -->
  <head py:match="head" py:attrs="select('@*')">
    ${select('*|comment()|text()')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('site/style.css')}" />
  </head>

  <body py:match="body" py:attrs="select('@*')">
    <!--! Add site-specific header -->
    <div id="siteheader">
      <!--! Place your header content here... -->
    </div>

    ${select('*|text()')}

    <!--! Add site-specific footer -->
    <div id="sitefooter">
      <!--! Place your footer content here... -->
    </div>
  </body>
</html>

で、/htdocs/style.css を以下のように更新します。

/*
 * Site CSS - Place custom CSS, including overriding styles here.
 */
.wikipage h1
{
	background-color: transparent;
	margin: .2em -10px .2em -18px;
	padding: .3em .3em .15em .5em;
	border: 0px;
	border-left: 8px solid;
	border-bottom: 1px solid;
	border-color: #ffffff #ffffff #999999 #ff7711;
}

.wikipage h2
{
	background-color: transparent;
	margin: .2em -10px .5em -12px;
	padding: .3em .3em .15em .5em;
	border: 0px;
	border-left: 6px solid;
	border-bottom: 1px solid;
	border-color: #fff8f8 #fff8f8 #aaaaaa #ffcc66;
}

.wikipage h3
{
	background-color: transparent;
	margin: .2em -10px .5em -6px;
	padding: .3em .3em .15em .5em;
	border: 0px;
	border-left: 4px solid;
	border-bottom: 1px solid;
	border-color: #fff8f8 #fff8f8 #bbbbbb #cccccc;
}

これだけです。

もっとデザインにこだわりたい方は

ググるともっとかっこいいデザインにしている方はちらほらいますので、そちらを参考にしたほうがいいでしょう。私はその辺のセンスがないので、機械的に目立たせることだけに注力しています。

そういうセンスがない方のために（？）ThemeEnginePlugin で見た目をいろいろ変更できるようになっているようですね。サンプルを集めてくれている方もいたりとか。

ただ、これ見る限り h1〜h3 が目立つかわからなかったので、結局私は使ってません。どなたか試していただけると。