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セットであるようです。
これを、コピーすればよいでしょう、ではやってみましょうか。
選択のコツは、繰り返したい部分を完璧に範囲選択してコピーする事ですね、
何回かやってみれば、要領がわかります。
|
|
これで、テンプレートの活用方法は終了です。
結果は、下図の様になってます。
初期の画面と比べて見てください。
では、また。 |
|
|
|
|