AddQuicktagの初心者向け設定方法と使い方、Advanced Editor Toolsでの使い方も紹介するよ!

WordPress
この記事は約19分で読めます。

AddQuicktagの初心者向け設定方法と使い方、Advanced Editor Toolsでの使い方も紹介するよ!のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

WordPressを用いたウェブサイト運営において、執筆の効率化は避けて通れない課題です。特に、記事のデザインを整えるためのHTMLタグや、頻繁に使用する定型文を毎回手動で入力することは、多くの時間を浪費するだけでなく、入力ミスの原因にもなります。こうした非効率な作業を劇的に改善し、プロフェッショナルな編集環境を構築するための決定版といえるツールが「AddQuicktag」です 。本レポートでは、AddQuicktagの基礎から、最新のブロックエディターでの運用術、さらには高度な拡張プラグインである「Advanced Editor Tools」との連携方法までを網羅的に解説し、執筆ワークフローの最適化を図ります。

執筆効率を劇的に向上させるAddQuicktagの導入意義

AddQuicktagは、WordPressのエディター上に独自のボタンを追加し、あらかじめ登録しておいたHTMLタグやショートコード、定型文を一クリックで挿入可能にするプラグインです 。例えば、マーカー線や補足説明のための囲み枠、アフィリエイトリンクのテンプレートなどをボタン化しておくことで、複雑なコードを覚える必要がなくなります 。   

このプラグインを導入する最大のメリットは、単なる時短に留まりません。複数の執筆者が関わるメディア運営においては、使用するタグを統一することでサイト全体のデザインの一貫性を維持できます。また、HTMLやCSSの知識が乏しい初心者であっても、管理者が設定したボタンを選択するだけで、高度に装飾された記事を作成できるという運用の安定性をもたらします。

AddQuicktagプラグインとは?

 AddQuicktagプラグインは、記事入力時に記事入力時にAddQuicktagに登録したタグを簡単に呼び出し記事中に挿入してくれる便利なWordPrssプラグインで、無料で利用できます。

 このプラグインがあると、定常的に使う文や少し変わった記号なども登録しておくと便利に使え、記事を書くのが時短になります。

Redirectionプラグインは、現時点(2021年7月16日)でのバージョンが2.6.1です。

 このプラグインの「詳細表示」を見ると、有効インストール数200,000+となっており、それほど多くないですが、レビュー45件、評価が4.7となっており、利用している方の評価は大変高いプラグインです。

AddQuicktagの日本語表示

 Google ChromeやMicrosft Edgeの場合ですと翻訳機能が付いているので、英語のページなどを日本語に翻訳してくれます。

 AddQuicktagで英語表示されているところがあった際には、そのページの翻訳したい英語の表示部分で右クリックして表示されるメニューで「日本語に翻訳」を選択すれば、日本語に翻訳して表示してくれます。

 例えば、AddQuicktagプラグイン画面で「詳細を表示」で現れるAddQuicktagの説明は英語で書かれている部分もありますが、この英語の部分で右クリックしてでるメニューで「日本語に翻訳」をクリックすれば、日本語に翻訳して表示してくれます。

 この機能は、AddQuicktagのページに限らず、他の英語表記の部分でもできますので、試しにやってみて下さい。

AddQuicktagインストールと有効化

 WordPressのダッシュボードより、「プラグイン」⇒「新規追加」と順にクリックします。

 上部右の方にあるキーワードプラグインの検索欄に「AddQuicktag」と記入して検索すると、表示される「AddQuicktag」の右下にある「使用中のWPバージョンと互換性あり」と表示されていることを確認後、右上にある「今すぐインストール」をクリックします。

 その後に出る「有効化」をクリックします。

 すると、WordPressのプラグインに「AddQuicktag」が追加され、プラグイン画面の上部に「プラグインを有効化しました」と表示されます。

「AddQuicktag」プラグインの下に表示される緑の四角で囲った「設定」をクリックすることにより、設定が行えます。

