ホーム >>  記事の入力補助ツール > 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テキスト貼付アイコン 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="" />
テーブル挿入/編集アイコン テーブル(表)挿入/編集 表を挿入します。行・列に数字を入れ、テーブル幅・高さ・ボーダーサイズ(枠線の太さ)・セル内余白・間隔等を指定できます。キャプションに文字列を入れるとテーブルの上にタイトルが付されます。目的にはそのテーブルが何を表すかを入力すると、ソース内に反映されます
横罫線アイコン 横罫線 水平線を引きます
絵文字挿入アイコン 絵文字挿入 あらかじめ用意された絵文字ウインドウが開きます。選択すると挿入されます
特殊文字挿入アイコン 特殊文字挿入 ウムラウトなどを表示できます。クリックすると開く選択ウインドウ上で目的の文字をクリックすると挿入されます
ヘルプアイコン ヘルプ 上記以上の詳しい解説が必要な場合にご覧ください。リンク先は英文サイトです。
このページの上へ
検索

目次
関連外部リンク
携帯電話用マニュアル

モバイルマニュアルのQRコード