Top > デザイン変更(HAIK) > main.cssの書き換え

main.cssの書き換え

 最初にお断りしておきますが、見ての通り、私は、HAIKの持つ機能の中でも一番簡単な機能の類しか使ってはいないので、ここに書いた改造を実施すると、私のあずかり知らぬところで、思わぬ影響が表れてくるかもしれません。そのことを、お判りいただいた上で、以下を参考にしてください。
 この記事を参考にしていかなる悪影響が出ても、Nekoは責任を負いかねます。

本文・見出しの文字の大きさ調整

  haik_seedは、本文の文字が小さいわりに、見出しのフォントが異様に大きいので、調整しました。

/* フォントのサイズ調整 */
h1 {
 font-size: 26px
}
h2 {
 font-size: 20px
}
h3 {
 font-size: 19px
}
h4 {
 font-size: 18px
}
@media(max-width:767px) {
 h1 {
  font-size: 25px
 }
 h2 {
  font-size: 19px
 }
 h3 {
  font-size: 17px
 }
 h4 {
  font-size: 17px
 }
}

h1 {
 margin: 30px 0 25px
}
h2 {
 margin: 30px 0 25px
}
h3 {
 margin: 20px 0 15px
}
h4 {
 margin: 15px 0 10px
}
p {
 font-size: 15px
}
p {
 margin-bottom: 0px
}

@media(max-width:767px) {
 p {
  margin-bottom: 0px
 }
}
/* フォントのサイズ調整 終わり */

(上のソースコードは、ホームページで表示するために、全角のスペースを入れているので、そのままコピーしてもうまくは行きません。このページのソースコードを使う場合は、全角スペースを半角スペースに全部置換してから使ってください。)

ページ目次の中央寄せ

 #contentsで表示されるメニューの幅が100%なので、本文と区別しにくく、とても見にくいです。
 これのスタイル指定がmain.cssの中に見当たらなかったので、QHMのplugin.cssから、該当部分のスタイル名を見つけて、それで指定したら、とりあえずそれで成形できているみたいです。
 中に入る見出しの最大幅によって、幅が自動調整されます。
 上下に入る点線を消して、四角で囲みたかったのですが、その方法はまだ発見できていません。

/* ページ目次の中央寄せ */
div.contents{
 border: hidden;
 padding:0px;
 margin:0 auto;
 display: table;
}
div.contents:before{
 content:"もくじ";
 color:#fff;
 background-color:#999;
 font-size:12px;
 font-weight:bold;
 line-height:1em;
 display:block;
 width:4.5em;
 text-align:center;
 padding:2px;
}

メインコンテンツ見出し H2(*) 背景画像表示

 メインコンテンツの見出し(*)の背景に画像を入れ、H3(**)には、左に少し色違いのボーダーを入れてアクセントにします。H4(***)も、ある程度存在感がある様に、上に合わせて調整しました。
 このページの背景画像は、窓の社から拾ってきた AquaMaker2 というフリーソフトを使い、640×40ドットのサイズで作っています。
 これをホームページアドレス直下のicon_source に配置しました。
 background-size: 100% 100%; と設定することで、幅の狭い携帯の画面でも、端が途切れることがなくなりました。  

/* L5453 メインコンテンツ見出し H2 背景画像表示*/
.haik-palette-brown .haik-container h2 {
 color: #fff;
/* 画像非表示用*/
/* background-color: rgba(132, 91, 76, .75);*/
/* border-left: 15px solid rgba(95, 69, 61, .75);*/
/* box-shadow: 1px 2px 0 #e9e9e9;*/
/* padding: 5px 5px 5px 15px;*/
 /* 背景画像設定 */
 background-image:url(icon_source/h2_bg.png);
 background-size: 100% 100%;
 background-repeat:no-repeat;
 border:0px;
}
/* L5477 メインコンテンツ見出し H3(**) */
.haik-palette-brown .haik-container h3 {
 color: #fff;
 border-left: 10px solid #FFD700;
 background-color:#8db6cd;
 text-indent: 5px;
}
/* メインコンテンツ見出し H4 */
.haik-palette-brown .haik-container h4 {
 font-size: large ;
 font-weight:bold;
 color: #00bfff;
 text-indent: 5px;
 border-top: 2px solid #8db6cd;
 border-bottom: 2px solid #8db6cd;
}

