文章の挿絵に画像を設置する場合は、文章に対して回り込みの設定などをしたい場合もあると思いますが、KompoZerなら、そういった画像の回り込み設定もお手のものです。誰でも簡単に設定が出来ます。
それではKompoZerで画像をページに設置する方法を詳しく見ていきましょう。

画像の設置方法

まずは画像の設置方法の基本的な手順をご説明します。
画像そのものはPhotShopなどの画像編集ソフトで適度な大きさにリサイズするなどの処理を行っておいてください。

1. 画像を設置したい場所にカーソルを合わせて、ツールバーの画像アイコンをクリックします。
   
2. 画像のURIのテキストボックスの横にあるフォルダアイコンをクリックして、ページに設置する画像を選択します。
3. 代替テキストのテキストエリアに画像の説明文を入力します。代替テキストは、万が一画像の表示できない環境（音声ブラウザなど）で、その画像が無くてもページの意味が通じるように設定するテキストです。
   いかがわしいSEO目的で、特定のキーワードを詰め込むような事はせず、素直に画像に書かれた文字や画像の説明文を入力しておきましょう。
4. 「ツールチップ」は画像にマウスカーソルを合わせた時に、ポップアップで表示される文字のことです。HTMLソースではtitle属性になります。
   ここはあくまでも「画像の補足説明」を入力する部分ですので、先ほどの代替テキストと同じ内容を設定するような事はしないようにしましょう。（特定の文字が過剰になってしまうため）
   基本的に何も設定しなくても問題はありませんので、もしよく分からないという場合は、空欄のままにしておきましょう。

画像を設置する時のオプション

画像を設置するためのウィンドウには、先ほど説明したURIのタブと「大きさ」「表示」「リンク対象」というタブがあります。それぞれのタブで設定できるオプション項目を見ていきましょう。

大きさ

画像の大きさを任意の大きさに変更する事ができます。
画像サイズを変更するには、「ユーザ指定」を選択することで入力できるようになるテキストボックスに、数字で大きさを指定します。
大きさの基準はピクセル単位、ウィンドウに対しての％での指定も可能です。

このオプションで画像の大きさを変更した場合は、HTMLで無理に変更するので画像がぼやけたりしてしまいます。
通常はデフォルトの設定のままで問題ありません。

表示

表示する画像の「上下左右の余白」や、画像周辺の文章の回り込みを行うかどうかなどの設定を行う事ができます。

余白

上下左右の余白をピクセル単位で設定します。

輪郭線

画像の輪郭線を表示したい時に線の太さをピクセルで指定します。輪郭線の色は黒になりますが、HTMLにちょっとした修正を入れれば、他の色にする事も可能です。（CSSで指定する方が理想ですが）

画像に対する文章の配置（回り込み）

設定した画像に対して周辺の文章をどのように配置するのかを選択する事ができます。左右に回り込むような設定もできますので、先ほどご説明した余白と組み合わせて画像を配置する事で、文章も読みやすいように挿絵を挿入する事もできます。

リンク対象

画像に対してリンクを設定するタブです。リンクの設定については他のページや外部サイトにリンクを張る方法をご覧ください。
また「電子メールアドレスとして扱う」にチェックを入れると、画像をクリックした時に指定したメールアドレス宛のメールを送信できるようになります。（標準のメーラーのメッセージ作成画面が表示されます）

輪郭線の色を変更する方法

先ほど画像に輪郭線を設定するオプションをご説明しましたが、この輪郭線の色はHTMLを編集する事で変える事ができます。
まず輪郭線を設定した画像を分割モードで見ると、以下のようなコードが確認できると思います。

色は16進数などで設定する必要がありますが、以下のようにコードに色の指定を加える事で輪郭線の色を変える事ができます。（この例は赤に変えています）

16進数の色についてはHTMLレファレンス カラーコード表などを参考にしてください。

各ページとも同じ内容を書くのではなく、きちんと個別のページごとの内容を記述してユニーク化しておきましょう。
ユニーク化しておかないと、検索エンジンに表示される内容が勝手に書き変わったりする事もあります。

またGoogleウェブマスターツールを使えば、重複しているmetaタグのリストが表示されますので有効に活用しましょう。

ページのプロパティの変更

titleタグとdescriptionタグの変更は、書式メニューの「ページのタイトルとプロパティ」ウィンドウで行います。

