HomePage講座     Yukiの休息所(趣味の部屋)
 2号館トップに戻る
 HomePage講座に戻る
 HPB別枠講座に戻る
 
次の項目に進む>>
<<前の項目に戻る

 HomePage講座別枠、特別編 ソースモードの活用法
 
HPBをページ編集モードだけで使用していては、出来ない事、 やりにくい事が、多々あります。
 ソースモードに切り替えると、簡単に解決出来る事も多い、順不同で、気がついたことを、 公開して行くつもりです。


 第2回は、テンプレートの活用方法です。
 ホームページビルダーのテンプレート使いにくいですね、スタイルシートの設定に問題があるんです。

 基本部分以外は、あまり問題ないし、基本部分の設定を変える方法を紹介します。

 忘れないうちに、記録するつもりで、書き込んで置きますが、さてどうなりますか?
 
 
 
 HPB別枠講座、第2回
 第四弾は、テンプレートの活用法

 図は、テンプレートから新規作成で、サンプルを開いたところ。
 こんなページが出てきます、 見掛けは良いのですが、横幅を少し広げて利用したい・・・

 でも、簡単には横幅が広がりませんね?

 では、横幅を900pxに広げる場合で方法を紹介します。

 現状は左側が150px、右側が600pxくらいかな、見た目の印象ですが。

 横幅900px 左側200px 右側700px にして見ましょう。

 見た目の印象で、スタイルシートを外せない事は見当がつきますので、 ヘッダー部分から、いじって見ましょう。
 ヘッダー部分の右に小さな白い四角が気になりますので 先に結合で消しておきます。
 
 

 ヘッダー部分はドラッグで、簡単に広がりました。

 ページ/ソースモードの、黄色部分の左側に「width=900"」の文字が見えますね、 これが横幅、

 ちなみに、グリッド(升目)のひとつが50pxになってますから、 18枡にドラッグで合わせたんです。

 
 次は、左側のメニュー部分です。
 
 
 水色部分は、ドラッグで広がりましたが、内側の表がドラッグでは広がりません、 ページ/ソースモードでは「width="200"」になってますが・・・
 これは、スタイルシートの設定でしょう。
 



 22行目が、水色部分の設定、 23行目が、内側の表部分の設定です。

 23行目に、「class="hpb-vmenu1"」、これがスタイルシートの設定と思われます。
 
 では、スタイルシートの編集をして見ましょうか。

 表示メニューから、スタイルシートマネージャーを起動、 左の枠で、シート名を選択後、中列から、探せばいいんです。

 探すのは、23行目にありましたね、「class="hpb-vmenu1"」でした。 これをクリックすると右側に設定が出てきます。

 「width 150px」、これを消してしまえばよいと判ります。

 スタイルシートマネージャーの左下にある、CSSエディターを起動して、 該当項目をもう一度探して、設定値のみ消して見ました。

 あっと、ついでのこと、19行目の「width="900"」に打ち変えておきました、 これは、右のmain部分を含む全体の幅設定です。
 
 図の様に、横幅は900pxに合いました。

 でもバランスが変ですね、実は、58行目、右側のmain部分の横幅設定がまだなんです、 では、「width="700"」に変更しましょう。
 
 
 
  これで、横幅は予定通り、少しバランスが悪いが、 これは、ドラッグでも修正できるようになっているはずですね。

 飾りつき見出しサンプルの部分が2つなので、3つにして見ます。

 ページ/ソースモードで、四角に囲んだ部分が1セットであるようです。

 これを、コピーすればよいでしょう、ではやってみましょうか。
 
 選択のコツは、繰り返したい部分を完璧に範囲選択してコピーする事ですね、

 何回かやってみれば、要領がわかります。
 
 これで、テンプレートの活用方法は終了です。

 結果は、下図の様になってます。

 初期の画面と比べて見てください。

 では、また。