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

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

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

一般的には ホームページビルダー 、商用では Dreamweaver が有名で、これら有料ソフトと比較するとさすがに機能的には見劣りする部分があるものの、ウェブページの作成という基本的な部分については遜色がない。

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

KompoZer は正式版に至っておらず、 2010年 のベータ版 0.83 を最後に開発が止まり、2018年現在ではオフィシャルサイトも閉鎖されている。

対応している言語も言語は HTML 4.0 または XHTML 1.0 で 現在主流になっている HTML 5 には未対応。

個人的に現在の WordPress に移行する前は  KompoZer を使用して HTML の勉強をしながらウェブページを作成していたので、オフシャルサイトの閉鎖は一抹の寂しさがある。

システム要件

ラストバージョン　0.8β3

OS：Windows XP / Vista / 7 / 8 / 10

システム要件としての記載が見当たらないが、XPと7、10（ 32 & 64bit ）で動作確認済み。

ソフトの入手先

KompoZer ダウンロードページ

公式サイト閉鎖のため SOURCE FORGE から日本語版のインストーラーを入手可能。

KompoZer のインストール

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

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

インストーラーを起動して、ユーザーアカウント制御のメッセージが出たら「 はい 」で許可。

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

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

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

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

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

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

セットアップ完了。

KompoZer の使い方

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

0.8β3では「 デザイン 」から「 ソース 」に切り替え、ソースを直接編集した後、デザインに戻った場合に、h属性やdiv属性などの切り替えができなくなる不具合があるため、ソースの編集は KompoZer ではなく、otbeditなどのテキストエディタを使用したほうが良いかも。

他にもいくつかバグと思われる箇所が存在するが、そのような場合は、一旦保存して再度ページを開くか、 KompoZer の再起動で大抵は解決する。

KompoZer を起動するとワープロソフトのように、白紙ページにＩビームが点滅している状態になる。
設定はほぼデフォルトのままでOKなのだが、ページ作成の前に一応各項目の確認を行う。

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

全般・フォントなど設定を確認後、「 詳細 」で上図赤枠部分のマークアップ形式を確認。

言語は HTML 4.0または XHTML 1.0に対応しており、いずれかを選択する。
XHTML は XML というマークアップ言語を従来の HTML に取り込んだ新規格で、 HTML 4.0がベースになっている。

どちらが良いのかと言えば、拡張性の高い XHTML なのだが、 HTML 4.0よりも文法が厳しいため、 HTML 4.0の方がビギナー向け。
また、 DTD は「 文書型定義 」で Transitional と Strict があり Strict は文法に厳しく、 Transitional は若干甘めという設定。
これも底が見えないほど奥が深いため、取り敢えず厳しいよりは若干甘めの Transitional を選択しておく。

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

初めは KompoZer の基本操作に慣れるため、適当な文章を入力してみる。

画面下部にある「 ソース 」というタブをクリックすると、入力した文字が HTML （ HyperText Markup Language ）で表示される。

WYSIWYG は前述のとおり、「 見える状態 」で作業するが、その作業は全てマークアップ言語に置き換えられている。
そのため極論を言えば HTML を理解していなくても、最低限のページ作成は可能になる。
ただ、デザイン編集よりもソースを直接編集したほうが効率が良かったり、 KompoZer では編集できない処理も、タグを記述することで可能になるため、基本的なタグはある程度知っておいたほうが良い。

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

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

ページタイトルはファイル名ではなく、ブラウザに表示されたり、GoogleやYahooの検索結果に表示される。

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

タイトルには漢字やひらがななどの2バイト文字を使用できるが、ファイル名は必ず半角英数の1バイト文字を使用する。

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

KompoZer で作成したファイルや使用する画像などは、全て1つのフォルダ内に入れておく。
これは画像や各ページなどへ相対パスでリンクするためには必須。

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

一般的には作成したページそのものを保存するフォルダと素材フォルダを分け、サイトの大きさにもよるがそれらのフォルダを格納したカテゴリー別のフォルダなどで整理する。

このフォルダ名も全て半角英数を使用する。

レイアウトの設定

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

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

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

テーブルは後からでも追加でき、テーブル内にテーブルを作成することも可能。
また、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の欄にスタイルシートのパスが表示されるので、後は「 スタイルシートの作成 」をクリックするだけ。

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

---

WEBオーサリング