====== カスタマイズ その4 ======
===== 見出しの変更 =====
見出しh1~h6をデザインに合わせ修正していきます。
/* general headline setup */
div.dokuwiki h1,
div.dokuwiki h2,
div.dokuwiki h3,
div.dokuwiki h4,
div.dokuwiki h5 {
color: __text__;
background-color: inherit;
font-size: 100%;
font-weight: normal;
margin: 0 0 1em 0;
padding: 0.5em 0 0 0;
border-bottom: 1px solid __border__;
clear: left;
}
/* special headlines */
div.dokuwiki h1 {font-size: 160%; margin-left: 0px; font-weight: bold;}
div.dokuwiki h2 {font-size: 150%; margin-left: 20px;}
div.dokuwiki h3 {font-size: 140%; margin-left: 40px; border-bottom: none; font-weight: bold;}
div.dokuwiki h4 {font-size: 120%; margin-left: 60px; border-bottom: none; font-weight: bold;}
div.dokuwiki h5 {font-size: 100%; margin-left: 80px; border-bottom: none; font-weight: bold;}
この辺からは自分の趣味にあわせ好き勝手編集していきます。
div.dokuwiki h1,h2,h3,h4,h5 {
padding: 1px 0px 1px 8px;
font-weight: bold;
color: #660000;
border-color: #dc143c;
}
div.dokuwiki h1 {
margin: 0px 0px 8px 0px;
font-size: 14px;
bac2kground-color: #ffc0cb;
border-style: solid;
border-width: 1px 1px 1px 12px;
}
div.dokuwiki h2 {
margin: 0px 0px 8px 20px;
font-size: 12px;
background-color: #ffc0cb;
border-style: solid;
border-width: 1px;
}
div.dokuwiki h3 {
margin: 0px 0px 8px 40px;
font-size: 12px;
background-color: #ffdddd;
border-style: solid;
border-width: 1px 0px 1px 0px;
}
div.dokuwiki h4 {
margin: 0px 0px 8px 60px;
color: #aa143c;
font-size: 12px;
background-color: #ffeeee;
border-style: solid;
border-width: 0px 0px 1px 0px;
border-color: #dc143c;
}
div.dokuwiki h5 {
margin: 0px 0px 8px 80px;
color: #aa143c;
font-size: 12px;
background-color: #ffeeee;
border-style: dotted;
border-width: 0px 0px 1px 0px;
border-color: #dc143c;
}
インデントも修正します。
/* indent different sections */
div.dokuwiki div.level1 { margin-left: 3px; }
div.dokuwiki div.level2 { margin-left: 23px; }
div.dokuwiki div.level3 { margin-left: 43px; }
div.dokuwiki div.level4 { margin-left: 63px; }
div.dokuwiki div.level5 { margin-left: 83px; }
日本語の文章の場合は、見出しの後は段落を下げたほうが見やすくなるので、段落を調整します。
div.dokuwiki div.level1,div.level2,div.level3,div.level4,div.level5 {
padding: 0px 0px 1em 0px;
}
div.dokuwiki div.level1 {
margin: 0px 0px 0px 20px;
}
div.dokuwiki div.level2 {
margin: 0px 0px 0px 40px;
}
div.dokuwiki div.level3 {
margin: 0px 0px 0px 60px;
}
div.dokuwiki div.level4 {
margin: 0px 0px 0px 80px;
}
div.dokuwiki div.level5 {
margin: 0px 0px 0px 100px;
}
===== リストの変更 =====
リスト表示も字下げ量が多すぎるので修正していきます。
/* unordered lists */
div.dokuwiki ul {
line-height: 1.5em;
list-style-type: square;
list-style-image: none;
margin: 0 0 1em 3.5em;
color: __text_alt__;
}
/* ordered lists */
div.dokuwiki ol {
line-height: 1.5em;
list-style-image: none;
margin: 0 0 1em 3.5em;
color: __text_alt__;
font-weight: bold;
}
サイドメニューは別個に設定します。
/* unordered lists */
div.dokuwiki ul {
line-height: 1.5em;
list-style-type: disc;
list-style-image: none;
margin: 0 0 1em 1.5em;
color: #cb143c;
}
/* ordered lists */
div.dokuwiki ol {
line-height: 1.5em;
list-style-image: none;
margin: 0 0 1em 2em;
color: #cb143c;
font-weight: bold;
}
===== サイドメニュー専用の変更 =====
サイドメニューはページとは別の設定を行います。
#ydlBoxMenu h1 a {
margin: 0 0 0 12px;
color: #fff !important;
}
#ydlBoxMenu h1 {
margin: 0;
padding: 0;
width: 212px;
height: 24px;
border-style: none;
background: __background__ url(ydlimgs/category.png) no-repeat top;
text-shadow: 1px 1px 1px #000;
}
#ydlBoxMenu ul {
font-size:12px;
line-height: 1.3em;
list-style-type: disc;
list-style-image: none;
margin: 0 0 0 0.5em;
color: #cb143c;
}