AddQuicktagプラグインの初心者向け使い方

 上述の「AddQuicktagプラグイン」の「設定」をクリックすると、大きく分けると4つの設定項目があります。

  1. クイックタグの追加と削除
    記事などで利用するために、利用するタグなどを登録したり、いらないタグを削除したりする設定部分
  2. デフォルトのクイックタグを非表示にする
    初期値で登録されているタグを利用しない場合にチェックを入れ、非表示とする設定部分
  3. 拡張コードクイックタグボタン
    「pre: 拡張コードボタン」と「htmlentities: HTML 文字参照、HTML デコード」を利用できるように追加する設定部分
  4. エクスポート、インポート
    他の利用していたAddQuicktagの設定をインポートして使えるようにしたり、AddQuicktagの設定をエクスポートして他で利用できるようにするボタン

クイックタグの追加と削除

 「クイックタグの追加と削除」の設定項目について、表にまとめました。
設定項目内容
ボタン名エディターに表示するボタンの名前
ダッシュアイコンボタン名の横に表示されるアイコン
ラベル名ボタンにカーソルを乗せたときに表示する補足テキスト
開始タグ開始タグ 例)<p>
終了タグ終了タグ 例)</p>
アクセスキーショートカットキーの設定
並び順登録したタグの並び順(0〜)
チェック項目ボタンを表示するエディター選択、右端のチェックマークで全選択
 ここで、最低限入力が必要な必須項目は、ボタン名、開始タグ、どこに表示させるかのチェッく項目(全選択チェックでOK)の3つです。

タグの登録

 それでは、ここで簡単な例として、何時も利用する「こんにちは、○○です。(^O^)」を登録してみましょう。

ボタン名 : 挨拶(記事用)⇒この部分はあなたの好きな名前を入力
開始タグ : <p>こんにちは、○○です。(^O^)
終了タグ : </p>
チェック項目 : 一番李ダリの「レ」にチェックして、全てを選択
最後に、「変更を保存」をクリック
 ここで、実際に利用する際には、○○にはあなたのニックネームなどを入れ替えてくださいね。

Advanced Editor ToolsでAddQuicktagを試しに使ってみよう!

 それでは、実際に新規記事でどのよう登録したタブが表示され、記事中に入力できるかを見てみましょう。

 なお、ここで紹介するのは、表作成などに便利なAdvanced Editor Toolsプラグイン(5.6.0)がインストールされているものとします。

 また、テーマももしかすると影響するかもしれませんので、ここで利用しているテーマは、Cocoonであることが前提です。

 WordPressの左メニューから「投稿」⇒「新規追加」と順にクリックすると、新規記事の入力画面が立ち上がります。

 AddQuicktagに一つでもタグを登録すると、文書の編集画面に「Quicktags」が表れ、そこをクリックすると登録したタグが表示され、そのタグをクリックすると登録内容が記事に記入されます。

 ここでは、「ボタン名:挨拶(記事用)」が「Quicktags」に登録され、「挨拶(記事用)」をクリックすると、記事に「こんにちは、○○です。(^O^)」と言う文が入力されていることが分かります。

 薄赤で塗ってあるのは入力されません。

 これは分かり易くするために私の方で塗ったものです。

各エディター環境におけるAddQuicktagの実践的運用

WordPressには、旧来の「クラシックエディター」と、最新の「ブロックエディター(Gutenberg)」が存在します。AddQuicktagは元々クラシックエディター向けに最適化されたプラグインですが、現在のブロックエディター環境でも工夫次第でその威力を発揮し続けることができます 。

クラシックエディター(旧エディター)での活用

クラシックエディター環境、またはプラグイン「Classic Editor」を導入している場合、AddQuicktagの使い方は非常にシンプルです。ビジュアルエディターでは、ツールバーに新しく「Quicktags」というドロップダウンメニューが出現します 。装飾したいテキストをマウスでドラッグして選択状態にした後、このメニューから登録したボタン名をクリックするだけで、即座にタグが適用されます 。テキストを選択していない状態でボタンを押した場合は、開始タグと終了タグが連続して挿入され、その間にカーソルが置かれる形になります 。

テキストエディター(HTML編集モード)の場合は、メニュー形式ではなく、ツールバー上に個別のボタンとして横一列に配置されます 。これにより、ソースコードを編集しながらでも素早く装飾を適用できる高い操作性が実現されます。

ブロックエディター(Gutenberg)での活用術

現在のWordPress標準であるブロックエディターでは、AddQuicktagのボタンはデフォルトの段落ブロックのツールバーには直接表示されません。これを解決するためには、「クラシックブロック」を利用するという手法をとります 。

