• Home
• How to use
• Contact

boxプラグイン

HOME > 編集方法・プラグイン > boxプラグイン

boxプラグイン

ページ内で「枠」を使うデコレーション方法です。

ＱＨＭでは、編集用ツールボックスの下段にあるをクリックするだけで、枠が自動的に作られます。
また、そのおまじないを少し修正するだけで１５種類の枠を利用する事が出来ます。
詳しくは 枠の使い方 で説明していますので、参考にご覧ください。

ここでは、boxプラグイン を利用した枠の作成を説明します。
このプラグインを使うと、さまざまな色やラインの枠を自由に作る事が出来、また、IE6でもFirefoxでもキレイにセンタリングされます。

ＱＨＭのホームページでも説明がありますので、そちらもご覧ください。
　　⇒ＱＨＭの説明を見る

boxプラグインは標準装備ですので、プラグインのアップロードは必要ありません。（2009.10月現在）

boxプラグインの基本タグ

#box(線色,線幅px,線種,背景色,大きさ){{
文章
}}

• 線色：枠の色です
• 線幅：pxで指定します
• 線種：直接・二重線・点線などの線の種類を選べます
• 背景色：枠内の背景色です
• 大きさ：px数値か割合（％）で指定します

編集方法

編集画面の枠を挿入したい部分で上記の基本タグを書きます。
（コピー＆ペーストで必要部分を書き換えるのが安全です。）

1. 線色の指定
   カラーネームかカラーコードで指定します。
   カラーコードの場合 # を入力するのを忘れないようにしてください。
2. 線幅の指定
   お好きな数値を書いてください。
   double（二重線）の場合は3px以上を指定するようにしてください。
3. 線種の指定
   none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset
   好きな形を記述してください。
   それぞれの線種見本はボーダーの種類を参考にご覧ください。
4. 背景色の指定
   カラーネームかカラーコードで指定します。
   カラーコードの場合 # を記述するのを忘れないようにしてください。
5. 大きさの指定
   ピクセル指定の場合は、ページの横幅を考慮してください。
   ピクセル値、％値のどちらも半角で記述します。

• 半角カンマ「,」で区切ります。
• 文章の欄に、表示させたい内容を記述してください。
• 改行された状態のまま、編集します。

枠のサンプル

いくつか見本をご用意しました。
ボーダーの種類やカラーコードなども参考にして、好みの枠を作成しましょう。

文字の装飾

#box(magenta,1px,dotted,#FFF5EE,80%){{
&color(red){入力した文字に装飾をつけることが出来ます。};
}}

二重線を使う

#box(#3366ff,3px,double,azure,500px){{
''doubleは2px以下では反映されないので、3px以上にしましょう''
}}

画像を使う

#box(yellowgreen,5px,outset,#FFFFF0,60%){{
&ref(枠の使い方/waku.png,nolink,枠); 画像のおまじないも使えます
}}

枠を見えないようにする

#box(#ffffff,1px,none,#ffffff,85%){{
線種をnone（枠線を表示しない）にすると、テキストを中央寄せすることが出来ます。
背景色には、コンテンツ部分の背景色を入れるようにしてください。（当サイトは#ffffffです。）
「見えない」ので、線色は何でも大丈夫です。
線幅については、見えなくてもその分のスペースは取ります。あまりに大きい数値にすると、枠内スペースが小さくなりますので、ご注意ください。
}}

powered by Quick Homepage Maker 4.53