カスタマイズ その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;
}
dokuwiki/customize4.txt · 最終更新: 2018/03/18 09:56 (外部編集)
 
特に明示されていない限り、本Wikiの内容は次のライセンスに従います: CC Attribution-Share Alike 4.0 International
Recent changes RSS feed Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki