ホームページ制作・ホームページ作成なら名古屋のオールシステムへお任せください。

Tweet

WordPressで記事の本文を書くときに使用するエディタに、「ビジュアルエディタ」と「テキストエディタ」の2種類があるのをご存知ですか？
初めて聞いたという人は、一度管理画面から記事の編集画面を見てみてください。
エディタの右上に「ビジュアル」と「テキスト」というタブがあるのがわかると思います。
この左のタブが「ビジュアルエディタ」、右のタブが「テキストエディタ」の切り替えを行えるタブになります。
今回は分かると便利な「テキストエディタ」について記載していきます。

WordPressの2種類のエディタ

先ほど書いたようにWordPressの記事の編集画面には、2種類のエディタを切り替えることのできるタブが存在します。
一つは「ビジュアル」エディタで、もうひとつは「テキスト」エディタです。
バージョンによって「テキスト」エディタが「HTML」と表記されていることもあります。

ビジュアルエディタとは

実際のWebサイトに表示されるように反映されるので、編集しながら同時に確認を行うことができます。
太字にしたり、文字の色を変えたりが感覚的に行えるので、HTMLタグを知らない人でも簡単に記事ができます。

テキストエディタとは

HTMLタグを編集することができます。
HTMLファイルと同じように編集できるので、自分でタグを追加したい場合や、スタイルシート・javascriptの設定がしたい時にはこちらのエディタを使用します。
上の画像の例でいうと、<strong>～</strong>で囲むと太文字、<span style=”color: #ff0000;”>～</span>で囲むと赤い文字色に変わるようにタグが入力されています。

どちらのエディタの方が優れているというよりは、
少しの文字の変更や太字にするくらいの装飾であれば、ビジュアルエディタ。
HTMLタグを用いて複雑な装飾をしたい場合や情報を付け加えたいというのであれば、テキストエディタ。
というように使い分けをするのが良いと思います。

HTMLタグの基本の書き方

<開始タグ>～で囲む

タグには「開始タグ」と「終了タグ」があり、この2つで内容を囲むように記述します。
「終了タグ」を持たないものや「終了タグ」を省略できるものもありますが、基本的には対象の内容を「開始タグ」と「終了タグ」で囲んで使用します。
例でいうと、
<h1>が開始タグ、</h1>が終了タグ、
そして開始タグと終了タグで囲まれた「【WordPress】テキストエディタの使い方＆HTMLタグのご紹介」というテキストが要素の内容です。

属性の指定

HTMLではそれぞれのタグごとに役割などの詳細情報を指定できる「属性」が指定できます。
開始タグの要素名の後ろに半角のスペースを入れ、「属性名=”値”」の形で山括弧<>の中に記述します。

例のように<p>要素のalign属性にcenterという値を指定すると、段落が中央揃えで表示されます。

属性を指定するときは、値を半角の「” ”（ダブルクォーテーション）」、または半角の「’ ‘（シングルクォーテーション）」で囲みます。
ダブルクォーテーションの方が一般に広く使われている印象です。

タグを入れ子にする

HTML文書では、タグが付けられた要素の中に別のタグを入れ、さらに情報を追加するという事ができます。
これを入れ子といいます。
入れ子にする場合は、終了タグが前後しないように、より内側のタグから閉じていきます。
例）
正しい記述：
<p>指定したい文字を<strong>太字</strong>にする記述方法です。</p>

誤った記述：
指定したい文字を<strong><p>太字</strong>にする記述方法です。</p>

タグがうまく効かない場合はこうした誤った記述になっている場合がありますので、一度チェックしてみましょう。

ツールバーについて

テキストエディタには初めからタグを挿入するためのボタンがついています。

「b」太字

変更したい文字を<strong>～</strong>で囲むと文字が太文字になります。

「i」イタリック

文字を強調する<em>というタグの開始タグが挿入されます。
指定の文字を<em>～<em>で囲むと、一般的なブラウザではイタリック鯛（斜体）で表示されます。

「link」リンク

ビジュアルエディタと同様に、リンクを貼ることのできる、リンクの挿入/編集ウィンドウが表示されます。
<a href=”リンク先”>リンクさせる文字</a>と記述します。

例）<a href=”https://www.web-alls.co.jp/” target=”_blank”>テキスト</a>

例にある「target=”_blank”」を入れると別画面を開いてリンクされます。
外部のサイトにリンクを飛ばすような際によく使用されます。

「b-quote」引用・転載

<blockquote>～</blockquote>
で囲まれた部分が引用・転載であることを表します。
<blockquote>タグは比較的長い文章を引用・転載するときに使用します。
改行を必要としない引用・転載の場合は<q>タグを使用します。

「del」打消し

対象の文字を<del>～</del>で囲むと、その部分が削除されたことが示されます。
一般的なブラウザでは打消し線が表示されます。

「ins」追加

Insertの略で、<ins>～</ins>で囲まれた部分が後から追加された部分であることを表します。
一般的なブラウザでは下線が引かれて表示されます。

「img」画像を挿入

画像を表示するときに使います。表示する画像ファイルはsrc属性で指定します。
alt属性は画像が表示できない場合に代わりに表示するテキストを指定します。
alt属性で指定するテキストは読み上げソフトで音声になることがあるので、適切な内容のものを指定しましょう。
画像に載せてあるテキストを入れるとよいかと思います。

<img src=”画像のURL” alt=”画像の説明”>

特別な理由がない場合は、「メディアを追加」ボタンで画像を挿入するのが一般的なので、あまり使用されないボタンだと思います。

「ul」、「ol」、「li」リスト

「ul」は序列のないリスト、「ol」は序列のあるリストを表示するときに使用します。
「ul」・「ol」リストの各項目は「li」を用いて記述します。

「code」プログラムのソースコード

<code>～</code>で囲まれたテキストがプログラムのソースコードであることを表します。

「more」続きを読む

<!– more –>というタグが挿入されます。

記事を公開すると表示される、「続きを読む」というWordPressの機能の埋め込みができます。
moreコードを挿入したところに「続きを読む」というリンクが貼られ、それ以降の本文は省略されます。

「タグを閉じる」

ツールバーを押して挿入したタグで、閉じられていないタグをすべて閉じます。
入れ子になっていてもボタン一つで閉じることができます。

例）

「タグを閉じる」ボタンを押すと、<em>も<strong>も順番通りに閉じてくれます。

まとめ

HTMLのコーディングをしているときはあまり使わないタグがありましたが、
<blockquote>や<code>、<ins>あたりは記事を書いてると使うことが多そうなタグだと思います。
テキストエディタを使ったことがないという人はこれを機にまずは太文字からでもチャレンジしてみてはいかがでしょうか。
慣れてくるとエディタに標準装備されているタグでは足りなくなるので、他の色々なタグにもチャレンジしていただければと思います。