menuバー H2(*) 見出し成形

/* L5544 目次H2 成形 */
.haik-palette-brown .haik-menu h2, .haik-palette-brown .haik-article-menu h2 {
 color: #444;
 font-size: larger ; /* 16px; */
 border-bottom: 1px solid #ededed;
/* *****追加********* */
 text-align:center;
 font-weight: bolder;
 text-shadow: #67B0E0 3px 1px;
}

menuバー 見出しを黒に H4(***)字下げ

 menuバーで、すべてのレベルの見出しが左寄せなので、どれが下位項目なのかとても分かりにくいです。そこで、H4を少し字下げします。
 H3(*)には、上下に区切り線を入れ、H4(**)の区切り線は無しにします。
 ついでに、色が薄くてメニューが見にくいので、文字を本文のテキストと同色にする。

/* L5566 H3 文字色を黒 上に区切り線を入れる */
.haik-palette-brown .haik-menu h3, .haik-palette-brown .haik-article-menu h3 {
 font-size: 14px;
 color: #333;
 padding: 5px 15px;
 margin: 0;
 border-top: 1px solid #ededed;
}
.haik-palette-brown .haik-menu h3 a, .haik-palette-brown .haik-article-menu h3 a {
 color: #333;
 display: block;
}
/* L4569 目次H4(***) 字下げ */
.haik-palette-brown .haik-menu h4, .haik-palette-brown .haik-article-menu h4 {
 font-size: 14px;
 color: #333;
 padding: 5px 15px;
 /*****右に字下げ*** */
 margin-left: 15px;
 display: block;
 /*****区切り線を無しにする*** */
 border:0;
}
.haik-palette-brown .haik-menu h4 a, .haik-palette-brown .haik-article-menu h4 a {
 color: #333;
}

フッターの大きさ調整

 配布時のままでは、フッタの表示が、行数が少ない場合でも異様に高さを取るので、高さの表示調整をしました。
 文字の色も薄すぎるので、ついでにもうちょっと濃くしてあります。
 HTMLの基本がよくは分かっていないので、いまだになぜ枠がこのように縦長になってしまうのか理屈が分かってはいません。
 現象としては、marginとpaddingとを両方指定してやらないと、思う高さになってはくれないようです。

/* L5961 footer 高さを縮める */
/* **** フッタ大きさ調整 ***** 枠 *********** */
.haik-palette-brown .haik-footer {
 margin:0px;
 padding: 0px 0;
}
.haik-palette-brown .haik-footer-border-wide {
 margin:3px;
 padding: 3px;
}
.haik-palette-brown .haik-footer-border {
/* margin:5px;*/
 padding: 10px;
 border-top: 1px gainsboro solid;
}
/* **************************** */
.haik-palette-brown .haik-footer h2, .haik-palette-brown .haik-footer h3, .haik-palette-brown .haik-footer h4 {
 color: #795548;
 padding: 0px 0;
 margin:0px;
}
.haik-palette-brown .haik-footer p {
 font-size: 14px;
 color: #795548;
 padding: 0px 0;
 margin:0px;
}
@media(max-width:767px) {
 .haik-palette-brown .haik-footer p {
  font-size: 15px;
  color: #795548;
  padding: 0px 0;
 margin:0px;
 }
}
/* ** 文字色の調整 ************* */
.haik-palette-brown .haik-footer p a {
 color: #795548;
}
.haik-palette-brown .haik-footer .list1 a {
 color: #795548;
}

licence,copyright部分 背景色・文字色変更

 ちょっと濃い目の背景色なら、文字色は既定の白のままでいいので、 一番上の背景を変更するクラスを指定するだけで十分です。

/* L6024 licence,copyright 表示 背景・色 ******** */
.haik-palette-brown .haik-licence {
 padding: 15px;
 text-align: center;
 background-color: #F2F2F2;
}
.haik-palette-brown .haik-licence p {
 font-size: 11px;
 color: #888888;
 letter-spacing: .01em;
 line-height: 1.5em;
 margin-bottom: 0
}