title

一般情報の「タイトル」の部分にはページのtitleを記入します。
ページタイトルは検索エンジンに表示する事を前提に30文字〜40文字の間で記入します。これ以上の文字を記入していても「…」と表示されて、検索結果画面では表示されません。
また、検索してもらいたいキーワードを過剰に入力しておくのは止めましょう。あまり多くのキーワードが入っていると、逆によからぬSEOをしようとしていると見なされてしまう可能性がありますので、どんなに多くても2カ所程度にしておいた方が良いです。

meta description

一般情報の「内容の説明」の項目には、ページの説明文（description）を記入しておきます。文字数は100〜110文字程度が妥当です。titleと同様に多くの文字数で記入しておいても「…」と表示されて、検索結果画面には表示されません。
また検索してもらいたいキーワードもtitleと同様に、数多く入力しておかない方が無難です。あくまでも検索ユーザーがページの内容を的確に判断できるような内容にしておきましょう。

それ以外のmetaタグ

titleとdescription以外のmetaタグの入力は、ソースモードで直接HTMLソースに記入する必要があります。

metaタグの内容は、ページ上に表示されるようなものではありませんので、一見すると地味です。
しかしmetaタグの良し悪しで検索エンジンの順位や訪問者数に差が出る可能性もあるほど非常に重要な部分ですので、しっかり考えて入力しておきましょう。
最初から上手にできる訳ではありませんが、自分が上位に表示させたいキーワードで、すでに上位表示しているライバルページの内容を参考にすると良いと思います。

それらのコンテンツをただ「だらっと」並べても良いですが、各項目に見出しをつける事で、視覚的にも文書の構造としても明示的に区分けする事ができ、見やすく／分かりやすくなるという効果があります。
また段落にインデントを設ける事で、区分けしたコンテンツの内容にメリハリを付ける事ができますので、見やすく読みやすくする事ができます。

見出しタグを設定する箇所

見出し部分は<hx>タグを使ってマークアップしますが、ただ漠然と設定しておけば良いという訳ではありません。ある程度コンテンツの大きなまとまりごとに設定するのが正しい設置方法です。
見出しにした部分だけを抜き出して並べてみて、ページの流れがスムースであれば問題はないと思います。
一応見出しタグは<h1>〜<h6>までありますが、どんなに多くとも<h3>くらいまでしか使わないと思います。
もし<h4>を使っていたら、本当にコンテンツのまとまりとして正しいのかどうかチェックしてみると良いと思います。

見出しタグを設定する際に気をつける事

見出しの数字がページの上から順番になるように設置しなくてはいけません。
例えば、<h2>の後には<h3>を配置しても良いですが<h4>の配置は間違っています。
ただ<h3>の後に<h2>は大丈夫です。
つまりその数字の前後1つ増減した数字ならば大丈夫という事です。

また<h2>〜<h6>はページ中に複数個あっても大丈夫ですが、<h1>はページの中に1カ所のみしか配置してはいけません。
これは<h1>がページの内容を示す大見出しとしての役割だからです。

KompoZerで見出しの設定をする方法

まず見出しを設定したい箇所のテキストをドラッグして選択します。
次にツールバーにあるプルダウンメニューから、設定したい見出しを選択するだけです。

インデントの設定をする方法

段落の中で引用をしている部分など、他の文章とは違うという事を明示的に示す時にインデントを使います。インデントも設定をしたい部分をドラッグで選択して、ツールバーのインデント追加ボタンを押すだけです。

ちなみにKompoZerの場合、インデントを追加した箇所は左側に40ピクセルの余白が設定されます。

この余白をもう少し小さくしたい場合などは、ソースモードに切り替えて「margin-left:40px」と書かれている部分の数字を小さくすればOKです。

サイトマネージャにファイルなどを表示させるには、「公開設定」での設定が必要です。KompoZerの公開設定についてはサイトを公開するための準備をご覧ください。

それではサイトマネージャの機能を詳しく見ていきましょう。

サイトマネージャのアイコンの機能

ファイルやフォルダの表示されるエリアの上に6個のアイコンが並んでおり、サイトマネージャの機能がこの部分に集約されています。それぞれのアイコンの機能を見ていきましょう。

更新

