AddQuickTagの使い方実践編「第1回:見出し」

AddQuickTagの使い方 見出し編

この記事では、WordPressプラグインのAddQuickTagで見出しを作成する方法を解説します。

「まだAddQuickTagをインストールしていない方」「AddQuickTagってなに?という方」は、まずAddQuickTagの設定方法と使い方の記事を読んでみてください。インストール方法や基本的な使い方について説明しています。

あわせて読みたい
AddQuickTagの設定方法と使い方 この記事では、AddQuickTagの設定方法と使い方を解説します。 AddQuickTagとは? AddQuickTagはエディターに表示されるクイックタグをカスタマイズできるようになるプラ...

見出しってどうやって作るの?

WordPressで見出しを作るには、見出しタグと呼ばれる文字列で見出しにしたい文字列を囲む必要があります。

使用できる見出しタグは決まっていて、次の6つが使用できる見出しタグになります。

  1. <h1> – 記事タイトルに使用される
  2. <h2> – 大見出しに使用される
  3. <h3> – 中見出しに使用される
  4. <h4> – 小見出しに使用される
  5. <h5> – あまり使用されない
  6. <h6> – ほぼ使用されない

これらのタグで見出しにしたい文字列を囲います。囲む際に1点注意点があります。後ろのタグには、<の後に/を入れるというルールです。

例:h1見出しタグの使い方
<h1>記事タイトル</h1>

後ろのタグに/を入れ忘れると見出しを作成できません。サイト全体のデザインが崩れてしまうこともあるので、注意しましょう。

AddQuickTagに見出しタグを設定する

AddQuickTagで見出しタグを使用するには、使用したい見出しタグの設定が必要です。ここでは見出しタグの設定方法について説明します。

事前にAddQuickTagのインストールおよび有効化を行っておいてください。

WordPress管理画面のメニューより設定 ≫ AddQuicktagをクリックし、AddQuickTagの設定画面へ移動します。

AddQuickTagの設定画面へ移動する

次のように1行ずつクイックタグを設定できます。すぐ下にあるテーブルを参考に見出しタグの設定を行ってください。

見出しタグの設定

クイックタグの設定内容

ボタン名 開始タグ 終了タグ
h2 <h2> </h2>
h3 <h3> </h3>
h4 <h4> </h4>

ボタン名、開始タグ、終了タグを埋めたら、右の欄にあるチェックボックスに忘れずにチェックを入れてください。

また設定は1行ずつしかできませんので、1行追加したら変更を保存ボタンを押してください。

上記の項目の設定を終えると次のようになります。

AddQuickTagの見出しタグの追加設定

これで見出しタグを使用する準備ができました。それでは、実際にクイックタグを使用してみましょう。

見出しタグを追加する テキストエディター編

テキストエディターでAddQuickTagの使い方を説明します。

テキストエディターでは、次のように設定したボタンが追加されます。

設定したクイックタグ(テキストエディター)

ここでは、h2タグを使って大見出しを作成します。まずは見出しにしたい文字列を入力します。

見出しにする文字列を入力する

続いて、見出しにしたい文字列を選択し、使用したいタグボタンをクリックします。

h2タグボタンをクリックする

すると選択した文字列の前に開始タグが挿入され、選択した文字列の後ろには終了タグが挿入されます。

大見出しの作成が完了した

これでh2タグで大見出しの作成は完了です。

見出しタグを追加する ビジュアルエディター編

ビジュアルエディターでAddQuickTagの使い方を説明します。

ビジュアルエディターでは、次のように設定したボタンが追加されます。

設定したクイックタグ(ビジュアルエディター)

注意
もし1行分しかクイックタグが表示されていない方は、ツールバー切り替えボタンをクリックしましょう。

ツールバー切り替えボタンをクリックする


ここでは、h3タグを使って中見出しを作成します。まずは見出しにしたい文字列を入力します。

見出しにする文字列を入力する

続いて、見出しにしたい文字列を選択してください。

見出しにする文字列を選択する

文字列を選択した状態でAddQuickTagのプルダウンをクリックし、表示された項目の中から使用したいタグのボタン名をクリックします。

h3タグをクリックする

…何も変わっているように見えませんね。でも実はこれでh3タグの挿入が完了しています。

中見出しの作成完了した

タグが挿入されたか確認するには、テキストエディターに切り替えましょう。すると選択した文字列の前後にh3タグが挿入されているのが確認できます。

テキストエディターでタグの挿入を確認する

このようにビジュアルエディターでは、文字の大きさの変化がわずかの時にタグが挿入されたかわかりにくいという欠点があります。

全然見えてなくて、実はタグだらけになっていたということもあります。気をつけながら使いましょう。

他にもよく使うタグは、AddQuickTagで設定しておきましょう。

AddQuickTagで登録しておくと便利なタグ

よかったらシェアしてね!
  • URLをコピーしました!