【2021年最新】AddQuicktagの設定方法と使い方を画像で解説｜装飾効率化プラグイン
※本ページにはプロモーションが含まれている場合があります。
・AddQuicktagって何？
・AddQuicktagの基本的な設定や使い方を知りたい
・AddQuicktagをさらに便利に活用する方法やおすすめの使い方を知りたい
・ブログを何倍も効率的に書きたい
本記事の内容
- AddQuicktagでできること
- AddQuicktagのインストール・設定方法・使い方
- さらに便利に活用する方法
- ライター100名以上の組織の法人を経営→株式譲渡
- 立ち上げから半年で月間1,000万PVを達成
- 1年で月間1200万PVを達成
- 年商約1億円を達成
- 法人向けコンサル1社あたり月額60~100万円
- PVメディア・アフィリエイトサイト・オウンドメディア・企業ブログなどSEOサイトの立ち上げ・コンサル実績多数
本記事を読むと、AddQuicktagの基本的な使い方だけでなく、AddQuicktagを活用して何倍もブログを効率的に書くための使い方がわかります。
>> 【2021年】おすすめのアフィリエイトASP15選【初心者に必須のASPを厳選】
>> 【超豪華特典】AFFINGER6(アフィンガー6)の豪華13特典付き購入方法【レビュー】
＼ 月間1300万PVのプロが解説 ／
↓検索順位1位を取りまくったノウハウを4万文字で解説(無料)↓
>> 【検索1位量産】ブログを爆速で伸ばすSEOの『抑えどころ』をプロが徹底解説！
AddQuicktagとは
>> AddQuicktag
AddQuicktagとは、WordPressで記事を書く時に、文字を装飾するための長いコードをボタン1つで呼び出すことができるプラグインです。
AddQuicktagの便利な機能の例①
例えば以下のように、吹き出しのコードも一発で呼び出せます。
文字装飾をしたい箇所を選択してから「fukidashi」というボタンをクリックすると、
上の画像の長いHTMLコードが一発で入力されます。
ボタン1つの操作でしたが、プレビューで確認すると上の画像の通り吹き出しができています。
AddQuicktagの便利な機能の例②
文字装飾だけでなく、定型文をボタン1つで入力するためにも使えます。
上のようにボタンをポチッとクリックするだけで、
吹き出しやボックス付きの箇条書きや、あらかじめ作成した文章まで1クリックで呼び出せます。
プレビューで確認すると上のようになっています。
このようにボタン1つで長いHTMLコードを呼び出すことができるので、
装飾のための長いコードや同じような文章を毎回手入力する必要がなくなり、ボタン1つで呼び出せるので記事の作成が何倍も速くなります。
AddQuicktagでできること
AddQuicktagでは具体的には以下のような機能があります。
- HTMLコードをボタンで1つで呼び出し
→複数のコードをまとめて1つにもできる
→h2タグなどシンプルなタグもテキストエディタからすぐにできるようになる
→定型文や文字装飾は全てワンクリックでできるようになる - ショートコードをボタンで1つで呼び出し
- 自分でコードとボタンを何十個も作成して自由にカスタマイズできる
- HTMLエスケープもボタン1つでできる
hタグなどのシンプルなタグから、吹き出しやボックスなど複雑な装飾まで全てワンクリックでできるのが魅力。
クラシックエディタのテキストモードのエディタで使えるのがとっても便利です。
【Step1】AddQuicktagのインストールと有効化
どのプラグインでもそうですが、プラグインの相性によって不具合が起こる可能性もあるので、インストールの前に以下の記事を参考にWordPressのバックアップを取っておきましょう。
>> 【2021年最新】BackWPupの正しい設定方法と使い方：自動バックアッププラグイン【WordPress】
AddQuicktagをインストールするには、WordPressの管理画面から「プラグイン」→「新規追加」をクリックします。
プラグインの検索窓に「AddQuicktag」と入力して検索します。
上の画像のプラグインがAddQuicktagになります。
「今すぐインストール」をクリックします。
インストールが完了したら「有効化」をクリックします。
「プラグインを有効化しました。」と表示されたら、AddQuicktagのインストールと有効化が完了です。
【Step2】AddQuicktagの設定：クイックタグの登録
クイックタグを登録する必要がある
AddQuicktagでボタン(クイックタグ)を使うには、あらかじめ自分でどんなボタンでどんなコードを呼び出すのかを登録しておく必要があります。
クイックタグの登録方法
まずはWordPressの管理画面から「設定」→「AddQuicktag」をクリックします。
上の画面が表示されるので、ここにクイックタグを登録していきます。
左の方から順番に解説していきます。
登録手順①ボタンのラベル・ラベル名
最初はボタン名とラベル名です。
この2つは自分がわかりやすいように簡潔な言葉で自由に設定すればOKです。
記事編集画面のエディタではこのボタン名とラベル名が上の画像のように表示されます。
登録手順②開始タグと終了タグ
次は開始タグと終了タグです。
ボタンで呼び出したいタグを、開始タグと終了タグに分けて登録します。
例えば、見出しのタグである以下のタグを登録したい時は、
<h2></h2>開始タグに<h2>、終了タグに</h2>と入力します。
登録手順③アクセスキーと並び順
次に、アクセスキーと並び順についてです。
アクセスキーとはクイックタグを呼び出すためのショートカットキーのことで、
WindowsのInternet Explorerの場合に限り、「Alt」+「指定したキー」でクイックタグを呼び出すことができるようになります。
Macの方は使えないので不要です。
「並び順」に数字を入れると、記事編集画面でのクイックタグの並び順を指定することができます。
上の画像のように並び順に数字を入れると、
記事編集画面では上の画像のように、数字の順番で並んでいます。
登録手順④クイックタグの表示・非表示
最後に、クイックタグの表示・非表示の設定をすればクイックタグの登録が完了です。
一番右のチェックボックスにチェックを入れます。
すると全てのチェックボックスにチェックが入ります。
このようにチェックボックスにチェックを入れると、投稿や固定ページの編集画面(記事執筆画面)でそのクイックタグを使えるようになります。
ここまで設定できたら、「変更を保存」をクリックすればクイックタグの登録が完了です。
【補足】タグの削除・変更方法
ここでは、クイックタグの削除や変更方法を解説します。
クイックタグ削除したり変更したい場合は以下の方法で行うことができます。
- クイックタグの削除
→クイックタグに入力した情報を手動で全て消して、「設定を保存」をクリック - クイックタグの変更
→変更したい場所を変更して、「設定を保存」をクリック
例えば上のクイックタグを削除したい場合は、
上の画像のように全て情報を手動で削除してから、
「変更を保存」をクリックすると削除することができます。
【Step3】AddQuicktagの使い方
以下の3つのエディタやモードでの使い方をそれぞれ順に解説します。
クラシックエディタのテキストモードでの使い方
まずはクイックタグで囲みたい箇所を選択します。
選択した状態で、使いたいクイックタグのボタンをクリックします。
今回は、自分で登録した「fukidashi」というボタンを使っています。
選択した箇所が、クリックしたクイックタグのタグで囲われます。
クラシックエディタのビジュアルモードでの使い方
次はビジュアルモードでの使い方です。
まずはタグで囲いたい文を選択します。(①)
選択した状態で画像の箇所をクリックします。(②)
登録しておいたクイックタグが一覧で表示されるので、使いたいタグをクリックしたら完了です。
選択した箇所にクイックタグが適用されています。
ブロックエディタ(Gutenberg)での使い方
最後はWordPressの新エディタであるブロックエディタ(Gutenberg)での使い方です。
AddQuicktagを使いたいブロックの場所で、「＋」マークをクリックします。
「すべて表示」をクリックします。
「クラシック」を選択します。
上のようにクラシックエディタのブロックが表示されるので、文章を入力します。
クイックタグで囲みたい文を選択して、「Quicktags」と表示されている箇所をクリックします。
登録したクイックタグが一覧で表示されるので、使いたいタグをクリックすれば完了です
選択した文にクイックタグが適用されています。
AddQuicktagの便利な活用方法
AddQuicktagは普通に使っても便利ですが、さらに便利に使うための活用方法を3つ解説します。
活用方法①：CSSも合わせて使おう
AddQuicktagの1つ目の活用方法は、CSSを組み合わせて使うことです。
h2タグやh3タグなどのシンプルなタグを登録するだけでも便利ですが、クイックタグで一瞬で文字装飾を行うにはCSSも合わせて使いましょう。
文字の色や大きさ・背景色・枠の色など、ブログのデザインをするためのコード。
例えば、本サイトでは「marker」という以下のクイックタグを登録しています。
- 開始タグ：
<span class="marker"> - 終了タグ：
</span> - タグの効果：markarを使うとこのように黄色でハイライトされます。
上記のタグで黄色にハイライトされるのは、以下のCSSコードを追加しているからです。
.marker {
background: linear-gradient(transparent 40%, #ffff66 0%) ;
}このように、文字装飾をするためのクイックタグを登録する際には、その装飾のためのCSSも登録する必要があります。
注意点のボックスやポイントのボックス・吹き出しなどの、HTMLタグやデザインのためのCSSは、デザインをまとめているサイトからコピペして使うことができます。デザインを検索してCSSをコピーして取得したら、以下のようにCSSを登録しましょう。
以下の記事を読むと、CSSの取得方法や設定方法の参考になります。
>> 【コピペで簡単】WordPressの見出しデザインをプラグインなしでおしゃれに変更する方法【初心者】
CSSを登録するには、WordPressの管理画面から「外観」→「カスタマイズ」をクリックします。
「追加CSS」をクリックします。
コードを入力する欄が表示されるので、上の画像のようにCSSコードを入力して「公開」ボタンをクリックすればOkです。
活用方法②：開始タグだけを登録して定型文として使おう
2つ目の活用方法は、終了タグを登録せずに開始タグだけを登録して、定型文として使うことです。
例えば上の画像のように、いろんなタグや文章を合わせて作成したコード全てをコピーして、
開始タグの欄に貼り付けることで、
このような吹き出しとリストボックスを合わせた自己紹介の文章をテンプレートとして使うことができます。
使うときは、登録したクイックタグのボタンをクリックするだけで、
登録したテンプレート(開始タグ)が呼び出されます。
上の画像のように、複数のパーツやデザインが複雑なコードでも一瞬で呼び出すことができるので、とっても便利です。
活用方法③：ショートコードを登録しよう
3つ目の活用方法は、ショートコードをクイックタグに登録して使うことです。
例えば本ブログでは、ブログカードを作成するためのショートコードを上の画像のように登録しているので、
ブログカードのためのショートコードを記述する際にもボタン1つで一瞬で記述することができます。
登録さえしておけば、使い方は通常のクイックタグと同様に、囲みたい箇所を選択してボタンをクリックするだけです。
上の画像のように、ショートコードで囲うことができます。
ショートコードでブログカードを呼び出すことができました。
開始タグだけにショートコードを登録すると、前後で挟んで使うショートコードではなくて[toc]のように1つで完結するショートコードも便利に使えます。
【応用編】AddQuicktagのその他の設定と使い方
最後に、知っておくとWordPressでの記事作りがさらに便利になる、応用編の機能を3つご紹介します。
①デフォルトのクイックタグを非表示にする
テキストモードのエディタには、自分でクイックタグを登録していなくても上の画像のようにデフォルトのクイックタグが並んでいます。
WordPessの管理画面から「設定」→「AddQuicktag」を開き画面をスクロールしていくと、デフォルトのクイックタグの項目が並んでいます。
非表示にしたいタグにチェックを入れることで、非表示にすることができます。
画像のように3つのタグにチェックを入れると、
記事編集画面から3つのタグが非表示になりました。
②拡張コードクイックタグボタン
上の画像のように「htmlentities」の欄全てチェックを入れると、
上の画像の2つのクイックタグが追加されます。
この「HTML Entities」というボタンを使うことで、HTMLタグなどをエンコードすることができます。
例えば以下のように
のようにHTMLタグをそのまま表示したくても、ただ上のようにh2タグを使って入力するだけでは勝手に見出しに変換されてしまいます。
ここでエンコードをすることで、HTMLタグをそのまま表示させることができます。
上の画像のように、エンコードしたい箇所を選択して「HTML Entities」をクリックします。
すると上の画像のように、必要な箇所がエンコードされます。
プレビューで確認してみると、HTMLタグがそのまま無事表示されました。
③エクスポートとインポート
最後に、タグのエクスポートとインポートについてです。
AddQuicktagでは、登録したクイックタグの一覧を一括でダウンロード(エクスポート)したり、クイックタグの一覧のデータをインポートしてクイックタグを一括で取り込むことができます。
この機能を使うことで、
- AddQuicktagに登録してあるクイックタグを、別のWordPressサイトでも同様に使いたい時にすぐにコピーできる
- ネットでダウンロードしたクイックタグのデータや、WordPressテーマに付属しているクイックタグのデータなど、外部で入手したタグを一括で取り込める
というメリットがあります。
現在のクイックタグのデータ一覧をエクスポートするには、「エクスポートファイルのダウンロード」をクリックするだけでダウンロードできます。
ダウンロードされたファイルは、jsonという形式のファイルになります。
インポートをしてクイックタグを取り込みたい場合は、「ファイルを選択」をクリックして、json形式のクイックタグのファイル選択します。
ファイルを指定したら、「ファイルのアップロード・インポート」をクリックすればクイックタグを一括で取り込むことができます。
AddQuicktagで記事の執筆を効率化しよう！！
AddQuicktagの基本的な使い方から便利な使い方までご紹介しました。
AddQuicktagを使いこなすだけで、記事を完成させるスピードが何倍にも早くなります。
記事作成のスピードが早くなると、ブログが成長して売上が伸びるのも早くなるので、是非AddQuicktagを導入してみましょう。
公式LINE限定で読めるパスワード付きの記事でがっつり解説しています。
LINE参加者の声
400名が以上参加中！無料で読めます♪
＼ 最短で収益化 ／