まず、エディター左上の「+」アイコンから「クラシック」ブロックを呼び出します 。このブロックは、ブロックエディター内部でクラシックエディターの機能を利用できる特殊なブロックです。クラシックブロック内に文章を入力し、装飾したい部分を選択した状態でツールバーの「Quicktags」をクリックすれば、以前のエディターと同様にタグの挿入が可能です 。もしツールバーに「Quicktags」が見当たらない場合は、ツールバーの端にある「ツールバー切り替え」ボタンをクリックして、隠れている2段目のメニューを表示させる必要があります 。

Advanced Editor Toolsとの高度な連携設定

「Advanced Editor Tools(旧:TinyMCE Advanced)」は、WordPressのエディター機能を大幅に強化し、ボタンの配置を自由に変更できるプラグインです 。AddQuicktagと組み合わせることで、執筆環境をさらにパーソナライズできます。

連携のための設定プロセス

Advanced Editor Toolsの設定を通じて、AddQuicktagのメニューを最適な位置へ配置する手順を解説します。

1. 管理画面の「設定」から「Advanced Editor Tools」を選択します 。

2. 「ブロックエディター (TinyMCE)」または「旧エディター (TinyMCE)」のタブが表示されます。自身の利用環境に合わせたタブを選択してください 。

3. 画面中央から下部にかけて「使用しないボタン」のリストがあります。その中から「Quicktags」という名称のボタンを探します 。

4. この「Quicktags」ボタンをマウスでドラッグし、画面上部のツールバー(有効なボタンが並んでいるエリア)の使いやすい位置へドロップします 。

5. 設定を確定させるために、画面の上部または下部にある「変更を保存」をクリックしてください 。

この設定を施すことで、ブロックエディター内のクラシックブロックや、クラシックエディターのツールバー上に「Quicktags」が常に固定で表示されるようになり、メニューを探す手間を最小限に抑えることができます 。

サイト間移行とバックアップ:エクスポート・インポート機能

AddQuicktagには、登録したタグ設定を外部ファイルとして書き出したり、読み込んだりする機能が備わっています 。これは、複数のウェブサイトを運営している場合や、テスト環境から本番環境へ設定を移行する際に極めて有用です。

設定のバックアップと移行手順

エクスポートされた設定は、.jsonという拡張子を持つファイルとして生成されます 。

操作手順と詳細注意点
エクスポート設定画面下部の「エクスポート」セクションにある「エクスポートファイルをダウンロード」をクリックします 。定期的なバックアップとして保存しておくことが推奨されます 。
インポート移行先のサイトの設定画面にある「インポート」項目で、「ファイルを選択」をクリックし、保存済みのJSONファイルを選びます 。既存のタグ設定がある場合、上書きや重複に注意が必要です 。
反映ファイル選択後、「ファイルのアップロード・インポート」ボタンをクリックすることで全てのタグが復元されます 。反映後、必ずエディターでボタンが表示されているか確認してください。

この機能を活用すれば、一度作り上げた理想的な編集ボタンセットを、他のサイトでも即座に再現できるようになります。

実践的なデザイン装飾:コピペで使えるCSSサンプル集

AddQuicktagにボタンを登録しても、それに対応するCSS(スタイルシート)がサイトに設定されていなければ、期待通りの見た目にはなりません。ここでは、初心者でも扱いやすい汎用的なデザインのコード例を紹介します。これらのCSSは、WordPressの「外観」>「カスタマイズ」>「追加CSS」の欄に貼り付けて使用してください 。

視認性を高めるマーカー装飾

文章のキーポイントを強調するためのマーカーです。単純な背景色指定よりも、下線風のグラデーションにすることで洗練された印象を与えます 。

AddQuicktag設定:

開始タグ: `<span class="my-yellow-marker">`

終了タグ: `</span>`

追加CSS:

