改造は、車検が通る程度でお願いします。

えーと、改造と言っても難しいことはありません。
エディターとかで編集は、やりません。
ホームページビルダーを使ってスタイルシートを編集していきます。

まず、見出し01に、どういうスタイルが設定されているかを見てみましょう。
a_MIdashi01←これですね
まず、最初にスタイルシートマネージャーの表示/非表示ボタンをクリックしてスタイルシートマネージャーを出します。

スタイルシートの編集その１
↓Ｓ ボタンをクリックします。

スタイルシートの編集その２
スタイルシートマネージャーが出たらスタイルの一覧(ページ内)の
css/style/style.css をダブルクリックします。

←ダブルクリック

スタイルシートの編集その３
↓すると、こんなのがでます。




スタイルの一覧から.a_MIdashi01を探してダブルクリックしますとスタイルの設定画面になります。　さてどんなスタイルが設定されているか見てみましょう。















まずフォント(文字)の大きさが15ピクセルに固定になっており、太さが太いにチェックがついているのがわかりますか？
ここで文字の大きさや太さを変えてます。
サイズの部分の数値を大きくしたり太さのチェックを外したりして変更できます。

スタイルシートの編集その４
次に、色と背景タブをクリックすると













前景色の部分に色がついているのがわかりますか？
この部分が文字の色です。

その下の背景色が文字の背景になる部分です。
見出し01には背景色は、設定されていません。
例えば、ここで背景を蛍光ペンで塗ったようにしたい場合は、薄い黄色を設定するとそれらしくなります。

さらに背景画像で見出し01の先頭で表示されるアイコンの画像が設定されています。
そのままだと繰り返して表示されてしまうので、属性部分で画像を繰り返さないにチェックを入れております。

スタイルシートの編集その５
次は、レイアウトです。













レイアウトタブをクリックして、左方向を選ぶと右下にパディングという値が出ます。
これは、文字の左側に余白を入れる数値です。

余白を入れないと、アイコン画像を設定しているので、このアイコンの画像と文字が重なってしまうので文字の左側に余白をちょっと入れているというわけです。
ボーダーというところで、線を設定することもできます。

例えば、スタイルシートで影付きの枠に見せるには、
こんな感じ→枠に影がついたように見えるでしょうか？
ボーダーで、上下左右に実線を選び色をつける。
右と左の線の巾を、すこしだけ大きくするとこうなります。

仕組みがわかってしまえば、優しいのですが...
他の部分も同じような設定をしているだけです。
非常に簡単な設定ですので、先頭に箱の形でドットで始まる部分は、ほとんど文字の設定なので、いろいろとテキトーにいじって遊んでみてください。
もしも、元に戻らなくなっても、ダウンロードしたスタイルシートの設定が入っているフォルダごとコピーすれば、標準に戻りますので、ご安心を♪

スタイルシートのことが、まだよくわからないかたは、外部スタイルシートの一覧の先頭に、<>と#がついている部分は、なるべくいじらないほうがいいと思います。

スタイルを追加するには？
テンプレートのスタイルは、必要最小限のものしか入っていません。
オリジナルのスタイルを追加したいかたは、こうしてください。
さきほど、やったスタイルシートマネージャーの表示/非表示ボタンをクリックしてスタイルシートマネージャーを出します。

スタイルを追加する　その１
↓Ｓ ボタンをクリックします。

スタイルを追加する　その２
スタイルシートマネージャーが出たら、こんどは、スタイルの一覧の下の
css/user/user.css をクリックします。
↓一番下のやつです。

←ダブルクリック

このファイルの中身は空です。ユーザーが自由にスタイルを追加できるように、あらかじめ入れてあるものです。

スタイルを追加する　その３
外部スタイルシートが出たら追加ボタンを押します。

左上のスタイル設定を選択して【クラスのスタイルを設定】をクリック。
クラス名が.Classとなってますね。
好きな名前を付けます。

例として、名前を.Specialにします。(先頭のドットは、スタイルを設定するときに表示されません)
適用したいスタイルを設定(文字の大きさとか色とか)してOKをクリック。
文字を選択してニャンコボタンをクリックして先ほど追加したSpecialスタイルが表示されれば成功です。スタイルの名前で、表示順が決まりますので名前をつけるときは、よく考えましょうね。(画像アイコンをつけて設定する場合は、ユーザースタイルシートが入っている
userフォルダ内に画像入れておく事をオススメします。)

使わないスタイルを削除するには？
ニャンコボタンを押すと、普段使わないスタイルが出てきて邪魔だというかたは、外部スタイルシートの使わないスタイルを選択してから、消しゴムマークの削除で消すだけです。

どれを削除していいか、よくわからないってかたは、必要な部分も消してしまう可能性があるので、あまりいじらないほうがいいかと思います。

↓特に、css/style/style.cssのほうは、デザインを構成する重要な部分が含まれていますので慎重に操作してください。

←ダブルクリック

元に戻らなくなっちゃったかたは、新たにstyleフォルダを上書きすると戻りますので、ご心配なく。(ヘッダーとフッターの背景画像を変更しているかたは、それらも上書きされてしまいますので、必ずバックアップをとってから実行してください。)

少しだけ注意点

スタイルの追加は、css/style/style.cssに追加することも出来ますが、違うデザインのスタイルに変更すると上書きされて消えてしまいますので、新しいスタイルの追加は、
css/user/user.css に追加する事を強くオススメします。
↓一番下のやつです。

←ダブルクリック

ところで ↓まんなかの css/extention/extention.css って、どう使うの？ ↑ダブルクリック これも、基本スタイル以外に追加していくスタイルシートファイルなのですが、ユーザースタイルとの違いは、テンプレートをダウンロードしたユーザー様が、独自に追加して使うcss/user/user.cssに対し、このcss/extention/extention.cssは、基本スタイルに含まれている設定では、実現できない複雑なデザインを作るためのものです。 つまりテンプレートのデザインを作る製作者向けのファイルであります。 ですので、ユーザー様は、基本テンプレート同様、なるべくいじらないほうがいいと思います。

次は、テンプレート全体のデザインがどんな風に設定されているか見てみましょう。
たぶん、ここまで読んでいるかたは、わたしよりスタイルシートのことを、わかっているかただと思いますので、簡単に説明させていただきます(笑)

文字以外は、どんな設定になってるの？


前に見てたページに戻る