.haik-palette-brown .haik-licence p a {
 color: #888888;
}

.haik-palette-brown .haik-licence .haik-copyright p {
 font-size: 12px;
 color: #888888;
 margin-bottom: 0;
 letter-spacing: .01em
}

.haik-palette-brown .haik-licence .haik-copyright p a {
 color: #888888;
}
/* ** licence,copyright 表示 背景・色 *終わり****** */

表の幅調整・色見出し・枠の色

/* L943 テーブルの大きさ調整 */
table.style_table {
 padding:0px;
 border:0px;
 margin:auto;
 text-align:left;
 color:inherit;
 border-color: #333333;
 width: auto !important;
}
.style_th{
 padding:5px;
 margin:1px;
 border:1px solid #ddd;
 text-align:center;
 color:inherit;
 background-color: #d8e698;
 border-color: #333333;
}
.style_td{
 padding:5px;
 margin:1px;
 border:1px solid #ddd;
 color:inherit;
 background-color: #fff;
 border-color: #333333;
}
/* L943 テーブルの大きさ調整 終わり */

voteの色表示

 voteを使って投票する際に、QHMではきちんと色分けされて表示されるのに、HAIKでは無色のままです。これも、該当箇所が発見できなかったので、下の様に指定してみました。(表示幅を調整するには、上の表の改造も必要です。)
 QHMのページで、時々人気投票に使われているあれです。

/* vote.inc.php--------- */
td.vote_label{
 background-color:#FFCCCC;
 border: 1px solid #ababab;
 text-align: center;
}
td.vote_td1{
 background-color:#DDE5FF;
 border: 1px solid #ababab;
}
td.vote_td2{
 background-color:#EEF5FF;
 border: 1px solid #ababab;
}

メニューと本文を左右逆にする

 haik_seed フォルダ下にある pukiwiki.skin.php の <div class="col-sm-9"> の段落と <div class="col-sm-3"> の段落とを、ごっそり前後逆に入れ替えても、メニューと本文は入れ替わります。
 しかし、HAIKになって、テーマの中の pukiwiki.skin.php は、テーマの更新と共に上書きされるようになってしまったので、pukiwiki.skin.php の書き換えはお勧めしません。
 その代わりに、bootstrap.css L1724のあたりにある

@media (min-width: 768px) {
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: right;
 }
 .col-sm-12 {
  width: 100%;

   *
   *
   *
 .col-sm-offset-0 {
  margin-left: 0%;
 }
}
@media print {
 .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
  float: right;
 }
 .col-sm-12 {
  width: 100%;
 }
 .col-sm-11 {
  width: 91.66666667%;
 }
   *
   *
   *
 th.visible-sm,
 td.visible-sm {
  display: table-cell !important;
 }
}

 マーカー部分を、 left から right に変えてやるだけで、メニューの位置は変わります。しかし、#colsの指定をきちんとするためには、この長い部分のrightとleftをそれぞれそっくり全部逆にする必要があります。この部分を、追加cssにごっそり入れてやります。
 上が画面用、下がプリント用の設定になります。
 私は、右メニューのままの方がいいような気がしますが、KANSOが左なので、どちらかには統一しておいてほしいですね。
 この変更をする影響(弊害)としては、文書内で指定するブロックが前から順にすべて、右から左への配置になり、枠や#cols などのタグに影響が出ます。その点は気を付けてください。
 あまり、#colsなどの複雑な機能を私は使わないので、これに伴って、他にも私の気付いていない、必要な改造個所があるかもしれません。

長いリンクのはみだし防止

 このHPの様に、ソースコードを表示していると、英数文字が区切れなく続いたアドレスを表示した時、画面の外に、リンクアドレスが飛び出して表示されて、とても不格好です。
 それに、表も横に大きくはみ出します。
 それを、何とかしたいと思います。

/* 長い文字列 はみだし用 */
body{
 word-break :break-word;
 word-wrap : break-word;
 overflow-wrap : break-word;
}