© 2007-2022, Kyu-hachi TABATA Last updated  2016/03/10

Composer の使い方 (2) 基本操作


通常はブラウザとして使える SeaMonkey ですが、簡単な操作で([CTR]+[E])、Composer に切り替わり、Web 編集を開始できます。しかも、編集画面は4つもあって、ソースなどもすぐに編集できます。ここでは、こうした切り替えから、文書や画像の入れ 方などを説明します。


■1.Composer の呼び出し

1.ブラウザ画面で、「ファイル」→「ページを編集」でエディタ画面(Composer)に切り替わる。[CTRL]+[E] でもよい。
2.エディタ画面(Composer 画面)はモード切替で4つの画面を切り替えられる(下記参照)。

インターネットオプション
3.4つの切り替えのうち、標準画面と<HTML>ソース画面は必須。

標準画面 HTMLの文法をよく分からなくても大丈夫。この画面だけでかなりのことができます。画像の 挿入や表の挿入も覚えましょう。
HTMLタグ画面 これはあまり使いませんね。タグの配置を確認するときに使いますが。
<HTML>ソース画面 ソースを直接編集できます。混みいったHTML編集をする時、トラブル発生時やスクリプト埋 め込 みの時に は必須です。ヘッダーの編集にはこれが必要です。
プレビュー画面 作ったウェブをチェックするのに使います。ただ、普通はブラウザで読み込み直すことが多いで す。

■2.文字の入力

1.普通に文字を入れていけば、文章が作れます。
2.「書式」→「サイズ」、「書式」→「フォント」などで、文字の大きさや色などは自由に替えられます。
3.「書式」→「配置」で、左寄せ、右寄せ、中央なども可能。表の中の文字をどちらに寄せるかなどの時によく使います。
4.アクセント記号付きの欧文文字(à á å など)や、特殊記号は「挿入」→「文字や記号」で入力できます。
5.「挿入」→「水平線」で段落区切りの線を引けます。

■3.リンクの挿入

1.リンクを貼りたい一文をカーソル操作(shift キー+矢印キー)または、マウス操作(ドラッグ)で選ぶ。
2.「挿入」→「リンク」でリンクプロパティを出す(下記左)。
3.リンクテキストのところには、1で選んだ一文がはいっているはず。入っていなければ、入力する。
4.リンク URL のところには、リンクしたいウェブのURLを絶対アドレスでいれるか、「ファイルを選択」でファイルを選ぶ。
5.ファイルを選ぶ時には、「URLをページの場所に相対的にする」という項目にマークを入れる(下 記丸 印)

リンクプロパティリンクプロパティ2

■4.画像の挿入 (相対アドレスの指定)

1.挿入したい場所にカーソルを移動しておいて、挿入→画像。下記のウィンドウが出る。
2.「画像の場所」のところに相対アドレスを入力する。または、「ファイルを選択」ボタンを押してファイルを選ぶ。
3.「URLをページの場所に相対的にする」という項目にマークを入れる(下記丸印)
4.代替テキストのところに文字情報を入れる。これは、画像が表示されない時(読み上げブラウザなど含む)に示される文字。
5.「表示」タブを開き、「画像周りの文字列配列」のボタンを押すと挿入する画像の配置方法を指定できる。

相対アドレスの指定

■5.表の挿入

1.挿入したい場所にカーソルを移動しておいて、挿入→表。下記のウィンドウが出る。
2.行数と列数を考えて入力。ただし、あとから、簡単に増減できるので、適当でもよい。
3.幅は、普通100%となっているが、ここを空欄にしておくと (0 はダメ)、文字数に応じ最小サイズの表が出来るので重宝する。
4.枠線は普通 1px (ピクセル)になっているが、ここを 0 にしておくと(空欄はダメ)、透明枠の表が出来るのでこれも重宝。

表のプロパティ画面

■6.タイトルとヘッダー部の入力

1.書式→ページのタイトルとプロパティ で下記のウィンドウが開く。
2.タイトル(title)、作成者(author)、説明(description) を記入する。
3.キーワード(keywords)は、ソース画面で入力する(→Web の心得 (3) SEO対策)。

タイトルの入力画面

■7.アンカーの挿入とリンク

1.長い文章になるときなどは、ファイルの中にアンカーを挿入しておきます。
2.アンカーを打ちたい場所にカーソルを移動しておいて、「挿入」→「アンカー」。
3.「名前付きアンカーのプロパティ」が開くので、ここにアンカー名を入れます。内容がわかるようなアンカー名を入力します。
4.アンカーへとジャンプしたいところからは、リンクの挿入を行います(→■3)。 ファイル名のところに「ファイル名#アンカー名」という形式で入力すれば、アンカー部位にリンクされることになります。


とびら へ 前へ 次へ
↑ トップへ