使い方ガイド

2:リッチテキストエディタ

1:リッチテキストエディタとは?

 ココログの記事の投稿・編集は、「リッチテキストエディタ」と「プレーンテキストエディタ」を切り替えて使用することができます。
 「リッチテキストエディタ」では、記事作成画面での見え方が、記事を公開した後のブログの画面上で表示される見え方に近い状態となります。この機能を使えば、 HTML が苦手な方でも、文字の色や文字の大きさの変更、写真の挿入などがボタンをクリックするだけで簡単に行えます。思いのままに記事を作成することができます。

※Mac ユーザーの方は、FireFox でのみ「リッチテキストエディタ」をご利用いただけます。それ以外のブラウザでは「プレーンテキストエディタ」となります。

2:リッチテキストモード

編集モード切替画面  ココログの編集画面は、初期設定では「リッチテキスト」モードになってます。編集画面がリッチテキストモードかプレーンテキストモードかを確認したい場合には、「記事の作成」画面の緑色で書かれている「この編集画面の表示設定を変更する」をクリックします。すると別ウインドウで編集モードの切替画面が現われます。

「リッチテキストモード」の記事作成画面

 ここで「プレーンテキスト」にチェックが入っている場合、「リッチテキスト」にチェックを切り替え、画面1番下の「保存」をクリックします(初期設定では「リッチテキスト」が選ばれています)。すると、「新規記事を作成」画面が「リッチテキストモード」に切り替わり、記事投稿画面の本文エリア右上に「記事の作成」と「HTML の編集」の2つのタブが現われます。

「リッチテキストモード」で文字のスタイル変更  「新規記事を作成」画面をリッチテキストに変更したら、まずは記事本文を入力し、文字の表示を変更したい部分を選択して「フォントサイズ」「太字」「フォントカラー」「取り消し線」などの各種メニューアイコンをクリックしてみましょう。するとその場で、選択された部分が指定したスタイルに変化します。

「リッチテキストモード」の操作によって自動的に HTML 記述  「記事の作成」タブで行った操作は「HTML の編集」タブにも反映され、切り替えると自動的に HTML が記述されていることが確認できます。

 「HTML の編集」タブで直接 HTML を編集することもできますが、使える HTMLタグには制限があります(table は使用可)。HTML の直接入力に慣れている方は「プレーンテキスト」モードでのご利用をお勧めします。

画像の選択  画像を記事に貼りたい場合は、山のイラストが書いてある、「IMG」アイコンを使うと、画像アップロードのためのポップアップウインドウが表示されます。

 ウインドウ内の「画像の選択」から「参照」ボタンをクリックして、ブログにアップロードしたい画像データをあなたのパソコン上から選択し、「画像の挿入」ボタンをクリックしてください。すると本文エリアに画像が表示されるので、マウスでドラッグするだけで簡単に好きな位置にレイアウトできます。
 画像アップロードについての詳しい方法は「ブログへの画像/ファイルのアップロード」で確認してください。

 記事の編集が終わったら「確認」をクリックし、レイアウトを確認します。
 問題なければ「保存」をクリックして投稿は完了です(記事を編集しなおしたい場合には、「再編集」をクリックして、記事作成画面に戻ってください)。

 リッチテキストエディタを使えば、文章や画像にさまざまな変化をつけることが簡単になります。

3:プレーンテキストモード

 「プレーンテキスト」モードでも、「リッチテキスト」同様に「フォントサイズ」「太字」「フォントカラー」「取り消し線」などの各種メニューアイコンを使って本文を加工することができます。
 ただし、「リッチテキスト」モードが実際にブログで表示される見た目に近い状態で編集できるのに対し、「プレーンテキスト」ではすべて HTML タグによってテキストで表示されます。HTML の直接入力に慣れている方は「プレーンテキスト」の利用をお勧めします。また、動作も「プレーンテキスト」モードの方が「リッチテキスト」モードよりも若干スピーディになります。

 また、IE7を使ってプレーンテキストで記事作成を行っているとき、「リンク」と「メール」ボタンをクリックするとIEの情報バー(※)が表示されます。

※「この Web サイトは、スクリプト化されたウィンドウを使用して情報を依頼しています。この Web サイトを信頼している場合、ここをクリックして、スクリプト化されたウィンドウを許可してください。」

 これは、IE7のセキュリティ強化によるブラウザの制限で起こるものです。これが表示されたときは、IE7メニューバーにて、

ツール(T) > インターネットオプション(O) > 「セキュリティ」タブ > 信頼済みサイト

を選択、「サイト(S)」ボタンをクリックし、サイトの URL を「信頼済みサイト」へ追加することで正常に動作します。

