2013年 09月 14日

投稿画面の基本操作

ビジュアルエディタの基本操作

WordPressには下図のようにツールバーで視覚的に文字をスタイリングできるビジュアルエディタがあります。

visualedita

1スタイリングしたい文字範囲をドラッグして選択します。

2ツールバーの中からスタイリングしたい機能を選んでクリックします。

ビジュアルエディタを使った書式設定

visualedita_1

アイコン 内容 設定例
なし 書式設定
1.bold 太字 書式設定
2.del 打消し線 書式設定
3.underline 下線 書式設定
fontcolor テキスト色 書式設定
5.change_bgcolor 背景色 書式設定
6.change_fontsize フォントサイズ 書式設定(18pt)
7.align_left 左寄せ
書式設定
8.align_center 中央揃え
書式設定
9.align_right 右寄せ
書式設定
12.indent_add インデント 書式設定
13.erase_style 書式設定をクリア
当項目上部の画像赤枠にある書式設定は、このボタンで解除できます。

テーブル

visualedita_table

以下のようなテーブルを作成できます。

Example
あいうえお abcdefg

※最初に行と列をいくつずつ作成するかを選択できます。

add_table_flow

リスト

visualedita_list

アイコン 内容 設定例
list_dot リスト
  • 記事の本文を入力します。
  • 記事の本文を入力します。
  • 記事の本文を入力します。
list_nuber 番号リスト
  1. 記事の本文を入力します。
  2. 記事の本文を入力します。
  3. 記事の本文を入力します。

リストは 13.erase_styleで「書式をクリア」する事ができないので、リストをやめる場合は、リストにしている範囲を再選択し、該当のリストアイコンをもう一度クリックすると解除されます。

リンクの挿入

visualedita_link

アイコン 内容
link_add リンクの挿入/編集
link_del リンクの削除

リンクを挿入したいテキストをドラッグして選択します。
link_addをクリックすると、選択している文章にリンクを挿入、または編集(変更)が可能です。

insort_link

1「http://~」から始まるリンク先のURLをここに挿入します。

2必須ではありませんが、リンク先とマッチする説明文があると検索エンジン対策になります。

3新しいウィンドウまたはタブでリンクを開かせたい場合はここをチェックします。

その他のビジュアルエディタの機能

visualedita_others

アイコン 内容
add_emoji 絵文字の挿入 イメージ
スマホ操作時は画面を拡大すしてタッチすると選択しやすいです。
blockquote 他の記事を引用する際などに引用部分をスタイリングする(以下例)

こんな風に左側に引用していると分かるスタイリングがなされます。元に戻す場合は、再度引用されている範囲を選択し、blockquoteをクリックします。

search ブログ記事の中の文字を検索したり、一斉に置換する事ができますので、記事を修正する際に便利です。
to_back 一つ前の状態に戻す。
to_forward 戻る前の操作をやり直す。
html 現在の記事のHTMLソースを確認・操作する事ができます。

記事に画像を挿入する。

visualedita_addmedia

画像を挿入したい箇所にカーソルを置いたら、add_mediaをクリックします。

 

media_01

挿入する画像を選択するウィンドウが起ち上がります。

 

次にデスクトップにある画像を上記の赤枠エリアに、下記のようにマウスでドラッグして持っていきます。

media_03-2

 

media_setting

1挿入したい画像をチェック()する。(チェックされていればそのまま)

2画像の挿入され方の設定を行う。

media_sidebar
タイトル 画像のaltとして使われます。
キャプション 画像にキャプションとして説明書きを入れたい場合はこちらに入力します。
代替テキスト 画像のaltとして使われます。(タイトルより優先)
説明 画像についての説明です。特に表面上には表示されません。
配置 左寄せ、右寄せ、中央ぞろえなど、画像の配置を決めます。
リンク先 画像をクリックした際のリンク先を設定します。なお、「メディアファイル」を選ぶと、Ligthboxで元画像がポップアップします。
サイズ 元の画像を元に2~3種類のサイズが自動生成されておりますので、いずれかを選びます。

3設定が完了したら、「投稿に挿入」ボタンをクリックすると記事に画像が反映されます。

フリーワード検索で探す