WordPressの始め方と使い方をわかりやすく解説!

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

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

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

https://fox-wp.com/addquicktag-setup/

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

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

h3

h4

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意

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

ツールバー切り替えボタンをクリックする
ここでは、h3タグを使って中見出しを作成します。まずは見出しにしたい文字列を入力します。

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

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

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

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

h3タグをクリックする

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

中見出しの作成完了した

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

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

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

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

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

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

関連記事

FOXWP

Conoha WINGからエックスサーバーにWordPressの引越しを行う手順

Conoha WINGからエックスサーバーに引越しを行う手順 Conoha WINGからエックスサーバーに引越しを行う際の注意点 ネームサーバーがエックスサーバーのネームサーバーに設定されていないと、無料独自SSLの設定

FOXWP

wp-envで構築したWordPressのデータベースへアクセスする手順

wp-envで構築したローカル開発環境のデータベースにサクセスするには、Local WordPress EnvironmentのAccessing the MySQL Databaseに記載されている方法で行えます。 参

FOXWP

【WordPress】はじめてのブロックエディター開発

この記事では、WordPressでブロック開発をした際のメモです。 WordPressで必要最低限のブロックを開発するには、@wordpress/create-blockパッケージを作成することですぐにできます。 参考:

FOXWP

wp-envとは?使い方を解説

wp-envを利用した際のメモです。 wp-envとは? ローカルのWordPress開発環境 wp-envとは、ローカルのWordPress開発環境です。Docker Desktopと合わせて利用します。 wp-env

FOXWP

WordPressのおすすめセキュリティプラグイン6選

WordPressセキュリティプラグインを使えば、専門的知識がない方でも手軽にセキュリティ対策を行うことができます。 マルウェア・ブルーフォースアタック・ハッキングといった様々な障害からあなたを守ってくれます。 この記事

FOXWP

WordPressでおすすめの目次プラグイン8選

記事に目次を挿入すれば、読者に記事の全体像を理解してもらいやすくなります。欲しい情報があるか判断する手助けとなり、読者にとって使いやすいサイトと認識してもらえます。 この記事では、目次を挿入できるおすすめのWordPre