WordPressのビジュアルエディタの使い方

WordPressのビジュアルエディタは、HTMLやCSSが分からない人でも、記事中の文字の色や大きさを変えたり、文字に下線を引いたりすることができるエディタです。

しかし、単に初心者向けのエディタというワケではなく、€（ユーロ）などの特殊な文字も一覧から選ぶだけで入力できるなど、すべての人に活用する機会のあるエディタです。

また、挿入された画像なども記事を書く画面に反映されますので、ビジュアルエディタに公開用のスタイルシートを上手に反映させれば、プレビューを確認しなくても公開後のページのイメージが把握できるのも特長です。

ビジュアルエディタに切り替える方法

WordPressの記事投稿画面右上の、ビジュアルタブをクリックすることで、ビジュアルエディタに切り替えることができます。

ただ、WordPressの個人設定で「ビジュアルリッチエディタを使用しない」にチェックが入っていると、ビジュアルエディタを利用することができません。
もし、投稿画面の右上に「ビジュアル」タブが表示されていない場合には、個人設定を見直してみましょう。

ビジュアルエディタのツールバー

ビジュアルエディタのツールバーには、文字を太字にする、リストを作成するといったボタンが用意されています。

左側から順番に、ツールバーのボタンの機能を解説します。（）内はどんなタグやスタイルでそれぞれの装飾が実現されているのかを表しています。

• 太字
  選択したテキストを太字にします。（strongタグ）
• イタリック
  選択したテキストを斜体にします。（emタグ）
• 打ち消し
  選択したテキストに打ち消し線を挿入します。（delタグ）
• 番号なしリスト
  選択したテキストを番号なしのリストにします。（ulタグ）
• 番号付きリスト
  選択したテキストを番号付きのリストにします。（olタグ）
• 引用
  選択したテキストを引用タグで囲います。（blockquoteタグ）
• 横ライン
  横ラインを挿入します。（hrタグ）
• 左寄せ
  選択したテキストを左揃えにします。（スタイルシートのtext-align:left）
• 中央揃え
  選択したテキストを中央揃えにします。（スタイルシートのtext-align:center）
• 右寄せ
  選択したテキストを右揃えにします。（スタイルシートのtext-align:right）
• リンクの挿入/編集
  リンクを挿入したり、挿入したリンクの編集を行います。（aタグ）
• リンクの削除
  リンクを削除します。
• ツールバー切り替え
  追加機能のツールバーを表示します。

一番右にある「ツールバー切り替え」ボタンをクリックすると、文字色の変更やテキストを見出しにするボタンなどが表示されます。

• 段落設定
  テキストの段落設定を変更します。「見出し1（h1）」「見出し2（h2）」「段落（p）」などに変更することができます。
• 下線
  テキストに下線を引きます。（スタイルシートのtext-decoration: underline）
• 両端揃え
  テキストを両端揃えにします。
• テキスト色
  テキストの色を変えます。（スタイルシートのcolor:#xxxxxx）
• テキストとしてペースト
  Microsoft Wordなどのリッチテキスト形式のテキストを、プレーンテキストとして貼り付けることができるモードに切り替わります。
  Wordなどの他のアプリで設定した書式設定をWordPressで適用したくない場合に使用します。
• 書式設定をクリア
  選択したテキストの設定をクリアします。
• 特殊文字
  特殊文字の一覧画面が開きますので、挿入したい文字を選択すれば、€（ユーロ）などの特殊文字を入力できます。
• インデントを減らす
  左側の空白を少し減らします。（スタイルシートのpadding-leftで、1回クリックごとに30px減ります）
• インデントを増やす
  左側の空白を少し増やします。（スタイルシートのpadding-leftで、1回クリックごとに30px増えます）
• 取り消し
  直前の操作を取り消します。
• やり直し
  取り消した操作をやり直します。
• キーボードショートカット
  キーボードショートカットのチートシート（カンニングペーパーみたいなもの）を表示します。

ビジュアルエディタを使ってみましょう

それでは実際にビジュアルエディタを使って、文字の色を変えてみましょう。

1. ビジュアルエディタに切り替えた後、文字の色を変えたいテキストをドラッグして選択します。
2. ツールバー切り替えをクリックした後にテキスト色をクリックして、変更する色をパレットから選びます。
3. これで文字の色が標準の黒から赤色に変わりました。

他にも重要な部分を太字にしたり、下線を引いたりして記事のメリハリをつけてみましょう。

アフィリエイトタグの貼り付けはテキストエディタで

ビジュアルエディタでHTMLタグを書くと、HTMLタグとしてではなく文字そのものがページに表示されます。
つまり、アフィリエイトタグなどをビジュアルエディタで貼り付けても、そのタグがそのまま画面上に表示されてしまい、アフィリエイトリンクが表示されないのです。

記事を書くときにビジュアルエディタを使っている方でも、アフィリエイトや広告のリンクなどの特殊なHTMLを貼り付ける必要がある場合には、テキストエディタを使う必要があります。

テキストエディタで貼り付けたHTMLは、そのままHTMLとして処理されますので、広告やアフィリエイトリンクがきちんと表示されます。

ビジュアルエディタで設定できる書式設定は、HTMLタグやスタイルシートを使って実現しています。
HTMLやCSSを理解していなくても、文字に様々な装飾を施せるビジュアルエディタは、活用次第で豊かな表現をサポートしてくれる機能です。

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

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

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

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

Webスク（6か月のガッチリ型）

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

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

WebCamp（1か月の集中型）

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

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

CodeCamp（2〜6か月のカスタマイズ型）

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

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

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