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

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

KompoZer は Fabien Cazenave 氏が開発しているウェブオーサリングソフトで、ワープロやグラフィックソフトの操作に近い形で視覚的に作業することができる。

KompoZer は 2010年のベータ版 0.83 を最後に開発が止まり、対応している言語も HTML 4.0 または XHTML 1.0 で現在主流になっている HTML 5 には未対応。

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

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

基本機能を無料で利用可能な WYSIWYG 対応のウェブオーサリングソフト BlueGriffon はオープンソースのウェブオーサリングソフト Nvu の開発者ダニエル・グラッツマン氏 ( Disruptive I […]

システム要件

ラストバージョン 0.8β3

OS：Windows XP/ Vista/ 7/ 8

Windows 10 で動作確認済み。

ソフトの入手先

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

公式サイトは閉鎖。

KompoZer のインストール

KompoZer のインストーラーにアドウェアやスパイウェアは含まれていない。

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

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

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

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

インストール先にこだわりがなければデフォルト設定で「インストール」。

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

デスクトップのショートカットとクイックランチのショートカット作成を選択。

インストール先などを確認して「インストール」。

セットアップ完了。

KompoZer の使い方

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

0.8β3では デザイン から ソース に切り替えてソースを直接編集した後デザインに戻った場合に h 属性や div 属性などの切り替えができなくなるなどの不具合があり、不具合が発生した場合は一旦保存して再度ページを開くか KompoZer の再起動で大抵は解決するが、ソースの直接編集はテキストエディタなど別アプリの使用を推奨。

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

設定

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

メニューバーの ツール から設定を選択。

詳細の マークアップ形式 から使用する言語を選択。

XHTML は HTML4.0 がベースの新規格で、XHTML は拡張性が高い反面文法が難しいためビギナーには HTML4.0 を推奨。

DTD ( 文書型定義 ) の Strict は文法に厳しく、Transitional は若干甘めの設定なので Transitional を選択しておく。

文章入力

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

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

メニューバーの表示で左ペインのサイトマネージャーなどは非表示にすることができる。

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

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

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

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

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

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

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

KompoZer で作成したファイルや使用する画像などは 相対パス でリンクを作成するため 全て 1つのフォルダ内に保存する。

一般的にはサイトのカテゴリーフォルダ 内に 作成したページ と ページに使用する素材 を保存するフォルダを分けて作成し、フォルダ名は全て半角英数を使用する。

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

レイアウトの設定

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

レイアウトはツールアイコンから テーブル を選択するか、メニューバーの テーブル から挿入を選択する。

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

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

追加したテーブルは任意の大きさに拡大縮小が可能。

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

設置したテーブルの枠線や余白などの設定はテーブルをダブルクリックするか、メニューの テーブル から テーブルのプロパティ を選択し、テーブル タブで枠線の太さ・セル間隔・セル内の余白を設定。

基本レイアウトの セルを非表示にする場合は枠線を 0 ピクセルに設定。

枠線を 0 ピクセルにすると実線から赤い点線に変わる。

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

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

セルの結合は結合するセルを選択して テーブル の 選択されたセルを結合 を選択するか、コンテキストメニュー（右クリックメニュー）で 選択されたセルを結合 を選択する。

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

画像の追加

ページに画像を挿入する場合は追加したい箇所でツールアイコンから画像をクリックして 画像のプロパティ を開く。

設置する画像ファイルは pictフォルダなどに保存し、 画像URL のフォルダアイコンから保存してある画像を選択し、代替テキスト ( 画像を表示できない場合に表示する画像の説明 ) を入力する。

相対URLを使用する にチェックが入っていることを確認する。

相対URL を無効にすると 絶対パス になるためサーバにアップした際にリンクが切れてしまう。

配置する画像の大きさは 画像プロパティ の 大きさ タブで拡大縮小ができ、拡大縮小する場合は ユーザー指定 にチェックを入れてサイズを入力。

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

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

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

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

外部リンクの場合は該当ページのURL、内部リンクの場合はリンク先を相対パスで指定。

リンクの設定

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

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

内部リンクはフォルダアイコンから該当ページを指定すると自動的に相対URL でリンクが作成される。

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

同一ページ内でのリンクは アンカー を使用する。

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

アンカーを設置すると設置した箇所にイカリのマークが表示される。

アンカーを設置した場所へのリンクは リンクのアイコンをクリックし、文字列なら リンクのプロパティ、画像なら 画像のプロパティ を開き、ドロップダウンリストからアンカーを選択。

同一ページ内であればリンクは #アンカー名 になり、他ページからのリンクはページリンクの後に #アンカー名 を追加する。

文字や背景の装飾

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

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

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

スタイルシート

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

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

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

KompoZer は CSS エディタを実装しており、 CSS アイコンでエディタを開き スタイル規則を新規作成で 指定された種類の全要素に適用されるスタイル にチェックを入れ、リストボックスから定義するタグを選択して「スタイル規則の作成」をクリック。

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

作成したスタイルシートは他のページにはスタイルが反映されない 内部スタイルシート で、設定したスタイルを他のページに反映させるにはスタイルを外部に出力する。

内部スタイルシートで設定した規則を外部出力するには、CSS エディタを起動し「スタイルシートを外部に出力し、そちらへと切り替える」をクリックしてファイルに半角英数で名前を付けて保存。

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

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

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