アドバンストツールバーの使い方

WordPressの「アドバンストツールバー」は、投稿編集画面の1つであるビジュアルエディタで入力補助機能を増やすためのツールです。このページでは、アドバンストツールバーの基本的な使い方を紹介します。

目次

アドバンストツールバーの使い方

アドバンストツールバーを表示させるためには、ビジュアルエディタにある[ツールバー切り替え]ボタンをクリックします。
ビジュアルエディタ ツールバー切り替えボタン

下は、WordPress 4.3 時点のアドバンストツールバーです。文字に下線を付けたり色を変えたりする機能などが使えます。
アドバンストツールバーの使い方

これらの機能について、順に見ていきましょう。

①フォーマットの選択

標準状態は[段落]になっていますが、ここでは下記の項目から選択できます。

  • 段落
  • 見出し(h1~h6)
  • 整形済みテキスト
段落
改行するまでの文字列が1つの段落になります。
自動挿入されるHTMLタグ:<p>~</p>
見出し(h1~h6)
<hx>~</hx>で囲まれ、見出しとして表示されます。xの部分には、1~6の数字が入ります。「h1」が最も大きい見出しです。
自動挿入されるHTMLタグ:<hx>~</hx>
整形済みテキスト
記述された改行やスペースがそのままページ上に反映されます。
自動挿入されるHTMLタグ:<pre>~</pre>

②下線

選択した文字列に、下線を引くことができます。
自動挿入されるHTMLタグ:<span style="text-decoration: underline;">~</span>

③両端揃え

選択した文字列の配置を、両端揃え(均等割付)することができます。ただし、この機能は使用環境によっては正しく表示されない場合があります。
自動挿入されるHTMLタグ:<p style="text-align: justify;">~</p>

④テキスト色

選択したテキスト(文字列)の色を変更できます。
自動挿入されるHTMLタグ:<span style="color: カラーコード">~</span>

⑤テキストとしてペースト

テキストファイルなどに書かれたテキスト(文字列)をコピーした後、そのまま貼り付けることができます。例えば、HTMLタグをそのままサイトに表示させたい時などに使えます。

HTMLの特殊文字
HTMLの特殊文字は、そのまま投稿するとブラウザで表示する際にHTMLタグと混合してしまい、きちんと表示できない特殊な文字のことです。

例えば、このページで各項目ごとにご紹介している「自動挿入されるHTMLタグ」は、そのまま記事編集画面に入力してもブラウザではうまく表示されません。

具体例
このページの「④テキスト色」のところで書いてある
【<span style="color: カラーコード">~</span>】という部分は、実際の入力では、
【&lt;span style=&quot;color: カラーコード&quot;&gt;~&lt;/span&gt;】
というように文字を変換させなければなりません。しかし、「⑤テキストとしてペースト」機能を使えば、この文字変換の作業をせずに済みます。

⑥書式設定をクリア

書式設定(下線やテキスト色の変更など)を実行した部分を選択し、このボタンを押せば、書式設定をクリア(解除)できます。

⑦特殊文字

下のような特殊文字を一覧の中から選択して、表示させることができます。
アドバンストツールバー 特殊文字

⑧インデントを減らす/増やす

段落のインデント(行頭の空白)を増減できます。1回押すたびに、30px分のインデントが増減します。
自動挿入されるHTMLタグ:<p style="padding-left: 30px;">~</p>

⑨取り消し/やり直し

直前の操作を取り消したり、元の状態に戻したりすることができます。

⑩キーボードショートカット

キーボードショートカットの一覧を確認できます。
アドバンストツールバー キーボードショートカット

この記事が気に入ったら
フォローしてね!

この記事を書いた人

WordPress超初心者講座の運営者。
ワードプレスでブログ・サイトを作り始めて12年。アラフィフ。
今も年間330日くらい、WordPressを触っています。

Twitterはじめました。

目次