ホーム >> 記事の入力補助ツール > WYSIWYGテキストエディターの使い方
«
ツールを使って記事を書く（２）
||
お絵かきエディターを使ってみよう
»
WYSIWYGテキストエディターの使い方
タグ : WYSIWYGエディタ
WYSIWYGテキストエディタ
WYSIWYG（ウィジウィグ）というのは、「What You See Is What You Get.」の略です。「見たままのものが手に入る」という意味です。
記事編集画面には「リアルタイムプレビュー」がありますが、WYSIWYGテキストエディターは、入力ウインドウがそのままリアルタイムプレビューになるような形です。
★WYSIWYGエディタを起動させているときは、リアルタイムプレビューは動作しません。
推奨環境
WYSIWYGエディタが適正に動作するのは、以下の環境となります。また多機能のため、通信環境やPCの性能によっては、快適に動作しないことがあります。
| Windows | IE、Sleipnir、Firefox | ブロードバンド環境 |
|---|---|---|
| Mac OSX | Firefox |
WYSIWYGテキストエディターツール
| ツール | 説明 | |
|---|---|---|
 |
ソース | ソースを別ウインドウで表示します |
 |
プレビュー | 別ウインドウでプレビューします |
 |
切り取り | 選択した文字列、画像を切り取ります |
 |
コピー | 選択した文字列，画像を複製します |
 |
ペースト | 切り取ったりコピーした画像を貼り付けます |
 |
プレーンテキスト貼付 | コピーした文字列の文字のみ貼り付けます（文字の大きさや文字色などはリセットします） |
 |
Wordテキスト貼付 | MicrosoftWordの文章をそのまま貼り付けられます |
 |
元に戻す | 一つ前に行った動作を取り消します |
 |
やり直し | 直前に取り消した動作をもう一度行います |
 |
検索 | 文字列の検索をします |
 |
置換 | 検索した文字列を別の文字列に置き換えます |
 |
すべて選択 | エディター内のデータをすべて選択した状態にします |
 |
フォーマット削除 | 文字色や文字サイズ、行寄せなど与えた属性をすべてリセットします |
 |
文字色 | 選択した文字列に色を指定します。別ウインドウで開くパレットから文字色を選択します |
<span style="color: rgb(r, g, b);">文字列</span> |
||
 |
背景色 | 選択した文字列に背景色を指定します。別ウインドウで開くパレットから背景色を選択します |
<span style="background-color: rgb(128, 128, 128);">文字列</span> |
||
 |
太字 | 選択した文字列を太字にします |
<span style="font-weight: bold;">文字列</span> |
||
 |
斜体 | 選択した文字列を斜体にします |
<span style="font-style: italic;">I am</span> |
||
 |
下線 | 選択した文字列に下線を引きます |
<span style="text-decoration: underline;">文字列</span> |
||
 |
打ち消し | 選択した文字列に打ち消し線を引きます |
<span style="line-through;">文字列</span> |
||
 |
添字 | 選択した文字列を小さくし、右下に表示します |
<sub>文字列</sub> |
||
 |
上付き文字 | 選択した文字列を小さくし、右上に表示します |
<sup>文字列</sup> |
||
 |
段落番号の追加/削除 | 行頭に番号のついた箇条書きができます。クリックすると「1.」が挿入されるので、その後に文章を続けます。リターンキーを押すと改行され次の番号が挿入されます。最後の行が必要なければ、もう一度ツールをクリックすると終了します |
<ol> <li>文字列</li> <li>文字列</li> <li>文字列</li> </ol> |
||
 |
箇条書きの追加/削除 | 行頭に中黒（・）のついた箇条書きができます。クリックすると「・」が挿入されるので，その後に文章を続けます。リターンキーを押すと改行され次の「・」が挿入されます。最後の行が必要なければ、もう一度ツールをクリックすると終了します |
<ul> <li>文字列</li> <li>文字列</li> <li>文字列</li> </ul> |
||
 |
インデント（字下げ）解除 | 字下げを解除します |
 |
インデント（字下げ） | 数文字分右に字下げします |
<div style="margin-left: 40px;">文字列</div> |
||
 |
左揃え | 選択した段落を左揃えにします |
<div style="text-align: left;">文字列</div> |
||
 |
中央揃え | 選択した段落を中央揃えにします |
<div style="text-align: center;">文字列</div> |
||
 |
右揃え | 選択した段落を右揃えにします |
<div style="text-align: right;">文字列</div> |
||
 |
両端揃え | 選択した段落を幅に合わせます |
<div style="text-align: justify;">文字列</div> |
||
 |
リンク挿入/編集 | 選択した文字列にリンクを加えます。クリックするとリンクするURLを問うウインドウが開きます。通常は「URL」「http://」を選択し、リンクしたいURLを挿入してOKします |
<a href="（URL）">サイト名<a>オプション設定でソースは変化します |
||
 |
リンク削除 | リンクを設定した文字列を選択しクリックすると、リンクを外します |
 |
アンカー挿入/編集 | アンカー（目印）を挿入します。クリックするとアンカー名を問うウインドウが開きます。任意の半角英文字の文字列をにゅうりょくすると、目印が挿入されます。 |
| - | フォント指定 | 選択した文字列のフォントを指定します |
| - | 文字サイズ指定 | 選択した文字列のサイズを指定します |
 |
画像挿入/編集 | 画像を挿入します。URLに画像のアドレス、代替テキストには画像が表示されなかった際に代わりに表示する文字列を入力します。幅や高さ、枠線や周りの余白、行揃えが指定できます |
<a target="_blank" href="（画像URL）"><img border="0" alt="（代替テキスト）" src="（画像URL）" /><img width="21" height="21" src="skins/default/toolbar/bgcolor.gif" alt="" /> |
||
 |
テーブル（表）挿入/編集 | 表を挿入します。行・列に数字を入れ、テーブル幅・高さ・ボーダーサイズ（枠線の太さ）・セル内余白・間隔等を指定できます。キャプションに文字列を入れるとテーブルの上にタイトルが付されます。目的にはそのテーブルが何を表すかを入力すると、ソース内に反映されます |
 |
横罫線 | 水平線を引きます |
 |
絵文字挿入 | あらかじめ用意された絵文字ウインドウが開きます。選択すると挿入されます |
 |
特殊文字挿入 | ウムラウトなどを表示できます。クリックすると開く選択ウインドウ上で目的の文字をクリックすると挿入されます |
 |
ヘルプ | 上記以上の詳しい解説が必要な場合にご覧ください。リンク先は英文サイトです。 |
