(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PL2SQSQ');

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

フリーワード検索で探す