Top > デザイン変更(QHM) > スタイルシート(QHM)

デザインの変更  -CSSの編集-(QHM)

 このページは、QHMのスタイルシート変更用です。

ファイル書き換えの手順

Quick Homepage Maker

 設定ファイルは、下に示してあるとおりです。サーバー上のファイルを直接書き換えて保存するようなわけには簡単にはいかないので、ffftpなどのFTPソフトを使って、対象ファイルを自分のパソコンにダウンロードして、それをUTF-8対応のエディタを使って編集・保存します。
 もしくは、ffftpなどの画面で、右クリックからエディタを使えるようにしてあれば、それを使って対象ファイルを開きます。しかしこのまま、エディタでサーバーにファイルを保存するわけにはいかないので、この編集したファイルを、一度自分のパソコンの好きな場所に保存します。
 こうして自分のパソコンに一時保存されたファイルを、ffftpを使って、サーバーの元のファイルを上書きすれば、書き換えた内容が、ページに反映しているはずです。

設定ファイル

 以前は、下記のように、layout.css、color.cssなどたくさんのcssファイルがあったのですが、H24年6月の今見ると、新しいデザインには、main.css、main_print.css、plugin.cssの3つしかありません。
 下記のそれぞれのファイルが、このうちのどれかに吸収されたのでしょう。
 以前のmain.cssなどほとんど内容がありませんでしたが、今のやつは、color.css、layout.cssなども吸収しているようで、かなり記述が長くなっています。
 参考までに以前の設定ファイルの説明を、北摂情報学研究所の『デザインについて』のページから引用しておきます。

ご自身で、カスタマイズしたい方へ
デザインは、すべてCSSによって構成されています。
以下のフォルダのCSSを変更して、デザインを作ってみてください。
./skin/hokukenstyle/デザイン名/
main.css …… 読み込み用
main_print.css …… 印刷時読み込みよう
layout.css …… レイアウトに関する設定
layout_print.css …… 印刷時のレイアウトに関する設定
color.css …… 色設定、装飾
plugin.css …… プラグインが作り出すHTMLのデザイン設定

まずはmain.css(color.css)

見出しのデザイン

 本文見出しのデザインを変更することができます。以下のような設定にすれば、このページでしているように、画像を背景にして、その上にタイトル文字を表示することもできます。
 *のcss

#body h2 {
  color:#fff;
  font-size:18px;
  background-position: left center;
  padding:10px 25px;
  background-image:url(body_h2.png);
  background-size:100%;
  background-repeat:no-repeat;
}

 **のcss 

#body h3{
  color:#fff;
  font-size:16px;
  padding:3px 10px;
  background-position: left center;
   /* background */
  border-left: 8px solid #FFD700;
  background-color:#8db6cd;
}

classを指定した枠の既定設定を変更(以前)

 以前は枠のデザインの設定も、color.cssでしていました。今は、編集画面の枠を押した時に、枠の種類を選べるようになっているので、以下のようなことを考える必要はありません。この項は、以前のバージョン用です。
 編集の枠タブを押したときの以前の既定の設定は、「bluebox2」です。もし、この「bluebox2」をこれまであまり使っていないならば、color.cssの、普段使うボックスの指定内容を、この「bluebox2」の中身(マーカー部分)にそっくりそのままコピーして、「bluebox2」の内容を常用の枠指定内容に入れ替えてしまいます。そうすれば、枠指定にその内容が反映されます。
 その場合は、本来の設定内容を、そのまま別の所にコピーして、名前だけを「bluebox6」とでも替えておけば、それも「bluebox6」として生かして使うことが出来ます。

div.bluebox6{
  max-width: 100%;
  border: solid 1px #33a;
  background-color: #eef;
  text-align:left;
  padding: 0px 10px;
}

 もし、「bluebox2」をもう既に多用している場合は、編集アイコンの内容を直接書き換えるやり方もあります。
 なお、私が多用している枠は、「graybox3」です。

レイアウト編集もmain.css(以前はlayout.css)

サイドメニューを右にする

 layout.css内の

div#wrap_content{
  width : 80%;
  float : right;
  border:none;
  overflow:hidden;
}
div#wrap_sidebar{
  width : 20%;
  float : left;
  border: none;
  overflow:hidden;
}

の「left」と「right」を入れ替えるだけです。

メニューと本文の表示幅の比率を変更する

 このあたりを変更しだすと、全体のレイアウトのバランスが崩れてきますから変更はあまりお勧めしません。
 Quick Homepage Makerのデザインを色々いじってみて思うのは、提供されている状態で、望ましいバランスが保たれているということです。配色だけでなくメニューと本文の表示幅などまで変更しだすと、このバランスがくずれてきますから、変更する場合は十分に気をつけてください。
 変更の仕方自体は、「サイドメニューを右にする」で紹介した

  width : 80%;
  width : 20%;

部分の数字を、それぞれ変更するだけです。
 メニューと記事とで合計が100%になるように数値を指定します。

 plugin.css

目次の位置をもう少し右寄りにする

 元々の設定では、contentsで表示される目次が左いっぱいに寄って表示されるので、メニューを左に移動すると、少しバランスが崩れます。そこで、目次を少し右に寄せて表示することにします。
 そのためには、plugin.cssで、

div.contents{
  border:solid 1px #999;
  border-right:none;
  border-bottom:solid 1px #fff;
  width:80%;
  margin:15px 0px;
}

のマーカー部分を

  margin:15px 0px 15px 30px;

とします。下のマーカー部分の数字で、どれだけ右に寄るかの幅が決まります。