QHM (Quick Homepage Maker) ユーザのためのTips集。小技から大技までテクニック満載

スタイルシート解説

スタイルシート解説

QHMのデザインは全てCSSで定義してあり、これを変更することでコンテンツの変更なしでデザインを変更できます。
以下のスタイルシートがあります。

  • main.css
    各デザイン名のフォルダ配下にあります。これでほとんどのスタイルを定義しています。
  • main_print.css
    印刷用のスタイルを定義してあります。メニュー部分を除いたデザインとなっています。画面と印刷を同じにしたいときは、main.cssをコピーして、main_print.cssにすると画面通りに印刷されます。

No.Y01 画面幅を変更したい [☆]

main.cssの以下の3箇所の定義を修正します。
750px を適当な値に変更してください。
◆注意
横幅を変更すると、タイトル(h2, h3, h4)などの背景に画像を使用していると画像が切れます。それらの画像も修正が必要です。

  • 修正が必要な画像(デザインにより画像を使用していない場合もあります)
    header_bg.png、h3_bg.png、h2_bg.pngなど
#headcopy {
width:750px;   ←ここを変更
text-align:left;
margin-left:auto;
margin-right:auto;
padding:2px;
}

#logo img {
width:750px;   ←ここを変更
}

#wrapper {
width:750px;   ←ここを変更
text-align:left;
border:none;
background-color:#fff;
margin:1px auto;
}

main.cssを修正しないで、上記と同じことができます。以下のコードをナビ2に入れてください。 g_modern01などの背景画像を使用していないデザインは問題なく利用できます。
※画面幅を 950px に設定した例。

#beforescript{{
<style type="text/css">
<!--
#headcopy {
width:950px;
}
#logo img {
width:950px;
}
#wrapper {
width:950px;
}
--> 
</style>
}}

No.Y02 メニュー幅を広くしたい [☆]

main.cssを修正します。width:xx% の指定を変更して合計が100%になるようにします。たまに、合計で100%にしていてもレイアウトが壊れることがあります。そのときは99%にしてください。

#wrap_content {
width:80%;   ←ここを変更
float:right;
overflow:hidden;
border:none;
}

#wrap_sidebar {
width:20%;   ←ここを変更 大きくするとメニューが広がる。
float:left;
overflow:hidden;
border:none;
}

main.cssを修正しないで上記と同じことを行う方法。
以下のコードをナビ2に入れてください。
例)メニュー(サイドバー)の幅を広くする

#beforescript{{
<style type="text/css">
<!--
#wrap_content {
width:75%;
}
#wrap_sidebar {
width:25%;
}
-->
</style>
}}

No.Y03 タイトルの背景画像を変更したい [☆]

main.cssに定義してある、画像を入れ替えてください。画像はmain.cssが入っているフォルダに入っていますので、SWFUで画像をアップロードしたときは、パスの指定には気をつけてください。
以下のh3の例では、パスはこのようになります。
background-image:url(swfu/d/h3_bg.png);

#body h3 {
line-height:1em;
text-align:left;
color:#333;
font-size:16px;
background-image:url(h3_bg.png);   ←ここの画像を変更
background-repeat:repeat;
background-position:left center;
border:solid 1px #ccc;
margin:15px 0 5px;
padding:3px 5px;
}

同様に、h2, h4なども必要に応じて変更してください。

No.Y04 表の枠を消したい [☆☆]

QHMの表はおまじないでは罫線を消すことができませんが、以下の方法で表の罫線を消すことが可能です。

■手順

  • #beforescriptを使用して、テーブルのCSS(style_tableクラス)に対し罫線を消す指定をします。この#beforescriptはページ内でしたらどこに書いてもOKです。
    全ページに適用したいときは、設定画面の「その他のタグ」に入れてください。ただし、そのときは #beforescript{{ と 最後の }} は不要です。
【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_table{
background-color:transparent;
}
-->
</style>
}}

CENTER:表1 罫線なし
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |

表1 罫線なし

タイトル1タイトル2タイトル3
項目1項目2項目3
項目4項目5項目6

No.Y05 表の枠の色を変更したい [☆☆]

「表の枠を消したい」で説明したTipsの応用編です。

■手順

background-color:色指定; に色を指定します。
【ソース】
#beforescript{{
<style type="text/css">
<!--
.style_table{
background-color:lightgreen;
}
-->
</style>
}}

CENTER:表1 罫線の色を変更
|~タイトル1 |~タイトル2 |~タイトル3 |
| 項目1 | 項目2 | 項目3 |
| 項目4 | 項目5 | 項目6 |

No.Y06 表を左(右)寄せにしたい [☆☆]

表は標準では中央寄せになるので、これを左または右寄せにする方法。
(これはそのページ全体に影響があるので注意)
以下のコードを対象のページ内に記述してください。

#beforescript{{
<style type="text/css">
<!--
.style_table{
text-align:left;
margin-left:0;
}
-->
</style>
}}

No.Y07 画像に枠を付けたい [☆☆]

枠線を付けたい画像があるページに以下を書いてください。そのページのコンテンツが入るエリア(本文を書くところ)にある全ての画像に対し枠線が付きます。

#body は、コンテンツが入るエリアの id名です。(QHM固有)

#body を削除して img だけにすると、メニューも含め全部のイメージに枠が付きます。
ページが沢山あるときは、これを ナビ2編集 で SiteNavigator2 のページに入れると全ページに適用されます。
全ページに適用されると困るときは、#includeプラグインで以下のスクリプトを必要なページに取り込んだ方がよいと思います。

