1. ホーム > 
  2. Webサイト制作 > 
  3. WordPressの使い方 > 
  4. WordPressのテキストエディタの使い方

WordPressのテキストエディタの使い方

テキストエディターは、アフィリエイトなどの特殊なHTMLタグの挿入もできるエディターモード。HTMLタグを直打ちする方も、ツールバーの機能で効率良くHTMLがマークアップできます。

  • 2016/3/28
  • 2016/3/20

WordPressのテキストエディタは、HTMLをそのまま記述することができるエディタです。

アフィリエイトや広告などのタグは、ビジュアルエディタで記事に貼り付けると、コードがそのまま記事中に表示されてしまいますので、特殊なHTMLを記述する必要がある時はテキストエディタを使います。

テキストエディタに切り替える方法

WordPressの新規投稿画面の右上のタブで「テキスト」をクリックすると、テキストエディタに切り替わります。
テキストエディタへの切り替えタブ

最初からテキストエディタのみで記事を書くことはもちろん、普段はビジュアルエディタを使って記事を書き、アフィリエイトタグを埋め込む時だけテキストエディタを使用するという使い方もできます。

テキストエディタを使って記事を書いた時でも、文章を改行すると改行タグが挿入され、空白を挟むと空白行から空白行までが、pタグで囲まれます。(時にこの仕様が悪さをすることがあるのですが…)

テキストエディタのツールバー

テキストエディタにも、文字を太字にしたり斜体にするためのタグを挿入するボタンが用意されています。

テキストエディタのツールバー

  • b
    文字を太字にするstrongの開始タグが挿入されます。もう一度クリックするとstrongのとじタグが挿入されます。
    <strong></strong>
  • i
    文字を斜体にするemの開始タグが挿入されます。もう一度クリックするとemの閉じタグが挿入されます。
    <em></em>
  • link
    ビジュアルエディタと同じ、リンクの挿入/編集ウィンドウが表示されます。
    <a href=”#”></a>
  • b-quote
    引用を示すblockquoteの開始タグが挿入されます。もう一度クリックするとblockquoteの閉じタグが挿入されます。
    <blockquote></blockquote>
  • del
    テキストを打ち消すdelの開始タグが挿入されます。また、開始タグにはボタンを押した日時がプロパティとして追加されます。もう一度クリックするとdelの閉じタグが挿入されます。
    <del datetime=”2016-03-20T12:01:55+00:00″></del>
  • ins
    追記を示すinsの開始タグが挿入されます。delタグと同様、開始タグにはボタンを押した日時がプロパティに追加されます。もう一度クリックするとinsの閉じタグが挿入されます。
    <ins datetime=”2016-03-20T12:01:55+00:00″></ins>
  • img
    画像のURLを指定してimgタグを挿入するときに使います。WordPressにアップロードした画像は「メディアを追加」ボタンから挿入する方法が一般的ですので、あまり使わないボタンです。
    <img src=”” alt=”null” />
  • ul
    番号なしリストを示すulの開始タグが挿入されます。もう一度クリックするとulの閉じタグが挿入されます。
    <ul></ul>
  • ol
    番号付きリストを示すolの開始タグが挿入されます。もう一度クリックするとolの閉じタグが挿入されます。
    <ol></ol>
  • li
    リスト項目を示すliの開始タグが挿入されます。もう一度クリックするとliの閉じタグが挿入されます。
    <li></li>
  • code
    プログラムコードであることを示すcodeの開始タグが挿入されます。もう一度クリックするとcodeの閉じタグが挿入されます。
    <code></code>
  • more
    ページを公開すると「続きを読む」と表示されるタグが挿入されます。
    ブログのトップページなど、記事ページ以外で記事の内容が表示されているページでは、moreコードを挿入した箇所に「続きを読む」というリンクが作られて、それ以降の本文が表示されなくなります。(記事ページではすべて表示されます)
    <!–more–>
  • タグを閉じる
    挿入したタグで閉じられていないタグをすべて閉じます。
    「b(strong)」をクリックした後に、「i(em)」をクリックして「タグを閉じる」をクリックすると、「b(strong)」も「i(em)」閉じタグが挿入されます。

テキストエディタを使ってみましょう

それでは実際にテキストエディタを使って、一部の文字を太字にしてみましょう。

  1. ドラッグして選択状態にします太字にしたいテキストをドラッグして選択状態にします。
  2. bボタンをクリックするとstrongタグで囲まれます「b」をクリックすると、選択したテキストがstrongタグで囲まれます。

リストタグを挿入する時など、テキストをドラッグで選択状態にして指定のボタンを押すだけでは、うまくタグが挿入されない場合があります。その場合には開始タグを挿入したいにカーソルを合わせてボタンをクリックし、閉じタグを挿入したい箇所でもう一度ボタンをクリックします。

それではリストタグを挿入してみましょう。

  1. 開始タグを挿入する箇所にカーソルを合わせてulボタンをクリックulの開始タグを挿入する箇所にカーソルを合わせて、「ul」ボタンをクリックします。
  2. 終了タグを挿入する箇所にカーソルを合わせて/ulボタンをクリックulの終了タグを挿入する箇所にカーソルを合わせて、もう一度「ul」ボタンをクリックします。
  3. リストタグのマークアップが完了同じ要領で、liタグの開始位置、終了位置で「li」ボタンをクリックします。

テキストエディタのツールバーに用意されたボタンは、リスト項目など何度も同じタグを繰り返し挿入する必要がある箇所では、直接HTMLタグを書くよりも効率的です。
ツールバーの機能を上手に使って、余計な労力をかけずに記事を書けるようにしましょう。

Webデザイン・プログラムスキルを身につけたい方におすすめしたいスクール

私もWebスキルを身につけるためにスクールに通いましたが、正直言って「趣味の講座レベルのスクール」が多く、実践的なスキルを身につける事ができるスクールは多くありません。

ただ全くの未経験ではWebを仕事にする事が難しいのも事実。そこでWebの実践的なスキルを身につけられるスクールをご紹介します。

スクールの価格は安くありませんので、まずは無料体験レッスンや無料カウンセリングで体験してみて、良さそうだなと思ったら本格的に取り組む方法をおすすめします。

Webスク(6か月のガッチリ型)

半年間、オンラインとオフラインのカリキュラムで「即戦力」と呼ばれるような人材になるためのスクール。業界の企業を見学するオフィスツアーやIT企業の人事担当との交流会など、現実的なキャリア形成のイメージを作れる機会があるのが良いです。

無料体験レッスンでは、キャリア形成の相談もできます。

WebCamp(1か月の集中型)

こちらは1ヶ月の短期集中型。と言っても、最初のカウンセリングを通してカリキュラムは個人ごとのオーダーメイドなので、自分の都合で学べるのが良いです。

このご時世、直接Web制作に携わらない部署の人もWebに関する知識は必要なので、社会人の方の受講も多いです。

CodeCamp(2〜6か月のカスタマイズ型)

現役エンジニア・デザイナーからマンツーマン指導が受けられるスクールです。内容的には他のスクールにひけはとらないにもかかわらず、オンラインのみなので価格が安いのが良いです。

新卒などの社内研修でも利用されているので、社員のスキルギャップに悩んでいる方にも良いかもしれません。

「役にたった」と思ったらシェアお願いします