4:記事を装飾しよう

「プレーンテキストモード」で文字のスタイル変更  本文の入力エリアには、上部にアイコンの並ぶツールバーが表示されています(Macintosh では、FireFox をお使いの場合のみ表示されます)。テキストを選択してそれぞれメニューアイコンをクリックすることで、リッチテキストモードの「記事の作成」画面では、直接テキストの表示が変更され、「HTML の編集」およびプレーンテキスト画面ではタグが加えられます。(※ブラウザーによっては、テキストを選択せずにアイコンを押した場合でも、カーソル位置の前後の文字列に効果が加えられることがあります)。メニューアイコンでは、選択した文字について以下の装飾ができます。左から順番に説明していきましょう。

フォントサイズ ●フォントサイズ
 本文のフォントサイズを変更できます。サイズは「最小」「小」「普通」「大」「最大」の5種類で、通常は「普通」が選択されています。本文の一部を選択してサイズ変更することで、テキストだけでビジュアル的な演出をすることも可能になります。ただ、この機能は、「フォントカラー」と一緒に使うとサイズが反映されない場合があります。
 なお、この機能はプレーンテキストモードにはありません。

●太字太字アイコン
 選択したテキストを太字にします。

●斜体斜体アイコン
 選択したテキストを斜体にします。

●下線下線アイコン
 選択したテキストに下線を入れます。

●取消線取消線アイコン
 選択したテキストに取消線を入れます。

●フォントカラーフォントカラーアイコン
フォントの色を変更   本文のフォントの色を変更できます。アイコンをクリックするとパレットが表示されるので、好みの色を選ぶことで入力する文字の色を変えることができます。
 また、すでに書かれた本文の一部を選択してこのボタンを押せば、強調したい部分をカラフルに見せることもできます。ただ、この機能は、「フォントサイズ」と一緒に使うとサイズが反映されない場合があります。
 なお、この機能はプレーンテキストモードにはありません。

●リンクボタンリンクボタン
リンクURL を挿入  ほかのサイトへ飛ぶためのリンクを挿入します。
 「リッチテキスト」モードの「記事の作成」画面でこのボタンをクリックするとアドレス(URL)を入力するためのウインドウが開きます。
 フォームにアドレス(URL)を入力し「OK」をクリックすると、続いてリンクを貼る文字を入力するウインドウが開くので、文字列を入力します。「OK」をクリックすれば本文にリンクコードの入った文字列が挿入されます。
 リッチテキストモードの「HTML の編集」画面、およびプレーンテキストモードでは、本文中のリンクを貼りたい部分を選択してからボタンをクリックします。するとアドレス(URL)入力ウインドウが開くので、アドレス(URL)を入力します。すると自動的に本文中にリンクタグが貼られます。

●メールボタンメールボタン
メールアドレスへのリンクを挿入  メールアドレスへのリンクを挿入します。
 「リッチテキスト」モードの「記事の作成」画面でこのボタンを押すとメールアドレスを入力するウインドウが開きます。
 フォームにアドレスを入力すると、本文にメールアドレスへのリンクコードの入った文字列が挿入されます。
 「リッチテキスト」モードの「HTML の編集」画面、および「プレーンテキスト」モードでは、本文中のリンクを貼りたい部分を選択してからボタンを押します。するとメールアドレス入力ウインドウが開くので、アドレスを入力してください。自動的に本文中にリンクタグが貼られます。

●引用ボタン引用ボタン
 テキストを引用タグで囲み、その部分が引用であることを表現します。
 「リッチテキスト」モードの「記事の作成」では、引用を開始する部分へカーソルを持っていき「引用の開始」ボタンを、引用を終了する部分でも同様に「引用の終了」ボタンをクリックします。
 「リッチテキスト」モードの「HTML の編集」画面、および「プレーンテキスト」モードでは、引用部分を選択し、ボタンをクリックすることで引用タグが挿入されます。

●列挙リスト・順序リスト列挙リスト・順序リスト
 テキストの行頭に中点(列挙リストの場合)、または番号(順序リストの場合)を振り、リストにします。カーソルが置かれている段落、選択した部分が含まれる段落に対して有効となります。リストを解除したい場合、リストを選択してボタンを再度クリックすると元に戻ります。

●画像挿入ボタン画像挿入ボタン
 文中に画像を挿入します。詳しい使い方は「ブログへの画像/ファイルのアップロード」で説明します。

●ファイル挿入ボタンファイル挿入ボタン
 文中にファイルを挿入します。詳しい使い方は「ブログへの画像/ファイルのアップロード」で説明します。

