デザインの変更
デザインの変更
ファイル書き換えの手順
設定ファイルは、下に示してあるとおりです。サーバー上のファイルを直接書き換えて保存するようなわけには簡単にはいかないので、ffftpなどのFTPソフトを使って、対象ファイルを自分のパソコンにダウンロードして、それを編集保存します。
もしくは、ffftpなどの画面で、右クリックからエディタを使えるようにしてあれば、それを使って対象ファイルを開きます。しかしこのまま、エディタでサーバーにファイルを保存するわけにはいかないので、この編集したファイルを、一度自分のパソコンの好きな場所に保存します。
こうして自分のパソコンに一時保存されたファイルを、ffftpを使って、サーバーの元のファイルを上書きすれば、書き換えた内容が、ページに反映しているはずです。
設定ファイル
設定ファイルについては、北摂情報学研究所の『デザインについて』のページで以下のように説明してありました。
ご自身で、カスタマイズしたい方へ †
デザインは、すべてCSSによって構成されています。
以下のフォルダのCSSを変更して、デザインを作ってみてください。
./skin/hokukenstyle/デザイン名/
main.css …… 読み込み用
main_print.css …… 印刷時読み込みよう
layout.css …… レイアウトに関する設定
layout_print.css …… 印刷時のレイアウトに関する設定
color.css …… 色設定、装飾
plugin.css …… プラグインが作り出すHTMLのデザイン設定
まずはcolor.css
classを指定した枠の既定設定を変更
編集の枠タブを押したときの既定の設定は、「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」です。
レイアウトは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;
とします。下のマーカー部分の数字で、どれだけ右に寄るかの幅が決まります。
pukiwiki.skin.php
住所未入力時のコンマを消す
住所と電話番号を入れないとき、下のフッタに表示されるCopyrightの２行目の所に、コンマだけが残って見苦しいですね。これは、./skin/hokukenstyle/フォルダにあるpukiwiki.skin.phpを開き、下のマーカー部分のコンマを消してアップロードすれば、表示されなくなります。
<!-- ◆ Footer ◆ ========================================================== -->
<div id="footer"><!-- ■BEGIN id:footer -->
<div id="copyright"><!-- ■BEGIN id:copyright -->
<p> Copyright © {$today[year]}<a href="{$modifierlink}">{$modifier}</a> All Rights Reserved.<br />
{$owneraddr}，{$ownertel}</p>
</div><!-- □END id:copyright -->
qhm_init_main.php
ヘッダに他のものを表示する
Quick Homepage Makerでは、ヘッダ（ホームページのタイトル部分）は、文字か、画像かを選択するようになっています。ですから、ちょっと複雑なヘッダを作りたいような場合は、「画像で作る」というのがオーソドックスなやり方です。
ですがこの例のように、小さな画像を文字と組み合わせようとする場合や、googlesitesearchをヘッダ部分に表示させようとした場合には、既定のやり方ではうまくいきません。
そのような場合は、Ver3以前は./skin/hokukenstyle/pukiwiki.skin.php、Ver4以上は、./lib/qhm_init_main.phpの上下のマーカー部分が、画像指定の場合、文字指定の場合のそれぞれの表示内容に反映されるので、そこに思うような内容を付け加えます。
//-----------------------------------------------
// == SKIN FILE START HERE ==
//
// if you want to make original skin file,
// you can copy follow script and customizing.
//
//-----------------------------------------------
//generate header logo
$/logo_header = "error01";
if($style_type == "image"){
$logo_header = <<<EOD
<div id="logo"><a href="$link_top"><img src="{$qhm_dir}/$logo_image" alt="$page_title" /></a></div>
EOD;
}
else{
$logo_header = <<<EOD
<div id="logo_text"><a href="$link_top">$page_title</a></div>
EOD;
}
なお、Quick Homepage Makerのバージョンによって、これらのある場所、表記にいくらかの違いがあります。
html.php
編集ボタンの内容の変更
編集画面の下に出てくる上の簡易入力ボタンを押したときに出てくるタグの内容を、書き換えることもできます、
ここでは、「枠」を押した時に、常用の枠の指定がすぐに書き込まれるように、設定を書き換えてみましょう。
枠の指定の変更については、上にcolor.css を書き換える他の方法も紹介しました。
/openqhm/lib/html.phpの530行目あたり、
<area shape="rect" coords="146,28,173,56" alt="枠" title="枠" href="#" onclick="javascript:insert('\\n#style(class=bluebox2){{\\n(ここに内容を書く)\\n}}'); return false;">
マーカー部分を、#graybox3のように常用の枠の番号に置き換えれば大丈夫です。