#beforescript{{
<style type="text/css">
<!--
div#body img{
margin:5px 10px;
border: 4px solid #cccccc;
}
-->
</style>
}}

もし、枠が付いて欲しくない画像まで枠が付くようでしたら以下のようにしてください。
ナビ2に設定するのは同じです。

#body を .frameimg に変更 (frameimg は新規作成のclass)

#beforescript{{
<style type="text/css">
<!--
div.frameimg img{
margin:5px 10px;
border: 4px solid #cccccc;
}
-->
</style>
}}

さらに、枠を付けたい画像がある開始位置に以下を追加

#html2(<div class="frameimg">)

枠を付けたい画像がある終了位置に以下を追加

#html2(</div>)

要するに <div> と </div>で必要な範囲を指定します。
分かりにくいので、以下に例を書きました。

例)特定の画像だけ枠をつける
 3つの画像のうちこの例では、flower02.jpg だけに枠が付きます。

CENTER:&ref2(swfu/d/flower01.jpg,nolink,,花1);

#html2(<div class="frameimg">)
CENTER:&ref2(swfu/d/flower02.jpg,nolink,,花2);
#html2(</div>)

CENTER:&ref2(swfu/d/flower03.jpg,nolink,,花3);

花1

花2

花3

No.Y08 背景色を変更したい [☆]

画面の背景色を変更したいときは、以下のスクリプトをナビ2に入れてください。(WIDE系以外のデザインに適合)
この例では、背景が濃い灰色になります。メニューの背景色だけとか、コンテンツ部分の背景色を単独に変更したい場合は、同様にスタイルを指定してください。
メニューのときは body の代わりに#menubar を コンテンツのときは #content を指定してください。
何を指定してよいかわからないときは、以下のTipsを参考にして調べましょう。

#beforescript{{
<style type="text/css">
<!--
body {
background-color:#888888;
}
-->
</style>
}}

WIDE系のデザインは、CSSの指定が異なります。こちらをどうぞ。
この例では、背景を全て同じ色になるように修正しました。参考にしてください。不要な指定がありましたら削除してください。

#beforescript{{
<style type="text/css">
<!--
#headcopy {
    background-color: #FFFF66;
    border-bottom: 2px solid #FFFF66;
}
body {
    background-color: #FFFF66;
}
#wrapper {
    background-color: #FFFF66;
}
#navigator2 {
    background-color: #FFFF66;
}
#footer {
    background-color: #FFFF66;
    border-top: 1px solid #FFFF66;
}
#licence {
    background-color: #FFFF66;
}
-->
</style>
}}

No.Y09 背景の画像を変更したい [☆☆]

(未稿)

No.Y10 ページ枠に影をつけたい [☆]

ページ全体の枠にCSSを利用してドロップシャドウ(影)を表示できます。
IE 5.5+、Firefox 3.5+、Safari 3+、Chrome、Opera 10.50 に対応しています。

以下のコードを ナビ2に入れてください。コンテンツの右側と下側に影ができます。
当サイトはこの方法を使用しています。

コード

#beforescript{{
<style type="text/css">
<!--
#wrapper {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
-->
</style>
}}

こちらのサイトを参考にしました。
http://robertnyman.com/2010/03/16/drop-shadow-with-css-for-all-web-browsers/

【注意】
OSとブラウザの組み合わせによっては、フォント表示が汚くなることがあるようです。自己責任でご利用をお願いします。
http://www.1st-easy-hp.com/uf/forum/post_view.php?id=1994

No.Y11 影付きのBOXを表示したい [☆]

No.Y10 影付きのBOXを表示したい の応用編です。
CSSでBOXに影を表示させます。BOX内にはQHMのおまじないが書けます。
以下のコード1(CSSの指定)を利用したいページ内の先頭に記述してください。
全ページに適用したいときは、ナビ2に入れてください。各ページに入れる必要はありません。
影付きのBOXを利用したい位置に、コード2(BOXの指定)を記述してください。
このサンプルコードは、左寄せになっています。

コード1(CSSの指定)

#beforescript{{
<style type="text/css">
.boxshadow {
width:300px;
float:left;
text-align:left;
background-color:#fafafa;
border:1px solid #a1a1a1;
margin:1px auto;
padding:8px 18px;
/* 以降は、ブラウザ毎にBOXの影を指定 */
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
</style>
}}

コード2(BOXの指定)

#html2(<div class="boxshadow">)
ここには QHMのおまじない が書けます。
''影つきのBOXを表示''
-リスト1
--リスト1-1
--リスト1-2
#html2(</div>)
#clear

表示例)
 こんな感じで影を表示します。

ここには QHMのおまじない が書けます。
影つきのBOXを表示

  • リスト1
    • リスト1-1
    • リスト1-2

解説

  • 新規に boxshadowというクラスを作成します。このサンプルコードでは、BOXが左寄せになっています。
  • 幅、枠線、背景色などは適当に変更してください。
  • 影の指定は、ブラウザ毎に微妙に違いますので、これは全部指定してください。
    パラメータの指定方法は、[左右の距離][上下の距離][ぼかし範囲][影の色]です。
    距離にマイナスの値を指定すれば、左側と上側に影ができます。
  • -moz-box-shadow: 3px 3px 4px #000, -3px -3px 4px #000;
    と指定すると、Firefoxでは、上下左右全部に影ができます。

ご意見箱

皆様のご意見をお待ちします。


認証コード(8881)

当ページは役に立ちましたか?

選択肢 投票
たいへん役に立った 50  
ちょっとだけ役に立った 0  
普通 0  
あんまり 0  

powered by QHM 6.0.8 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional