KompoZer のインストールと使い方

ウェブページを作成する無料のウェブオーサリングソフト

KompoZer ( コンポーザー ) は WYSIWYG ( ウィジウィグ ) で ウェブページが作成できるウェブオーサリングソフト。
マークアップ言語 ( コンピュータ言語 ) を理解していなくても ワープロ や グラフィックソフトの操作に近い形で 視覚的に作業することができる。

KompoZer は 開発が中止された Nvu というMozilla Composer をベースにしたウェブオーサリングソフトの後継で、同じく Nvu からの派生ソフトには正式版をリリースした BlueGriffon がある。

BlueGriffon のインストールと使い方

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は Mozilla Composer をベースにした  WYSIWYG 対応の ウェブオーサリングソフトで、HTML5 […]

システム要件

ラストバージョン 0.8β3

OS：Windows XP / Vista / 7 / 8

ソフトの入手先

SOURCE FORGE – KompoZer ダウンロードページ

KompoZer のインストール

KompoZer は各言語別にインストーラーが用意されているので 日本語版のインストーラーを入手する。

SOURCE FORGE の KompoZer のページから「 KompoZer -0.8b3.ja.win32.exe 」をクリックしてダウンロード。

インストーラーを起動して ユーザーアカウント制御 の ダイアログが表示されたら「 はい 」で許可。

セットアップウィザードが開始するので「 次へ 」。

EULA が表示されるので確認して問題がなければ「 同意する 」。

インストール先の指定。
こだわりがなければデフォルトのまま「 インストール 」をクリック。

プログラムグループの指定もデフォルトのまま「 次へ 」。

デスクトップのショートカットとクイックランチのショートカット作成を選択。
不要ならチェックを外す。

インストール先などを確認して「 インストール 」をクリックすると KompoZer がインストールされる。

セットアップ完了。

KompoZer の使い方

KompoZer のデザイン編集だけでもある程度のページは作成できるものの、メタタグの記述などがないためにどうしても片手落ちの感は否めず 少なからず タグの知識は必要になる。

KompoZer を起動するとワープロソフトのように 白紙ページにＩビームが点滅している状態になる。

設定

KompoZer は初期設定のまま使用しても問題ないが ページ作成の前に 各項目の確認を行う。

メニューバーの「 ツール 」→「 設定 」を選択。

「 詳細 」で「 マークアップ形式 」から使用する言語を「 HTML 4.0 」と「 XHTML 1.0 」から選択。

文章入力

WYSIWYG は What You See Is What You Get  ( 見たままを手に入れる ) の略で ブラウザで表示されるイメージで WEBページの作成が可能になっている。

文章は 右ペイン に入力する。

画面下部にある「 ソース 」タブに切り替えると 入力した文字が HTML  ( HyperText Markup Language )で表示される。

ファイルの保存は上部アイコンメニューの「 保存 」をクリック。

新規ファイルを保存する場合は ページタイトル の 入力ダイアログ がでるので 任意のページタイトルを入力する。

ページタイトルを入力後に「 OK 」をクリックすると タイトル名と同じファイル名で保存されるが、ファイル名を変更してもタイトルは変わらない。

作成したファイルは完成した時点でアップロードが必要になるため 予めファイル構成を固めておく。

ホストの初期フォルダ ( ルートディレクトリ ) の中に ページの表示に必要な素材などを全てアップするため、フォルダ分けをしっかり行わないと 後からの処理が非常に煩雑になってしまう。

レイアウトの設定

ある程度ページデザインのイメージが決まったら、初めにページの大まかなレイアウトを設定する。

レイアウトは上部アイコンメニューから「 テーブル 」をクリックするか、メニューの「 テーブル 」→「 挿入 」を選択する。

設置するセルの数を指定してテーブルを設置。

テーブルは後からでも追加でき、テーブル内にテーブルを作成することも可能。
また、Excelなどの表計算ソフトと同様、セルの結合もできる。

テーブルを挿入した状態。このセルはマウスカーソルで任意の大きさに拡大縮小が可能。

セルがブラウザでどのように表示されるか確認するには、ファイルを保存した後、「 閲覧 」アイコンをクリックすると、ブラウザが起動して表示される。

設置したテーブルの枠線や余白などを設定するため、テーブルをダブルクリックするか、メニューの「 テーブル 」→「 テーブルのプロパティ 」を選択。

テーブルの詳細設定画面が開くので、「 テーブル 」タブをクリック。
枠線の太さ、セルとセルの間隔、セル内の余白を設定する。

基本レイアウトのセルを非表示にする場合は、枠線を「 0ピクセル 」に設定。
その他の設定は任意の数値を入れ、表示結果を確認しながら指定する。

枠線：0px　セル間隔：0px　余白5pxで設定したものが上図の状態。

枠線が実線から赤い点線に変わっている。この状態をブラウザで確認すると入力された文字だけが表示される。

セルの幅はスライドして調整するか、テーブルのプロパティで「 セル 」のタブを選択、「 大きさ 」の箇所を指定する。

数値を指定する場合は必ず指定する側にチェックを入れる。

セルの結合は表計算ソフトと同様、結合するセルを選択し、「 テーブル 」→「 選択されたセルを結合 」を選択するか、コンテキストメニュー（右クリックメニュー）で「 選択されたセルを結合 」を選択する。

テーブルの中にテーブルを挿入する場合は、該当のセルをクリックし、通常のテーブル作成と同じ手順で挿入する。

挿入したテーブルもプロパティで枠線や余白の設定が可能。

画像の追加

ページに画像を挿入する場合は、追加したい任意の箇所で上部メニューの画像アイコンをクリックし、「 画像のプロパティ 」を開く。

設置する画像ファイルを「 pictフォルダ 」などに保存し、「 画像URL 」のフォルダアイコンをクリックし、保存してある画像を選択する。

その際、「 相対URLを使用する 」にチェックが入っていることを確認する。
ここのチェックが入っていなければ絶対パスになり、サーバにアップした際にリンクが切れてしまう。

代替テキストは画像を表示できないブラウザなどで表示される画像の説明などを入力する。

配置する画像の大きさは、「 画像プロパティ 」の「 大きさ 」タブで任意のサイズに拡大縮小が可能。

拡大縮小する場合は「 ユーザー指定 」にチェックを入れ、任意のサイズを入力する。

画像に対するテキストの回りこみは、「 画像プロパティ 」の「 表示 」タブにある「 画像に対する文章の配置 」で指定する。

文章の配置を「 左に回り込む 」に設定すると、画像の左側に文章が回り込む。
これを「 下に揃える 」にすると、画像が配置された箇所には文章が入らず、画像の下に文章がくる。

画像に余白や輪郭線を付ける場合は、「 余白 」項目に任意の数値を入力。
ただし、左右余白（HSPACE）と上下余白（VSPACE）は HTML 4.01の非推奨設定で、これらはスタイルシートの使用が推奨されている。

画像にリンクを埋め込む場合は、「 リンク対象 」タブでリンク先のURLを入力する。

外部リンクの場合は該当ページのURL、内部リンクの場合は画像挿入と同様、リンク先を相対パスで指定する。

リンクの設定

リンクの設定は、画像にリンクを追加した操作と全く同じで、リンクのプロパティ画面でリンク先のURLを指定するだけ。

文章にリンクを設定する場合は、対象の文字列を選択し、リンクアイコンをクリックするか、右クリックメニューから「 リンクを作成 」を選択する。

内部リンク（他のページ）はフォルダアイコンをクリックして、該当のページを指定すると自動的に相対URLでリンクが作成される。

「 リンク先を新しいウィンドウで開く 」場合は、「 リンクターゲット 」の項目にある「 リンク先を 」にチェックを入れ、「 新しいウインドウで開く 」を選択して「 OK 」をクリックする。

同一ページ内でのリンクは「 アンカー 」を使用する。
リンクをクリックすると、アンカーをつけた文字、または画像などがブラウザのトップにくる。

文字列の場合はアンカーを設置したい文字列を選択、画像の場合は対象の画像をクリックした状態で、ツールバーのイカリアイコンをクリックすると、「 名前付きアンカーのプロパティ 」が開くので、アンカーの名称を半角英数で入力。
当然、アンカーを複数設置する場合は、アンカー名は重複してはならない。

アンカーを設置すると、設置した箇所に左図赤枠部分のようにイカリのマークが表示される。

アンカーを設置した場所へのリンクは、通常のリンクと同様、リンクのアイコンをクリックし、文字列なら「 リンクのプロパティ 」、画像なら「 画像のプロパティ 」を開き、左図赤枠部分の▼をクリックすると、ページ内に設置したアンカーが表示される。

同一ページ内であれば、リンクは「 #アンカー名 」になる。
また、他のページから設置したアンカーへのリンクは通常のページへのリンクの後に「 #アンカー名 」を追加することで可能になる。

文字や背景の装飾

テーブル内のセルの背景色や文字の配置は「 テーブルのプロパティ 」から行う。

「 内容の配置 」では文字や画像を「 垂直方向 」では「 上・中央・下 」、「 水平方向 」で「 右・中央・左 」が選択でき、指定する場合はチェックボックスにチェックを入れて配置を選択する。

セルの背景色ではなく、ページの背景そのものを編集したい場合は、メニューの「 書式 」→「 ページの配色と背景 」で背景画像や配色の指定をする。

スタイルシート

文字の属性はデフォルトで「 見出し1 」のフォントサイズが最も大きくなっているが、これらはスタイルシート（CSS）で自由に変更できる。

文字の属性を変更するには、ツールバーのプルダウンメニューから選択するが、見出しは単に文字のスタイルを決めるものではなく、ページ内のタイトル・サブタイトルなど、それぞれの重要性を表しているため、スタイル重視で見出し3の後に見出し2が来るような構文は原則的に正しくない。

スタイルシートとは、フォントの大きさや色、斜体、太文字、背景色や背景画像など、文字通り「 スタイル 」を定義するもので、例えば段落意味をする< p>タグをスタイルシートで定義すると、<p>タグの使用する箇所は全て同じスタイルになり、ページの構成に統一感がでる。

KompoZer はCSSエディタを実装しているので、スタイルシートの設定方法はCSSエディタで行うのが最も簡単。
「 CSS 」アイコンをクリックするとCSSエディタが開くので、スタイル規則を新規作成で「 指定された種類の全要素に適用されるスタイル 」にチェックを入れ、左図下の赤枠部分のリストボックスから定義するタグを選択したら「 スタイル規則の作成 」をクリックする。

スタイルの指定はメニュータブを切り替えて行う。

テキストタブはフォントの種類とサイズ、装飾、行間隔、文字色などの設定。背景タブは文字通りフォントの背景色や画像を設定。枠線タブはフォントに指定した枠線を表示するなど、ワープロソフトや表計算ソフトなどでも使用している文字の体裁設定が行える。

スタイルを設定したら「 OK 」をクリックするとCSSエディタが終了する。

再度CSSエディタで別の要素にスタイル規則を作成する場合は、上図赤枠部分をクリックすると、スタイル規則の新規作成画面に切り替わる。

また、このスタイルシートは「 内部スタイルシート 」で、作成したスタイルの規則は全てページ内に記述されるため、他のページにはスタイルが反映されない。
設定したスタイルを他のページに反映させるには、スタイルを外部に出力し、その設定をページに読み込ますことで、全てのページで同じ体裁が簡単に実現できる。

内部スタイルシートで設定した規則を外部出力するには、CSSエディタを起動し「 スタイルシートを外部に出力し・・・ 」をクリック。

保存先を指定してファイルに半角英数で名前をつけて保存する。
当然、ページや画像などと同一のフォルダに保存する。

新規のページに出力した外部スタイルシートを読み込ませるには、「 新しいlink要素 」を選択。

「 選択 」をクリックし、出力したスタイルシートを指定すると、URLの欄にスタイルシートのパスが表示されるので、後は「 スタイルシートの作成 」をクリックするだけ。

外部スタイルシートを正しく読みこめば、未定義の「 内部スタイルシート 」の下に、外部スタイルシートのファイル名が表示され、ページにスタイルが適用される。

関連記事

BlueGriffon のインストールと使い方

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon は Mozilla Composer をベースにした  WYSIWYG 対応の ウェブオーサリングソフトで、HTML5 […]

KompoZer のインストールと使い方

ウェブページを作成する無料のウェブオーサリングソフト KompoZer ( コンポーザー ) は WYSIWYG ( ウィジウィグ ) で ウェブページが作成できるウェブオーサリングソフト。 マークアップ言語 ( コンピ […]