サイトマネージャの表示エリアを更新して、ファイルやフォルダの状態を最新の状態に更新します。
新たに追加したファイルなどがサイトマネージャに表示されていない場合は、更新アイコンをクリックしてみましょう。
また手動でコピーしたり追加したりしたファイルなどは、自動でサイトマネージャに追加されませんので、既存のファイルなどをコピーした場合も「更新」をクリックします。

新しいディレクトリの作成

作成したサイト内に新しいフォルダを作成します。そのままですね。

ファイル名・フォルダ名の変更

名前を変えたいファイルやフォルダを選択してアイコンをクリックする事で、ファイルやフォルダの名前を変える事ができます。ファイルの名前を変更する場合は、そのファイルの拡張子も含めて変更をしないといけませんので気をつけてください。

ファイルの削除

削除したいファイルやフォルダを選択した状態でアイコンをクリックします。
ただし、削除したファイルやフォルダはゴミ箱に入る訳ではなく「いきなり削除されます」ので、削除のやり直しはできません。
そのためファイルの削除はOS上で行って、サイトマネージャの更新を行うほうが安全です。（OS上で削除すればゴミ箱に入るだけなので）

サイトを編集

「公開設定」が開き、サイトマネージャのサイトの情報を編集することができます。公開設定画面の使い方についてはサイトを公開するための準備をご覧ください。

公開

選択したファイルやフォルダをサイトを公開するサーバーにアップロードします。
サーバにアップロードするには、「公開設定」でサーバーのログイン情報などをあらかじめ設定しておく必要があります。

ホームページには、各HTMLファイルの他にCSSファイル・画像フォルダなどなど、非常に多くのファイルやフォルダを扱います。それらホームページを構成するファイルやフォルダを一覧できるサイトマネージャの機能や操作には少しでも早く慣れるようにしましょう。

コンピュータにファイルを保存する場所を作る

まずは作成したHTMLページやCSS（スタイルシート）、画像などを保存しておく場所を作ります。
保存しておく場所は任意の場所で大丈夫ですので、Windowsの場合はマイドキュメント内に、Macの場合はサイトフォルダ内に作成すれば良いでしょう。
ここではそれぞれの環境下で「sample」というフォルダを作成して、そのフォルダ内にHTMLファイルなどを保存していくという仮定で話を進めます。

公開するサイトのファイル保管場所を指定

まずは公開するサイトのファイル保管場所（先ほど作成したsampleフォルダの事です）のフォルダを指定します。
編集メニューの「公開サイト設定」を選ぶか、KompoZerサイトマネージャのコンピュータのアイコンをクリックします。

するとファイルの保存先のフォルダを選択するウィンドウが表示されますので、先ほど作成した「sampleフォルダ」を指定します。

ローカル側の情報を設定する「一般設定」

ファイルの保管場所を指定すると、右のような「公開設定」というウィンドウが開きますので、必要事項を順に設定していきます。
まずは「一般設定」のタブで、コンピュータに保存したサイトの名前の設定やファイルパスの確認、サーバーに公開した後のURLの設定などを行います。

サイト名

Kompozerサイトマネージャで使うサイト名です。基本的にはサイトの名前と同じ名前を設定しておけば良いと思いますが、それ以外でも分かりやすい名前を設定しておくと良いでしょう。
（0.8b3ではサイトの設定を開くたびに空白になってしまいます。元々あまり頻繁に開くメニューではありませんが、表示するたびに設定をし直す必要があります。面倒ですね・・・。）

サイトフォルダ

先ほど選択した「sampleフォルダ」へのパスが入力されているはずですので、特に操作をする必要はありません。

サイトのhttpアドレス

公開後のサイトのURLをhttp://から入力しておきます。

接頭語

特に何も入力する必要はありませんので、空白でも問題ないはずです。

公開するサーバのログイン情報などを設定する「FTP設定」

次にFTP設定画面にて、作成したホームページをアップロードするサーバーのログイン情報などを入力します。
FTPの情報設定しなくてもホームページの作成を行うことはできますので、後ほど公開するサーバを準備したときに設定を行う形でも問題はありません。

サーバーのアドレス

レンタルサーバーを使う場合でも、プロバイダのホームページ公開サービスを利用する場合でも「ftp://」で始まるアドレスを渡されるはずですので、そのアドレスを入力します。
もし分からない時には利用するサーバーの管理会社に確認をしてください。

