カスタム検索
作成後のページ編集
テンプレートで作成した場合、ほとんど修正しなくてもそのままで十分整ったホームページが出来上がります。修正するとしたら
次の、「文字サイズの変更」ぐらいでしょうか。
しかし、特別な表現をしたいところや、追加したいことなど
必ずでてきますので、ここではホームページ・ビルダーの一般的な編集作業の概要をご説明いたします。
テンプレートで作成終了後、そのままページ編集画面に入ります。新たに開く場合は、 「サイトを開く」→「ビジュアルサイトビュー」でサイト構成の階層構造図を表示して編集したいページをダブルクリックすれば開きます。
文字サイズの変更
テンプレートで作成後、文字サイズが小さいな〜と感じられたかもしれません。スタイルシートで 80% に設定されているようです。「%」の場合、ブラウザによって少し違って 表示されます。px （ピクセル）は絶対数値ですが、ディスプレーの解像度に対する相対値なのでディスプレーによって少し違ってきます。下のサンプルを参考にして下さい。
文字サイズ 10px 情報技術の品格
文字サイズ 11px 情報技術の品格
文字サイズ 12px 情報技術の品格
文字サイズ 13px 情報技術の品格
文字サイズ 14px 情報技術の品格
文字サイズ 15px 情報技術の品格
文字サイズ 16px 情報技術の品格
文字サイズ 17px 情報技術の品格
文字サイズ 18px 情報技術の品格
文字サイズ 20px 情報技術の品格
文字サイズ 70% 情報技術の品格
文字サイズ 75% 情報技術の品格
文字サイズ 80% 情報技術の品格
文字サイズ 85% 情報技術の品格
文字サイズ 90% 情報技術の品格
文字サイズ 95% 情報技術の品格
文字サイズ 100% 情報技術の品格
文字サイズ 110% 情報技術の品格
文字サイズ 120% 情報技術の品格
文字サイズ 130% 情報技術の品格
文字サイズの一括変更
スタイルシートで設定されている標準文字（タイトル、見出しなどの大きい文字以外）サイズ 80% を、例えば 98% にエディタで一括変更してみましょう。
- 普通のエディタならば文字列の一括置換機能があり、ここでは Windows 内蔵の「メモ帳」を使います。メモ帳で「ファイルの種類」を「すべてのファイル」にして、フォルダ
sitethemeにある外部スタイルシートファイル （拡張子.css） を開きます。 - メニューバー「編集」→「置換」で置換ダイアログを開き、「検索する文字列」に
「font-size: 80%;」、「置換後の文字列」に 「font-size: 98%;」と入力します。 - 「置換して次に」ボタンをクリックすると 1個ずつ確認しながら繰り返し変更します。「すべて置換」 にすれば該当する文字列すべて自動置換されます。 スタイルシートには実際に使われていないものも数多く記述されているので、「すべて置換」でやって10数秒かかります。 失敗したらファイルを「上書き保存」しないで閉じてやり直します。成功したら「上書き保存」しましょう。
文字の部分変更
文字列の一部分の色、サイズ、字体を変更をする場合、その文字列をドラッグ、「書式」→「文字色」、「サイズ」、「フォント」または右図のアイコンをクリックして変更できます。HTML ソースは、
<font color="red">変更文字</font> が追記されますが「font」タグは非推奨なので、できればこの方法ではなく
次のスタイルシートにしましょう。
スタイルシートでの変更は、「書式」→「文字飾り」→「フォントスタイル設定（SPAN）」で「スタイル設定」ダイアログを開いて変更します。 HTML ソースは、
<span style="color: red;">変更文字</span> と追記されます。
画像の貼替え/挿入
画像ファイル形式
画像としてよく使われるのは、GIF形式、JPEG形式、PNG形式などがあります。
GIF （Graphics Interchange Format） 「拡張子 .gif」
アイコンやイラストなどといった色数の少ない画像を扱うのに向いている画像形式です。使用できる色数は256色までで、透過色、インターレース機能、アニメーション機能などがあります。
JPEG （Joint Photographic Experts Group） 「拡張子 .jpg .jpeg」
写真などの色数が多い画像に向いています。フルカラーを扱うことが可能で圧縮率を自由に設定できます。ただし、透過色やアニメーション機能はありません。
PNG （Portable Network Graphics） 「拡張子 .png」
GIF形式の代替規格として生まれました。GIF形式が持つ長所に加えフルカラーを扱えます。ただし、一部のブラウザ（IE）では透過機能が上手く扱えなかったりします。
【拡張子の表示】
拡張子は、ファイルの種類を示すもので file.xyz の.xyz の形で表示されます。Web ページを作成する際には、HTML ファイルや画像、音楽などのさまざまな形式のファイルを扱います。
ファイルの種類がすぐわかるように、拡張子を表示するようにしておくとよいでしょう。拡張子を表示するには、次のように設定します。
「スタート」→「マイコンピュータ」→「ツール」→「フォルダオプション」→「表示」タブをクリックし「登録されている拡張子は表示しない」のマークを外します。
画像の貼替え
貼替える画像をクリック、右クリックで「属性の変更」ダイアログを開き、「参照」ボタンをクリック、新しい画像ファイルを指定します。画像サイズは前の画像と 同じサイズで入れ替わります。サイズを変更 したい場合は、サイズ欄を新しいサイズに変更します。ただし、大幅にサイズを変更するとレイアウトが崩れる恐れがありますから注意して下さい。
「属性の変更」ダイアログは、前項-4 の「代替テキスト」入力記事のところと同じです。
画像の挿入
画像の挿入手段は、幾通りもあり紛らわしいのですが、デジカメ写真のときは、「写真挿入ウィザード」を開いて入力すれば良いでしょう。
- 「挿入」→「写真」→「写真挿入ウィザード」を開いて「ファイルから」、「素材集から」クリックし写真を選択、「写真挿入ウィザード」でサイズ、画像の補正、縁取り効果の選択をして入力します。
- アイコン、イラストのようなものは、「挿入」→「画像ファイル」→「ファイルから」、「素材集から」クリックし素材を選択入力します。
- ナビメニューから「写真や画像の挿入」→「デジカメ写真」でも「写真挿入ウィザード」に入ります。
画像を挿入したら、ナビゲートのアイコンなどを除いて、「属性の変更」ダイアログで「代替テキスト」の入力を忘れないようにしましょう。
表の編集
表の編集は、変更したいところにカーソルを置き、ツールバーの表編集ボタンをクリックします。
1、 「表の挿入」行、列の数を指定します。画面に入力されたら、
表の■部分にカーソルを置き←→をドラッグしながら拡大、縮小します。
2、3、「行、列の追加」クリックするごと追加されます。
4、5、「行、列の削除」クリックするごと削除されます。
6、7、「セルと結合」 クリックするごと右のセル、下のセルと結合します。
8、9、「セルを分割」 クリックするごとセルを横に分割、縦に分割します。
10、11、「行のコピー」、「列のコピー」です。
12、 「表の削除」をします。クリックした表の内容も削除されます。
表の内容が消えないようにするには、メニューバーの「ツール」→「オプション」を選択、「編集」タブで「表の削除時にセル内容も削除」 のチェックマークを外して下さい。
リンクの設定
テンプレートで作成した場合、ページ間のリンクはすべて設定されています。
リンクの追加、解除などもありますので一通りご説明いたします。
他のページにリンクを設定
リンクを設定したい文字列をドラッグし反転表示したら、右クリックし「リンクの挿入」をクリックします。下図の「属性」ダイアログが開きます。
【同じサイトのページにリンクする場合】
「ファイル」タブをクリック、リンク先のファイルを「参照」ボタンをクリックして選択します。ファイル名は、「file:///C:/Document and ---/」と表示されますが、
保存すると「相対パス」に変換されて書き込まれます。
【他のサイトのページにリンクする場合】
「 URLへ」タブをクリックして、ファイル名を「 http://www.---」と絶対パスで指定します。
HTML ソースは、<a href="リンク先ファイル名">リンク文字列</a>と書き込まれます。
ファイル名は半角英数字です。
パスの記述方法には、絶対パスと相対パスがあります。絶対パスは、ファイルの位置を頭からすべて該当フォルダまでの道筋を記述します。相対パスは、現在
の位置を起点に相対的に記述します。１つ上の階層は「../」をつけて記述します。現在の位置は「./」か、そのままフォルダ名となります。
下の階層は現在のフォルダ名から記述します。
例えば、トップのサイト構成図で、「index.html」を起点にすると、画像ファイル「abc.gif」のパス名は、
「./image/abc.gif」、または「image/abc.gif」となります。
もし、CSS フォルダ内の「xyz.css」を起点とすれば「abc.gif」のパス名は、
「../image/abc.gif」となります。
サイト内のファイルを指定する場合は、相対パスが便利なので慣れるようにしましょう。
同じページ内にリンクを設定
スクロールしないと読めない場合など、同じページ内でリンクを設定するには、リンク先の文字列、または画像に「ラベル」を付け、そのラベルにリンクを設定します。
【ラベルを付ける】
リンク先に設定したい文字列、または画像を選択、右クリックし、「リンクの挿入」で「属性」ダイアログの「ラベルを付ける」タグをクリック、 ラベル欄に「半角英数字」のラベル名を入力し、OK をクリックします。
HTML ソースは、<a name="ラベル名">リンク文字や画像</a>と書き込まれます。
【ラベルにリンク設定】
リンク元の文字列、または画像を選択、右クリックし「リンクの挿入」で「属性」ダイアログの「ラベルへ」タグをクリック、 「ラベル」のプルダウンメニューから先程、設定した「ラベル名」を選択、または「ラベル名」をタイプ入力し、OK をクリックします。
HTML ソースは、<a href="#ラベル名">リンク文字や画像</a>と書き込まれます。
【ファイル名は半角英数字に】
サイト内で使用されるファイル名は、すべて「半角英数字」にします。サーバ側が UNIX 系ならば大文字/小文字を区別します。Windows 系の場合は区別しません。 小文字に統一しましょう。
リンクの設定を解除
リンク設定を解除したい文字列、または画像をクリックし、右クリック「リンクの解除」で解除されます。
リンクの設定を変更
リンク設定を変更したい文字列、または画像を選択し、右クリック、「リンクの設定」で 「属性」ダイアログを開き、上記の「リンクの挿入」と同じ要領で設定します。
作成したサンプル
テンプレートで作成したサンプルです。修正したところは、次の 2箇所です。
- スタイルシートの文字サイズ 80% → 95%に一括変更しました。
- 左揃え画面を、このページのように「中央揃え」にしました。
画面の中央に表示させる「中央揃え」は次のようにします。
【中央揃え（センタリング）の方法】
画面の中央部分に揃える方法をいくつか挙げます。普通はスタイルシートを使います。
- ホームページ・ビルダーの「ページ編集」でヘッダー部の画像を、「右クリック」「属性の変更」でレイアウトの位置揃えを「中央揃え」にします。また、コンテンツ部分の外側の表を「右クリック」、
同様に「中央揃え」に設定します。HTML ソースは、
<table align="center"になります。 - エディタで
<body>タグの後に<center>を、</body>の前に終了タグ</center>を追記します。ただし、これは非推奨です。 - エディタで
<body>タグの後に<div align="center" >を、</body>の前に終了タグ</div>を追記します。 <body>のスタイルシートに下記を追加します。ただし、Transitional DTD 互換モードで、ブラウザ IE は動作しません。
body { width: 760px; margin: 0 auto; }
ホームページ・ビルダーで作成したサイト
ホームページ・ビルダーで作成したサイトはよく見かけますが、その中でもお勧めするサイトを掲載します。
| サイト名 | 内 容 |
|---|---|
| 日々のかおり | 画像処理、加工がすばらしいです。センスもいい。 |
ホームページ・ビルダー体験版の入手
市販ホームページ・ビルダーは、IBM からジャストシステムに移管されましたが、従来通り「30日間の体験版」がありますのでこちらを利用できます。 ただし、付属の画像編集ソフトや FTPソフトなどは付いていません。サンプル素材、テンプレートも限られているようです。それでもサイズが大きいのでダウンロードから インストールまで 30分以上かかります。私は購入しましたが、実際には「ウェブアートデザイナー」をときどき使うぐらいです。体験版を体験されるだけで十分と思います。 → ホームページ・ビルダー体験版入手サイト
