投稿エディタを使い、色・リンク・画像・動画・レイアウト処理を試す！

　このブログが目指している方向は、できるだけBloggerが提供しているツールだけでブログ全体を作り上げることです。そのためにも、ツールの特性を知って、しっかり使いこなしていけるようにしたいというのが目標です。

　まずは、投稿エディタツールを使えるようになって、しっかりとサイトを作り上げたいと思います。カスタマイズに挑戦するのはまだまだ先のことでしょうが、いつかはオリジナリティのあるブログを構築できるとように頑張りたいと思います。

　それでは、前回の続きとして〔投稿エディタページ〕ツールバーの右半分について、いろいろと試してみたいと思います。既に知っているという方には退屈な内容かも知れません、ご容赦ください。

◆投稿エディタ

※ツールバーを拡大

▼それでは、左から順番に名称とその機能を説明します。

　各アイコンにマウスポインタを充てるとそれぞれの説明テキスト（ポップヒントというそうです）が表示されますので、そのポップヒントを名称として取り上げ説明します。

　「テキストの色」を指定するセレクトボタン

　「テキストの背景色」を指定するセレクトボタン

　「リンクを付ける／外す」ためのボタン

　「画像を挿入」するためのボタン

　「動画を挿入」するためのボタン

　「追記の区切りを挿入」するためのボタン

　「配置」を指定するセレクトボタン

　「番号付きリスト」指定ボタン

　「箇条書き」指定ボタン

　「引用」指定ボタン

　「書式をクリア」指定ボタン

　「スペルチェック」「定義／翻訳」指定ボタン

　全部で１３項目のツールがあり、大きく四つの領域に分けることができます。

　「色指定に関する領域」

　「リンク先や画像挿入を指定する領域」

　「配置、リストなどを指定する領域」

　「スペルチェック・定義／翻訳の領域」

　それでは順番にそれぞれの領域で分けて見ていきましょう。

◆色指定に関する領域

　メニューバーの「A」のアイコンをクリックすると、文字に対する色指定をするためのカラーチャートが展開されます。その隣にある「テキストの背景色」を指定するアイコンもクリックすると、同様のカラーチャートが展開されて、それぞれで色を選択、指定できます。両方とも同じ内容です。

　展開されたカラーチャートから好きな色を選んで指定してみましょう。全部で６４色から選択できるようになっています。それぞれで指定してみるとこんな感じです。

　テキストの色　→　テキストの色　→　テキストの色　→　テキストの色

　テキストの背景色　→　背景色　→　背景色　→　背景色　→　背景色

　

◆リンク先や画像挿入を指定する領域

　メニューバーの「リンクを付ける／外す」ためのアイコンから「追記の区切りを挿入」するためのアイコンまでの４項目を示めす領域です。

　リンクを付けるのは簡単です。例えば、Googleへリンクを付ける場合を例にすると、Googleの文字を選択してツールバーの「リンク」アイコンをクリックします。すると下記のようなセレクトウインドウが開きますので、そこにリンク先のアドレスを入力し、他に必要な項目を指定して完了です。

こんな感じでリンク指定できました→　Google

　次の項目、「画像を挿入」するためのアイコンは、写真や上記のような図を配置したい場所にカーソルを合わせ、「画像を挿入」アイコンをクリックします。すると、ファイルを選択するためのウインドウが開きますので、そこに写真や図をアップロードして、最後に左下にある「選択した画像を追加」と書かれた青いボタンをクリックして完了です。

　「動画を挿入」する方法もほとんど同じですが、表示されるセレクトウインドウは下に示すようになります。YouTubeなどからのアップロードにも対応しています。ファイルをアップロードして、選択後左下にある青い「選択」ボタンをクリックしてレイアウト完了です。

　最後の「追記の区切りを挿入」アイコンをクリックすると、カーソルをあてた所から段落を区切ってページを分けることが可能です。

　〔投稿エディタ〕で指定すると、区切った場所を示す点線が表示されますが、プレビューでは確認できないようです。しかし、実際に公開したページを見ると、区切りを指定した所から先のページが見えない状態になっていて、そこには「もっと読む」ボタンが配置され、クリックして省略された残りのページを読むことができます。この行の下に配置してみました。

◆配置、リストなどを指定する領域

　次に、「配置」を使って指定すると、どんなことができるのか下記の４項目を例文として使い試してみます。

　「リンクを付ける／外す」ためのボタン

　「画像を挿入」するためのボタン

　「動画を挿入」するためのボタン

　「追記の区切りを挿入」するためのボタン

　エクセルやワードなどを普段お使いならなじみやすいツールです。指定する領域を選択して「配置」のセレクトメニューから選択すると下記のような効果を簡単に指定できます。

左揃えの配置

　「リンクを付ける／外す」ためのボタン

　「画像を挿入」するためのボタン

　「動画を挿入」するためのボタン

　「追記の区切りを挿入」するためのボタン

　

センター揃えの配置

　「リンクを付ける／外す」ためのボタン

　「画像を挿入」するためのボタン

　「動画を挿入」するためのボタン

　「追記の区切りを挿入」するためのボタン

右揃えの配置

　「リンクを付ける／外す」ためのボタン

　「画像を挿入」するためのボタン

　「動画を挿入」するためのボタン

　「追記の区切りを挿入」するためのボタン

両端揃えの配置

「リンクを付ける／外す」ためのボタン「画像を挿入」するためのボタン「動画を挿入」するためのボタン「追記の区切りを挿入」するためのボタン「リンクを付ける／外す」ためのボタン「画像を挿入」

　次に「リスト」ですが、Bloggerのツールに用意されたリストは、「番号付きリスト」と「箇条書きリスト」の二つしかありません。「番号付きリスト」で数字の種類を選んだり、「箇条書きリスト」の行頭に付ける「●」を「◎」に変えるなど出来ませんので、デザイン的な制限が出てきそうです。

番号付きリスト

1. 「リンクを付ける／外す」ためのボタン
2. 「画像を挿入」するためのボタン
3. 「動画を挿入」するためのボタン
4. 「追記の区切りを挿入」するためのボタン

箇条書きリスト

• 「リンクを付ける／外す」ためのボタン
• 「画像を挿入」するためのボタン
• 「動画を挿入」するためのボタン
• 「追記の区切りを挿入」するためのボタン

引用

「リンクを付ける／外す」ためのボタン

「画像を挿入」するためのボタン 

「動画を挿入」するためのボタン

「追記の区切りを挿入」するためのボタン

書式をクリア

「リンクを付ける／外す」ためのボタン

「画像を挿入」するためのボタン

「動画を挿入」するためのボタン

「追記の区切りを挿入」するためのボタン


　※書式のクリアについては使い道がよくわかりませんが、全体を選んで「書式をクリア」ボタンをクリックすると行間が広がりました。おそらく、選択した範囲を一括で広げる場合などに使うのでしょうが、よくわかっていません……。

　そして最後の「スペルチェック」ですが、今のところ使ったことはありません（スペルが間違えた時に何か知らせてくれるのでしょうか……）「定義／翻訳」も同様です。機会があれば使ってみたいと思います。


　以上、各ツールをただ解説しただけのようで申し訳ありません。もっと使い慣れて、その使い道をアピールできたらよかったのですが……ご了承ください。

　今後も使いながら、追加できる内容を見つけたら更新していきたいと思います。

　よろしくお願いします。