ユーザー名

FTPサーバーにログインする為のユーザー名です。

パスワード

同じくFTPサーバーにログインする為のパスワードです。

接続タイプ

一般的なサーバーであれば基本的に何も設定しなくて大丈夫ですが、もしサーバの接続がうまく出来なくてページが公開できない場合などは、Passiveモードのチェックを入れて試してみて下さい。

以上の設定を済ませれば、KompoZerサイトマネージャに先ほど設定したサイト名が表示されるはずです。
これでサイトを公開する為の準備は整いました。さぁホームページ作りを始めましょう！

HTMLのリストの作成方法についてはリストの作成方法を、リストの余白などの設定はHTML要素の高さや幅、余白を指定するにはをご覧ください。

リストマーカの種類

リストマーカの種類は、番号なし項目リストに適用できる設定と、番号つき順序リストに適用できる設定があります。

それぞれ、どのような見た目になるのか見ていきましょう。

番号なし項目リスト

番号なしの項目リストでは、以下の3種類から設定をすることができます。特に何も指定していない場合は、黒丸のマーカが使われます。

• 黒丸
• 中抜き丸
• 四角

番号つき順序リスト

番号つき順序リストでは、以下の9種類から設定をすることができます。特に何も指定していない場合は、アラビア数字のマーカが使われます。

1. アラビア数字
2. アラビア数字（桁数を揃えて）
3. ローマ数字（小文字）
4. ローマ数字（大文字）
5. ギリシャ文字（小文字）
6. 英小文字
7. 英大文字
8. アルメニア数字
9. グルジア数字

リストマーカの画像

リストのマーカには画像を使用する事もできます。このページで使用している画像は0円のWEB素材屋さんの透明リストアイコンを使用させていただきました。

• こんな感じでリストマーカを画像にすることができます
• リストマーカを画像に指定すると、デザインの幅も広がります

リストマーカの位置

「リストマーカの位置」は、リスト項目の中にマーカを入れるか、外に出すかの指定です。

言葉で説明してもなかなか分かりにくいと思いますので、以下のサンプルをご覧ください。
何も設定しない場合は「リスト項目外」にマーカが表示されます。

• リスト項目内
• リスト項目外

HTML要素の高さと幅を指定するには

HTMLの要素の高さや幅を指定するには「高さ」「幅」のボックスに数値を入力して指定します。

指定する単位は%（パーセント）やpx（ピクセル）など、いくつかの単位がありますが、pxで指定するほうがページ全体のサイズの制御がしやすいと思います。
ただpx単位で指定する場合は、72dpi、96dpiといったモニタの解像度によって実際に表示される大きさが異なる場合があります。

またスタイルを適用する要素が「インライン要素（画像（img）やリンク（a）、spanなどが該当します）」の場合は、高さの指定はできません。

ブロックレベル要素とインライン要素

ブロックレベル要素とは見出しや段落などの「まとまり」を表す要素で、その前後には改行が入る要素です。HTMLの構造を表す要素と考えてください。
一方インライン要素は、ブロックレベル要素の内容に意味を持たせる場合に使われる要素で、前後に改行は入りません。画像やリンクは文書構造を表している要素というよりは、HTMLの内容を表す要素なのでインライン要素になるということが分かると思います。

HTML要素の余白の指定をするには

CSSで指定する余白には「margin（マージン）」と「pzdding（パディング）」の2つの種類があります。
marginはその要素の外側の余白で、paddingは要素の枠内の余白を意味しています。まずはそれぞれの違いをよく理解しておきましょう。

実際にmarginとpaddingを使って余白の指定をするには、「余白（margin）」か「枠内余白（padding）」のボックスに数値を入力して指定します。

高さと幅同様、%やpxなどのいくつかの単位がありますが、こちらもpxで指定をするほうが、ページ全体のサイズ制御はしやすいです。
また余白の設定は、上側が30pxで下側が10pxなど、上下左右で別々の設定をすることができます。

CSSを適用する箇所をHTMLタグでマークアップ

まずページ中でCSSのセレクタを指定する箇所を、適切なタグでマークアップする必要があります。
文章の箇所であれば段落を示す<p>タグ、画像などの場合は<div>などのブロックタグでマークアップすれば良いでしょう。

