2015-08-02(Sun)

jsdoc-toolkit のテンプレートを弄ってみる

jsdoc-toolkit のテンプレートネタ。

標準のテンプレートが地味というのは共通した意見だけど、デザインはそんなに嫌いじゃない。
ただ少し使いにくい。

カッコ良さやカワイさは今のところ要らない。
導入の敷居が高いテンプレートは面倒くさい。

ということで標準テンプレートのCSSだけ弄ってみることにした。

全体の位置調整と、メニューのスクロール、記事内の多少のレイアウトを調整してみる。
大して使いやすくならなかった気がするけど(汗、バックアップの意味も込めて晒しとこ。
jsdoc_template01.png

適用はCSSの差し替えのみ。
jsdoc-toolkit\templates\jsdoc\static\default.css

/* default.css */
body
{
font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
width: 74%;
float: right;
margin-right: 2%;

}

.header
{
clear: both;
background-color: #ccc;
padding: 8px;
}

h1
{
font-size: 150%;
font-weight: bold;
padding: 0;
margin: 1em 0 0 .3em;
}

hr
{
border: none 0;
border-top: 1px solid #7F8FB1;
height: 1px;
}

pre.code
{
display: block;
padding: 8px;
background-color: #f0f0f0;
}

#index
{
margin-top: 4px;
float: left;
width: 20%;
min-width: 160px;
position: fixed;
left: 8px;
background-color: #F3F3F3;
padding: 8px;
}

#content
{
width: auto;
}

.classList
{
list-style-type: none;
padding: 0;
margin: 0 0 0 8px;
font-family: arial, sans-serif;
font-size: 1em;
overflow: scroll;
height: 860px;
}

.classList li
{
padding: 0;
margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
font-size:170%;
line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
background-color: #7F8FB1;
color: #fff;
font-size:130%;
text-align: left;
padding: 2px 6px 2px 6px;
border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
vertical-align: top;
padding: 4px;
border-bottom: 1px #7F8FB1 solid;
border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
border-left: 1px #7F8FB1 solid;
width: 140px;
text-align: right;
}

td.attributes, .fixedFont
{
line-height: 15px;
color: #002EBE;
font-family: "Courier New",Courier,monospace;
font-size: 13px;
}

.summaryTable td.nameDescription
{
text-align: left;
font-size: 11px;
line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
line-height: 1.5em;
padding: 4px;
padding-left: 4px;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
list-style: square;
margin-left: 20px;
padding-left: 0;
}

.detailList {
line-height: 20px;
}
.detailList dt i{
color: #f77;
}
.detailList dt b{
color: #00a;
padding: 0 15px 0 5px;
}
.detailList dt {
margin: 10px 0 0 20px;
padding: 6px 0 0 0;
}
.detailList dd {
margin-left: 120px;
}

.detailList .heading
{
font-weight: bold;
padding-bottom: 3px;
margin-left: 0;
border-bottom: 1px #008 solid;
}

.light, td.attributes, .light a:link, .light a:visited
{
color: #086;
font-style: italic;
}

.fineprint
{
text-align: right;
font-size: 10px;
}


オリジナルに上書きするのが手っ取り早い。
若しくはオリジナルを丸ごと myjsdoc とかに複製してそこに上書きする。
jsdoc-toolkit\templates\myjsdoc\static\default.css

複製した myjsdoc テンプレートを常用する時はコンフィグに書くと楽。
jsdoc-toolkit\conf\myconf.conf
// use this template
t: "templates/myjsdoc"

コメントの投稿

管理者にだけ表示を許可する

コメント

プロフィール

nakami

Author:nakami
可愛いテンプレートに似合う俺
うそAチームのスミス大佐

NAVI
カテゴリー
最近の記事
リンク
FC2カウンター
ブログ内検索
RSSフィード
sponsored link