TAKさんのブログ

ビジュアルエディタの使い方

先のリニューアル後、夢と笑顔のビジュアルエディタを変更しています。

ビジュアルエディタはブログ上のマイクロソフトWordや一太郎のようなワープロソフトです。

この新しいビジュアルエディタ(CKEditor)の使い方をご案内します。

文字入力

ブログ編集画面の本文欄にキーボードから文字を入力します。改行キー(Enterキー)を入力すると自動的に段落が生成され、段落間の行間が開きます。

ボタンによる文字装飾

入力した文字を選択して本文欄のツールバーのボタン操作で文字の体裁を設定できます。

ツールバー左から、太字、右寄せ、箇条書き、段落番号付箇条書き、元に戻す、やり直し、リンク挿入/編集、テキスト色、フォーマット、サイズ、絵文字、Video filter、ティーザーのボタンがあります。使わない場合は右端の▲のボタンでツールバーを非表示にすることもできます。

※本文欄の文字装飾や文字体裁、改行、段落は、トップページやユーザー別ブログページ等の一覧ページや、FacebookやRSS等へのフィードでは反映されません。個別記事ページにのみ反映されます。

※スマートフォンやタブレットからの入力では、絵文字挿入等、一部のボタン操作が正確に機能しない場合があります。

各ボタンの機能

太字選択した文字を太字にします。
右寄せ選択した段落を右寄せにします。
箇条書き選択した段落を箇条書きにします。改行すると箇条書きが追加されます。2回改行すると解除されます。
段落番号選択した段落を段落番号付の箇条書きにします。改行すると段落番号が追加されます。2回改行すると解除されます。
元に戻すボタン操作をする前の状態に戻します。
やり直し元に戻すボタンで元に戻した状態をやり直します。
リンク挿入
/編集
選択した文字にリンクを組み込みます。ボタンを押すと別ウィンドウが表示されます。別ウィンドウ上では、通常はURLを選択し、URL欄にリンク先のURLを記入し、「OK」ボタンを押すと選択された文字にリンクが組み込まれます。
リンクを解除する場合は、該当部分を一旦削除し、再度文字を入力してください。
テキスト色選択した文字の色を変更します。ボタンを押すと表示されるカラーパレットから色を選択します。
フォーマット選択した段落に見出し設定をする場合に使用します。「見出し3(中見出し)」、「見出し4(小見出し)」を選択できます。見出し3を選択すると横幅一杯に下線が引かれます。見出し4を選択すると太字になります。
フォーマットを解除する場合は、「標準」を選択します。
文字サイズ選択した文字の文字サイズを変更します。
絵文字本文欄のカーソル位置に絵文字を挿入します。ボタンを押して表示される絵文字ウィンドウから絵文字を選択します。絵文字が多いため、ブラウザを全画面にすると操作しやすくなります。
Video filter
動画挿入
本文欄のカーソル位置に動画を挿入します。ボタンを押して表示されるビデオ挿入画面のVideo URL欄にYouTube等動画サイトの動画URLをコピペします。
動画サイトの埋め込みコードを利用する必要はありません。また、全ての動画サイトに対応しているものではありません。
ティーザー通常使用しません。

他のソフトからのコピペ

他のソフトで作成した文章をコピペする場合、本文欄にそのままコピペすると他のソフトの文字体裁設定がそのまま組み込まれてしまいます。他のソフトからコピペする場合は、本文欄下にある「ビジュアルエディタをオフにする」で画面を切り替え、エディタを無効化した画面にコピペし、「ビジュアルエディタをオンにする」で元に戻し、改行位置等、文字体裁を再度整えてください。

長文を作成するときは

通信状態等によりエディタがダウンしせっかくの文章が消えてしまう可能性が考えられます。特に長文を書き込む際には、編集画面一番下にある「掲載オプション」欄で「掲載」のチェックを外し一旦非公開状態にし、適宜保存し、編集を継続してください。文章ができあがったら、タイトル下の「掲載する」をクリックすると公開されます。

非掲載状態の記事はページ一番上、ユーザーメニューの「ブログ」にある「非掲載記事一覧」で一覧から見つけることができます。

既知の問題

Google Chromeで文字入力の際、Enterキーで生成された段落を削除すると続く段落に対し意図しない文字サイズを縮小するマークアップが挿入されてしまいます。今後のCKEditorのバグフィクスで解決されるかと思われますが、IE9、Firefox、Safari等Chrome以外の多くのブラウザではこの問題は発生しないのを確認していますので、この動作が気になる場合は、入力に使用するブラウザを代えてみてください。

PAGE TOP