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

KompoZer-icon

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

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

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

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

BlueGriffon-icon

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

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

システム要件

ラストバージョン 0.8β3

OS:Windows XP/ Vista/ 7/ 8

 Windows 10 で動作確認済み。

ソフトの入手先

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

公式サイトは 閉鎖。

KompoZer のインストール

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

KompoZer wysiwyg HTML editor 002

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

KompoZer wysiwyg HTML editor-1006

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

KompoZer wysiwyg HTML editor 003

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

KompoZer wysiwyg HTML editor 004

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

KompoZer wysiwyg HTML editor 005

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

KompoZer wysiwyg HTML editor 006

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

KompoZer wysiwyg HTML editor 007

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

KompoZer wysiwyg HTML editor 009

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

KompoZer wysiwyg HTML editor 010

セットアップ完了。

KompoZer の使い方

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

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

KompoZer wysiwyg HTML editor-1007

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

設定

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

KompoZer wysiwyg HTML editor-1008

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

KompoZer wysiwyg HTML editor-1009

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

XHTML は HTML4.0 がベースの新規格で、XHTML は拡張性が高い反面 文法が難しいため ビギナーには HTML4.0 を推奨。
DTD ( 文書型定義 ) の Strict は文法に厳しく、Transitional は 若干甘めの設定なので Transitional を選択しておく。
文章入力

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

KompoZer wysiwyg HTML editor-1010

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

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

KompoZer wysiwyg HTML editor-1011

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

KompoZer wysiwyg HTML editor-1012

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

kompozer-1013

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

KompoZer wysiwyg HTML editor 019

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

ページタイトルを入力後に「 OK 」をクリックすると タイトル名と同じファイル名で保存されるが、ファイル名を変更してもタイトルは変わらない。
タイトルには 漢字 や ひらがな などの 2バイト文字を使用できるが、ファイル名は必ず半角英数の 1バイト文字を使用する。

KompoZer wysiwyg HTML editor 020

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

KompoZer で作成したファイル や 使用する画像などは  相対パス でリンクを作成するため 全て 1つのフォルダ内に保存する。
一般的にはサイトのカテゴリーフォルダ 内に  作成したページページに使用する素材 を保存する フォルダを分けて作成し、フォルダ名は 全て 半角英数を使用する。

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

レイアウトの設定

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

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

KompoZer022

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

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

KompoZer023

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

KompoZer024

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

KompoZer025

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

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

KompoZer026

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

KompoZer027

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

KompoZer028

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

KompoZer029

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

KompoZer030

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

画像の追加

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

KompoZer031

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

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

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

KompoZer032

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

KompoZer034

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

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

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

KompoZer035

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

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

リンクの設定

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

KompoZer036

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

KompoZer037

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

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

KompoZer038

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

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

KompoZer039

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

KompoZer040

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

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

文字や背景の装飾

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

KompoZer041

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

KompoZer042

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

スタイルシート

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

KompoZer043

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

KompoZer044

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

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

KompoZer045

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

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

KompoZer047

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

KompoZer048

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

KompoZer049

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

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

関連記事

BlueGriffon-icon

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

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

KompoZer-icon

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

ウェブページを作成する無料のウェブオーサリングソフト KompoZer は Fabien Cazenave 氏が開発している ウェブオーサリングソフトで、ワープロ や グラフィックソフトの操作に近い形で 視覚的に作業する […]