2013年09月10日 追記・変更

記事投稿をサポートするビジュアルエディタを使いこなす

ビジュアルエディタではツールバー上に用意されたアイコンをクリックすれば、選択範囲を太字にしたり斜体にすることが出来る。
toolbar01
最初に表示されているのは一部。ツールバーの一番右端のアイコンをクリックすると、全てのツールが表示される。
toolbar02
ここではツールバーの使い方について解説している。
文字の選択範囲をアイコンをクリックせずとも、いくつかのツールはキーボードのショートカットキーを押す事でも適用出来る。
1.太字
2.斜体
3.下線
4.取り消し線
5.文字色
6.番号なしリスト
7.番号付きリスト
8.引用
9.特殊文字
10.文字揃え
11.インデント
12.フォーマット
13.moreタグの挿入
14.リンクの挿入、リンクの解除

太字(CTRL+B)

toolbar03
「太字」は文章の一部を選択した後、アイコンをクリックすれば選択された部分が太字になる。


toolbar04
toolbar05
テキストエディタで次のように記述した場合と同じ。
<strong>ビジュアルエディタ</strong>の使い方を知る

斜体(Ctrl + I)

syatai
「斜体」は文章の一部を選択した後、アイコンをクリックすれば選択された部分が斜体になる。
toolbar06
toolbar07
テキストエディタで次のように記述した場合と同じ。
<em>選択範囲を斜体にします</em>。アイコンをクリックすれば選択された部分が斜体になる。

下線(--)

「下線」は文章の一部を選択した後、アイコンをクリックすれば選択された部分に下線がひかれる。
tool00
tool01
tool02
テキストエディタで次のように記述した場合と同じ。
<span style="text-decoration: underline;">選択範囲に下線</span>を引きます。

取り消し線(Alt + Shift + D)

torikesisen
「取り消し線」は文章の一部を選択した後、アイコンをクリックすれば選択された部分に取り消し線がつく。
toolbar08
toolbar09
テキストエディタで次のように記述した場合と同じ。
ビジュアルエディタの<del>取り消し線の使い方</del>を説明しています。

文字色

toolbar10
「文字色」は文章の一部を選択した後でアイコンをクリックすると選択範囲の文字色が指定した色に設定される。
toolbar11
toolbar12
テキストエディタで次のように記述した場合と同じ。
文字色は、<span style="color: #ff0000;">範囲指定</span>したテキストの文字色が変わります。
「その他の色」をクリックすると、細かい色選択が可能。
toolbar13

番号なしリスト(Alt + Shift + U)

toolbar14
番号なしリストは、順序番号を出す必要が無い箇条書きのリストを生成するために使用する。
リストを追加したい行で、アイコンをクリックするとリストが生成される。
toolbar15
toolbar16
テキストエディタで次のように記述した場合と同じ。
<ul>
	<li>番号なしリストは、リスト化したい場所にアイコンをクリックする</li>
	<li>リストはエンターを押す事で自動的に追加される</li>
	<li>リストを解除するには解除したい行で再度アイコンをクリック</li>
</ul>

番号付きリスト(Alt + Shift + O)

toolbar17
番号付きリストは、順序番号を出したいリストを生成するために使用する。
基本的な使い方は番号なしリストと同じ。
リストを追加したい行で、アイコンをクリックするとリストが生成される。

toolbar18
toolbar19
テキストエディタで次のように記述した場合と同じ。
<ol>
	<li>番号付きリストは、リスト化したい場所にアイコンをクリックする</li>
	<li>リストはエンターを押す事で自動的に追加される</li>
	<li>リストを解除するには解除したい行で再度アイコンをクリック</li>
</ol>

引用(Alt + Shift + Q)

toolbar20
「引用」は引用にしたい文章を選択して「引用」のアイコンをクリックする。
複数行ある場合は、引用したい部分を選択範囲にしてアイコンをクリック。
toolbar21
toolbar22
テキストエディタで次のように記述した場合と同じ。
<blockquote>
「引用」は引用にしたい文章を選択して「引用」のアイコンをクリックします。
複数行ある場合は、引用したい部分を選択範囲にしてアイコンをクリックします。</blockquote>

特殊文字

toolbar24
特殊文字アイコンをクリックすると、カーソルがある位置に特殊文字が挿入される。
toolbar25

特殊文字の一覧画面で挿入したい文字を選択すれば良い。
toolbar26

文字揃え

toolbar27
「文字揃え」は文章の配置方法を設定出来る。
種類として「左詰め」「中央寄せ」「右詰め」「均等割付」の4種類が用意されている。
※「均等割付」は文章の両端揃えの事。text-align: justify;というスタイルシートを文章に適用する。

左詰め(Alt + Shift + L)

toolbar28
「左詰め」はデフォルトの設定が左揃えなので見た目は変わらない。
toolbar29
toolbar30
テキストエディタで次のように記述した場合と同じ。
<p style="text-align: left;">文章を左寄せにするには、左寄せにしたい選択範囲を指定してアイコンをクリックします。</p>

中央寄せ(Alt + Shift + C)

toolbar31
「中央寄せ」は文章を中央に配置する。
toolbar32
toolbar33
テキストエディタで次のように記述した場合と同じ。
<p style="text-align: center;">文章を中央寄せにするには、中央寄せにしたい選択範囲を指定してアイコンをクリックします。</p>

右詰め(Alt + Shift + R)

toolbar34
「右詰め」は文章を右に配置する。
toolbar35
toolbar36
テキストエディタで次のように記述した場合と同じ。
<p style="text-align: right;">文章を右詰めにするには、右詰めにしたい選択範囲を指定してアイコンをクリックします。</p>

均等割付(Alt + Shift + J)

選択範囲の文字数分の幅に文字を均等に配置する。
toolbar37
toolbar38
toolbar39
テキストエディタで次のように記述した場合と同じ。
<p style="text-align: justify;">均等割付は文章の幅を均等に配置します。環境によっては見た目上、変化がないかもしれません。</p>

インデント(--)


インデントは文章全体を右方向へ字下げします。
赤枠の右側のアイコンが「インデント」で、1回クリックする毎に1段階右方向へ字下げします。
左側のアイコンは「インデントを解除」でインデントされた文章を1段階左方向へ戻します。


テキストエディタで次のように記述した場合と同じ。
<p style="padding-left: 30px;">インデントは、字下げです。文章を選択してクリックすると、文章全体が右方向に移動します。</p>
<p>実際にクリックして確かめてください。</p>
複数回「インデント」のアイコンをクリックする事で、更に右方向に移動ができる。

「インデントの解除」は、「インデント」のアイコンのすぐ左側のアイコンをクリックする事で解除される。

フォーマット(--)


文字の書式(フォーマット)の変更が出来ます。
デフォルトのフォーマットは「段落」となっている。
そのため、入力した文章は<p>文章</p>という形で表示される。


テキストエディタで次のように記述した場合と同じ。
<h1>文字のフォーマットを指定できます。</h1>
<p>フォーマットを指定したい文章を選択して、「段落」の部分をプルダウンしてフォーマット指定してください。</p>

この記事が気に入ったら下のボタンをクリック

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る