文章を<p>タグでマークアップする方法

まず段落にしたい文章をドラッグアンドドロップして選択します。
その後文章を選択した状態のまま、ツールバーにある「body直下」のメニューを開き「段落」を選びます。
選択した文章の横に「p」の文字が表示されれば、<p>タグでマークアップされています。

画像を<div>タグでマークアップする方法

文章を段落にした方法と同じ要領で、画像を選択したあと「汎用ブロック（div）」を選べば、画像の横に「div」の文字が表示され、<div>タグでマークアップされます。

CSSのセレクタを指定する方法

それではマークアップしたHTMLタグに対して、CSSのセレクタを指定していきましょう。
ここでは文章の段落タグに対して「.text」というセレクタを適用します。
「.text」は幅を300px、高さを100pxに、周辺に1pxの黒い線を表示するスタイルとして、事前に定義しておきます。

それでは先ほどマークアップした文章の「p」部分をクリックします。
これで<p>タグ全体が選択された状態になります。
気をつけていただきたいのが、再度ここで文章を選択しようとすると、<p>タグの内側に新しいタグを作成して、その内側のタグに対してスタイルが適用されてしまう事がある点です。
必ず<p>全体を選択するように、「p」の文字部分をクリックして選択してください。

選択した後にツールバーの「body直下」と書かれたメニューの右側のメニューから、適用したいセレクタ名（ここではtext）を選びます。

これでHTMLのタグにスタイルが適用されます。
画像に対してもスタイルを適用したい場合は、同じように「CSSセレクタの定義→HTMLタグへの適用」という順で作業をすればOKです。

線の種類

指定できる枠線の種類は8種類あります。それぞれがどのように表示されるものなのかを見ていきましょう。
下のサンプルでは分かりやすくするために、線の太さを5pxに指定しています。

実線

実線のサンプル
一番利用する機会の多い線だと思います。普通の直線が表示されます。

点線

点線のサンプル
点線が表示されます。破線よりも間隔の細かい点線です。

破線

破線のサンプル
点線と見比べてみるとその違いは一目瞭然です。

二重線

二重線のサンプル
二重になっている線が表示されます。1pxの細い線の二重線を使いたい場合は、線の太さを3pxに指定するとイメージ通りの線になります。

谷

谷のサンプル
線の中に谷があるかのような線が表示されます。

山

山のサンプル
谷と同じような線ですが、こちらは山があるように見える線になります。

沈降

沈降のサンプル
へこんでいるように見える線が表示されます。

浮上

浮上のサンプル
こちらは浮き上がっているように見える線が表示されます。沈降と組み合わせて使うと、マウスオーバーしたときにへこむ様なボタンをCSSだけで作ることもできます。（センスが良いかどうかは分かりませんが・・・）

上下左右で囲む線として使う機会より、左側だけにして見出しを強調したり、重要な部分に下線を引くイメージで下側だけ指定する、といった感じで使う機会の方が多いと思います。

背景色

ページの背景色を指定します。
右側のボタンをクリックすると色の選択パネルが表示されますので、好きな色を選びましょう。
カラーパレット以外にも16進数の色コードや色名（redやblueなど）での指定もできます。

透明度

透明度の設定ができますが、ブラウザによって動きが異なるうえに、使いこなす為にはコツがあります。「opacity」というプロパティを使って設定されます。うまく設定すれば、下の図のようにテキスト部分の背景色を半透明して、その下にある背景画像をうっすらと見せるということもできます。

背景画像

ページの背景画像を指定します。指定した背景画像は画像の並べ方（デスクトップ画像の表示方法に近いイメージです）や表示する位置を指定することができます。
背景画像の並べ方は「タイリング」で指定します。この項目は背景画像の選択を行った場合のみ有効になります。
タイリングは「水平方向のみ」「垂直方向のみ」「両方向」の3種類から指定します。

ページスクロールで画像も一緒にスクロールする

このチェックを入れておく事により、ページをスクロールしても背景画像も一緒にスクロールさせることができます。背景画像をスクロールさせる場合はページの背景色と継ぎ目のようなものが無い画像のほうが自然になります。

背景画像の位置

背景画像の表示位置を、水平方向と垂直方向でそれぞれ「上」「中央」「下」から選ぶことができます。