●絵文字挿入ボタン絵文字挿入ボタン
 クリックすると絵文字パレットが表示され、文中に絵文字を挿入することができます。絵文字をふたつ以上連続して挿入する場合は、シフトキーを押しながら絵文字をクリックしてください。

※「リッチテキスト」モードで利用すると絵文字表記されますが、「プレーンテキスト」モードでは[e:apple]といったようにタグ表記されます。実際のブログでは絵文字で表記されます

※「Netscape7」や Mac の「Internet Explorer5」など、一部のブラウザでは絵文字入力ができません

●本ボタン(フリー)本ボタン
フリー 
 文中に書籍へのアフィリエイトリンクと商品レビューを簡単に挿入することができます。詳しくは「アフィリエイト」で解説しています。

●CDボタン(フリー)CDボタン
 文中にCDへのアフィリエイトリンクと商品レビューを簡単に挿入することができます。詳しくは「アフィリエイト」で解説しています。

●アフィリエイトボタン(フリー)アフィリエイトボタン
文中に各種商品へのアフィリエイトリンクを張ることができます。詳しくは「アフィリエイト」で解説しています。

5:編集画面の表示設定

上級編集画面  記事の投稿・編集画面は、「プレーンテキスト」モードと「リッチテキスト」モード以外に、「基本」「上級」と分かれています。ここでは「上級」の使い方を説明します。これは「プレーンテキスト」「リッチテキスト」両モード共通の機能です。
 記事の投稿・編集画面で「この編集画面の表示設定を変更する」をクリックすると、「編集モード/編集画面の表示設定/『保存』『確認』ボタンの位置」ウインドウが開きます。
 ここで「編集画面の表示設定」から「上級」を選び「保存」をクリックすると、記事の投稿・編集画面に「本文(続き)」「概要」「トップに表示」が追加されます。「プレーンテキスト」モードを選択している場合、「改行設定」も表示されます。

▼「保存」「確認」ボタンの位置

 記事を投稿するときの「保存」「確認」ボタンの場所も、 編集画面の一番上か下を選択できます。ノートパソコンなど小さめのモニタを使っている人は「上」にしておくと便利です。

▼本文(続き)
 「本文(続き)」欄に書いた記事は、ブログのトップページには表示されず、記事の最後に「続きを読む…」というリンクが現れます。ここをクリックすると「本文(続き)」欄に書いた記事の全文を読むことができます。長い文章を書いたときや、後から記事をアップデートしたいときなどに使ってください。

▼概要
 「概要」欄には、記事の内容を短くまとめて書き込みます。ここに書かれた「概要」はトラックバックした相手先のブログに表示されたり、ココログトップページの新着記事に掲載されたり、RSS リーダーなどでブログの情報を読み込む際などに使われます。ここに何も書かなければ、ココログは記事の最初から40文字を、その記事の「概要」として使います(概要の文字数設定は自分で変更できます)。

 「改行設定」では「なし/改行を反映/Markdown」が選択できます。HTML を自分で記述したい方以外は、設定を「改行を反映」にします。
 「Markdown」を選ぶと、様々なタグを利用して記事を作成することが可能となります。Markdown の記法には次のようなものがあります。

項目名 記法 HTMLタグに変換
見出し1(h1) # 見出し1 # <h1>見出し1</h1>
見出し2(h2) ## 見出し2 ## <h2>見出し2</h2>
見出し3(h3) ### 見出し3 ### <h3>見出し3</h3>
強調 *強調* (代表的なブラウザでは斜体で表示します) <em>強調</em>
強い強調 **強い強調**(代表的なブラウザでは太字で表示します) <strong>強い強調</strong>
引用文 > 引用文 <blockquote>引用文<blockquote>
箇条書き * リスト1
* リスト2
* リスト3  
<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>
順序リスト 1. リスト1
1. リスト2
1. リスト3  
<ol>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ol>
画像の挿入 ![ALT](/img/test.jpg) <img src=”/img/test.jpg” alt=”ALT” />
リンク [リンク](http://example.net/) <a href=”http://example.net”>リンク</a>
プログラムコードの記述     テスト <pre><code>テスト</code></pre>
  (行頭に半角スペース4つ、またはタブを挿入すると、preタグとcodeタグの両方で囲います)

※「改行設定」は「リッチテキスト」モードでは表示されません。

6:「リッチテキストエディタ」の FAQ

FAQ:改行したつもりが1行分のスペースができてしまう
FAQ:記事を編集したら一部のタグが消えた?
FAQ:リッチテキストモードの改行ルール
FAQ:プレーンテキストモードで引用文の後で改行が反映されない

カテゴリー : 02.更新方法・記事管理