PRODUCTS

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

wp_logo
タグ:

wordpressのビジュアルエディタとは

 

まず、エディタとはなんなのか?

 

wordpressを使っている方ならいつも見ていますよね^^

 

この画面です↓

 

エディタにはHTMLエディタとビジュアルエディタの2種類がありますが

今回はビジュアルエディタに的を絞って説明したいと思います。

 

 

ビジュアルエディタの表示方法

 

 

 

エディタのツールバー上に表示される赤枠の「ビジュアル」を

クリックすることで表示することができます。

 

で、今回は緑枠のツールバーの使い方を一つずつ説明していきたいと思います。

 

ツールバー機能解説

 

では、ツールバーの使用方法を解説していきます。

 

 

まずは、赤枠部分を左から順番に説明していきます。

 

見出しで「効果<HTMLタグ>」を表示し、

使用例を画像とテキストで解説します。

 

太字にする<strong>

 

 

選択したテキストを太字にすることができます。

 

ボタンは「B」になっていますが、HTMLタグでいうとbタグではなく

strongタグになりますので注意してください。

 

斜体にする<em>

 

 

選択したテキストを斜体にすることができます。

 

こちらもボタンは「I」になっていますが、iタグではなく

emタグになりますので注意してください。

 

strong,emタグの効果はこちらを参考にしてください↓

強調タグ(strong,em)を使いSEO対策

 

取り消し線にする<del>

 

 

選択したテキストに取り消し線を引くことができます。

 

番号なしリスト<ul>

 

 

テキストのスタート位置をずらし

「・」でのリストを作成する際に使用します。

 

 番号付きリスト<ol>

 

 

テキストのスタート位置をずらし

番号付きのリストを作成する際に使用します。

 

引用<blockquote>

 

 

テキストのスタート位置をずらし

引用記事の盛り込み時などに使用します。

 

左詰め<p style=”text-align: left;”>

 

 

テキストの位置を左詰めにします。

 

中央寄せ<p style=”text-align: center;”>

 

 

テキストの位置を中央寄せにします。

 

右詰め<p style=”text-align: right;”>

 

 

テキストの位置を右詰めにします。

 

リンクの挿入/編集<a href=”URL”>

 

テキストを選択し、ボタンをクリックすると下記画面が表示されます。

 

 

赤枠部分にリンク情報を入力し、緑枠のリンクを追加で

アンカーテキストにすることができます。

 

なので、テキストにリンクを挿入するとき、テキストのリンクを編集するときに

使用します。

 

リンクを外す

 

 

挿入したリンクを外す際に使用します。

 

続きを読むを入れる<!–more–>

 

 

TOPページに表示される記事に「続きを読む」を入れます。

 

意外と初心者の人は知らない人多いのでは?

 

ぼくも最近気づきました^^;

 

スペルチェッカー

 

 

言語を選択して、スペルチェックを行います。

 

間違いがある場合はテキストの下に赤線が表示されます。

 

 

全画面表示を切り替える

 

 

こちらをクリックすると下記画面のようになります。

 

 

全画面表示で編集することができます。

 

まあ、あまり使いどころがわかりませんが^^;

 

全ツール表示切り替え

 

 

これが、今回伝えたかった最大のポイントです。

 

ツールバーの2段目が表示されます。

 

すいません、2段目の説明は次回に持ち越します><

 

背景色<span style=”background-color: カラー”>

 

 

選択したテキストの後ろに背景色を塗り、マーカーの役割を

します。

 

コピー

 

 

右クリックのコピー機能と同様です。

 

切り取り

 

 

右クリックのコピー機能と同様です。

 

貼り付け

 

 

右クリックの貼り付け機能と同様です

 

文字サイズの変更をする

 

 

文字サイズの変更ができます。

 

コードの整形

 

 

これは公開前にクリックすることでおかしなソースコードを

修正してくれるという機能です。