沖縄とトールペイントが大好きでQuick Homepage Makerでのサイト作りに奮闘中！

Top / QHMReferenceBook / scrollbox

スクロール付きボックス

スクロール付きの枠（バージョンアップでQHMにプラグインができました）

#scrollbox(横幅,縦幅){{
この中にQHMのおまじないが使えます。
}}

• 横幅、縦幅ともに数値と単位が必要です。
  • 横幅：%（パーセント）または px（ピクセル）で指定
  • 縦幅：px（ピクセル）で指定

スクロールボックス

#html{{
<textarea cols="80" rows="5" style="overflow:auto;">

ここに内容を書く
内容が少ないとバーは出ませんが、
内容が増えるとバーが出ます。
おまじないは使えません。

</textarea>
}}

ここに内容を書く 内容が少ないとバーは出ませんが、 内容が増えるとバーが出ます。 おまじないは使えません。

おまじないが使えるスクロールボックス

• D++ QHM Cool Design Labo様参考にスクロールバーの変更を付け足しました。

  #html2(<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:572px;background-color:カラーコード;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 1px solid カラーコード;color:#000000;text-align:left;height:50px;scrollbar-face-color:カラーコード;scrollbar-darkshadow-color:カラーコード;scrollbar-3dlight-color:カラーコード;scrollbar-arrow-color:カラーコード;scrollbar-track-color:カラーコード;">) 
  &color(pink){こんにちは};
  ''こんばんわ'' 
  http://qhm.yunahana.com  
  &color(,pink){''おはようございます''};
  友菜の花
  沖縄  
  #html2(</div></div></div>)

• 下記のようになる（カラーコードには好きなコードを入れてください）
  • firefoxではスクロールバー（薄いピンク）の変更は表示されません。

スクロールボックスの隣に画像を並べる。

#style2(style=width:60%;float:left;text-align:left){{
#html2(<div style="margin:0px;padding:0px;" align="center"><div style="margin:0px;padding:0px;line-height:1.3;width:350px;background-color:カラーコード;"><div style="margin:0px;padding:10px;line-height:1.3;overflow:auto;border: 2px solid カラーコード;color:#000000;text-align:left;height:130px;scrollbar-face-color:カラーコード;scrollbar-darkshadow-color:カラーコード;scrollbar-3dlight-color:カラーコード;scrollbar-arrow-color:カラーコード;scrollbar-track-color:カラーコード;">)
ここから内容を書く

スクロールBoxの内容はここまで。
#html2(</div></div></div>)
}}
#style2(style=width:30%;float:left;text-align:left;margin-left:10px){{
&ref2(swfu/d/画像名,nolink,,表札);
}}
#clear

• 画像の左側の余白は、#style2の（カッコ）内、margin-left:10pxの数値を調整する。

スライドショーの左にスクロールボックスを並べる