.my-yellow-marker {
  background: linear-gradient(transparent 70%, #ffff88 70%);
  font-weight: bold;
}

情報を整理する角丸ボックス(囲み枠)

補足説明やアドバイスを掲載するためのボックスデザインです 。

AddQuicktag設定:

開始タグ: `<div class="info-rounded-box">`

終了タグ: `</div>`

追加CSS:

.info-rounded-box {
  padding: 1.5em;
  margin: 1em 0;
  border: 2px solid #6091d3;
  border-radius: 12px;
  background-color: #f0f7ff;
  color: #333;
}

影付きの付箋風デザイン

重要事項やメモを目立たせるのに最適な立体感のあるデザインです 。

AddQuicktag設定:

開始タグ: `<div class="note-shadow-box">`

終了タグ: `</div>`

追加CSS:

.note-shadow-box {
  padding: 1em;
  margin: 1.5em 0;
  background: #fff8e8;
  border-left: solid 8px #ffc06e;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
}

トラブル解決:設定が保存できない・反映されない時の対処法

AddQuicktagの使用過程において、設定の保存時にエラーが発生したり、エディターにボタンが現れなかったりすることがあります。これらには明確な原因と対処法が存在します。

セキュリティ設定(WAF)による403 Forbiddenエラー

サーバーのセキュリティ機能「WAF(Web Application Firewall)」が有効な場合、AddQuicktagの設定保存操作が「攻撃(不正なスクリプトの送信)」とみなされ、遮断されることがあります 。この場合、画面に「閲覧できません」というエラーメッセージが表示されます。対処法として、保存作業を行う間だけ一時的にWAFを無効化します 。

1. サーバーの管理パネル(ConoHa WINGやエックスサーバー等)にアクセスします。

2. セキュリティ設定の項目から「WAF」を探し、設定を「OFF」にします。

3. WordPressに戻り、AddQuicktagの設定を保存します。

保存完了後は、サイトの安全性を保つために必ずWAFを「ON」に戻してください 。

プラグインの不具合とバージョン・ダウン

WordPressのコアアップデートにより、最新版のAddQuicktagでJSONファイルのインポート機能などが正常に動作しなくなるケースが報告されています 。このようなバグに遭遇した際は、あえて古い安定バージョン(例:v2.5.3)にダウングレードすることで問題が解消することがあります 。ダウングレード作業は「WP Rollback」プラグインを利用すると安全かつ迅速に行えます 。ただし、古いバージョンを使用し続けることはセキュリティ上のリスクも伴うため、不具合が解消された最新版がリリースされた際には速やかにアップデートを検討すべきです 。

専門的考察:AddQuicktagとブロックパターンの役割分担

現代のWordPress(2026年時点)には、複数のブロックを組み合わせたレイアウトを保存できる「ブロックパターン」という標準機能が存在します 。これにより、「AddQuicktagはもう不要なのではないか」という疑問を持つユーザーも増えています。しかし、実際にはこれら二つの機能は、補完関係にあります。

ブロックパターンは、記事の構成要素(画像、テキスト、ボタンのセットなど)をマクロな視点で再利用するのに適しています 。一方で、AddQuicktagは「文章内の一部の単語を装飾する」というミクロな編集作業において、ブロックパターンよりも遥かに少ない操作ステップで完結するという圧倒的な優位性を持っています。効率的なサイト運営のためには、マクロなレイアウトにはブロックパターンを、ミクロな装飾や特定のタグ挿入にはAddQuicktagを、というように使い分けることが、プロフェッショナルな執筆ワークフローにおける最適解です 。

結論

AddQuicktagは、WordPress初心者が最初の一歩を踏み出す際の強力な武器であり、同時にベテランの作業効率を支える不可欠なインフラでもあります。本レポートで解説したように、基本的な登録からAdvanced Editor Toolsとの連携、CSSによるカスタマイズ、およびサーバー側のトラブルシューティングを適切に行うことで、あなたの執筆環境は驚くほど快適になります。ツールを使いこなすことは、単に時間を節約するだけでなく、執筆者がより本質的な「コンテンツの質」に集中できる環境を作ることと同義です。本レポートが、皆様のWordPressライフをより豊かで生産的なものにする一助となれば幸いです。

おわりに

 如何だったでしょうか?

 AddQuicktagプラグインとはどのようなもの?、AddQuicktagの日本語表示はどうしたらよいの?、AddQuicktagプラグインのインストールと有効化はどうするの?、AddQuicktagプ、ラグインの初心者向け使い方はどうするの?、AddQuicktagの設定画面の説明、タグの登録、Advanced Editor ToolsでAddQuicktagを試しに使ってみよう!などについて解説してきました。

 この記事が少しでもあなたのお役に立てれば、これほど嬉しいことはありません。

以上です。

参考資料

1. ブロックエディタで記事を公開するまでの6ステップ, https://www.xserver.ne.jp/blog/using-block-editor/

2. 【WordPress】AddQuicktagの使い方!設定やボタンが表示されない時の対処法, https://seory.co.jp/addquicktag/

3. WordPressのブロックエディタ(Gutenberg)の使い方を初心者向けに解説, https://www.nishi2002.com/33432.html

4. AddQuicktagの設定方法と使い方を初心者向けに解説!, https://hitodeblog.com/addquicktag-settei

5. AddQuicktagの使い方と設定方法をわかりやすく解説【WordPressプラグイン】, https://teru1213.com/wordpress-addquick/

6. AddQuicktagの設定方法と使い方|WordPress, http://websolutions-tips.com/wordpress/add_quick_tag_setting/

7. WordPressプラグイン AddQuicktag の設定方法と使い方, https://wind-mill.co.jp/wordpress-addquicktag/

8. 【AddQuicktag】WordPressにボタンを登録して効率的にタグ装飾する方法, https://webst8.com/blog/wordpress-plugin-addquicktag/

9. AddQuicktagの設定ファイルをエクスポート・インポートする方法, https://tcd-theme.com/2016/03/quicktag_1.html

10. AddQuicktagの設定が保存できない・反映されない時の対処法, https://aketama.work/addquicktag-nosave

11. AddQuicktagに登録して使える便利な囲み枠・ボタンのデザインサンプル, https://tcd-theme.com/2021/03/tcd-quicktag.html

12. WordPressプラグイン AddQuicktag でインポートができない不具合の解消法, https://tcd-theme.com/2022/05/addquicktag-fix.html

13. 【2022年版】AddQuicktagが表示されない? 反映されなくて使えないときの対処法!, https://note.com/feliz_chiro/n/naeb96e4bdc75

14. AddQuicktagの使い方:よく使うコードを登録して記事作成を時短しよう, https://yoshitechblog.com/code-registration-addquicktag

15. WordPressプラグイン AddQuicktagの設定と使い方【記事装飾の時短に必須】, https://ponhiro.com/addquicktag-how-to/

16. 囲み枠のCSSデザインおすすめ20選:コピペで使える!, https://web-camp.io/magazine/archives/97812/

17. 【AddQuicktag】クイックタグの追加と削除の設定方法, https://tennosukex.com/how-to-set-addquicktag

18. WordPressでブロックエディタをクラシックエディタのように使う方法, https://pulpfingers.com/2269

19. WordPressプラグイン AddQuicktagの使い方とサンプルコード, https://ecco.co.jp/blog/addquicktag/

20. WordPressでクイックタグの配色や配置を変更する方法, https://tcd-theme.com/2016/03/quicktag_3.html

21. ブロックパターンとブロックスタイルの違い・使い分けについて, https://zenn.dev/hamworks/articles/8066f73f3eee06

22. Advanced Editor Tools(旧TinyMCE Advanced)の設定方法と使い方, https://hikkoshi.macnet.jp/blog/classiceditor-to-blockeditor/

23. TinyMCE Advanced の設定方法と使い方, https://netaone.com/wp/tinymce-advanced/

24. Advanced Editor Tools の設定:ブロックエディタ上のクラシックブロックへの追加, https://www.webdeki.com/column/4987/

25. 【最新】WordPressテーマ STORK SE/STORK19 アップデート情報, https://open-cage.com/purchase-flow/addquicktag-samplefile/

26. Advanced Editor Toolsでクラシックブロックをカスタマイズする方法, https://www.colorfulbox.jp/media/tinymceadvanced/

27. WordPressのツールバーに「スタイル」ボタンを追加する方法, https://tech.jnome.jp/blog/post-323/

28. Gutenbergのクラシックブロックでツールバーをカスタマイズする, https://reach-rh.com/gutenberg-classic-paragraph/

29. Advanced Editor Tools(旧:TinyMCE Advanced)の設定と使い方, https://yublog.jp/advanced-editor-tools/

30. AddQuicktagでHTMLタグを登録して記事作成を効率化する方法, https://mseeeen.msen.jp/wordpress-addquicktag/

31. 【決定版】コピペで使えるCSS囲み枠(ボックスデザイン)30選, https://saruwakakun.com/html-css/reference/box

 

コメント

タイトルとURLをコピーしました