BLOG
ブログ・お知らせ
  • TOP
  • BLOG
  • AddQuickTagのインストール・使い方について徹底解説【Wordpress】

AddQuickTagのインストール・使い方について徹底解説【Wordpress】

 2020.09.03  ブログ  みやしも
記事の装飾を行う際にHTMLのコードを手書きで修正しなければならず、作業が大変です!簡単に行う方法があったら教えて下さい!


プラグイン『AddQuickTag』を使えば、手書きで作業することなく、簡単に記事の装飾が行える様になりますよ!



今回はWordpressのプラグイン『AddQuickTag』について、インストール方法から設定・使い方に至るまで徹底解説します。




▼この記事の内容

  • Wordpressで記事の装飾を簡単に行う方法
  • プラグイン『AddQuickTag』のインストール・設定・使い方



▼この記事を書いた人

筆者のみやしも.jpg



Twitter -  @miyashimo_eng

IT業界勤務10年以上のみやしもが解説を行います。これまの経験やノウハウを活かして、Wordpresプラグインのインストール方法や使い方について分かりやく解説してゆきます



初心者の方でも大丈夫!一緒に作業を進めてゆきましょう!


▼おススメ記事

これからブログを始めたいと考えている方に向けて解説記事を書きました


AddQuickTagのインストール・使い方について徹底解説


AddQuickTagはHTMLのコードをあらかじめ保存しておき、記事編集の際に素早く取り出す事が出来る様になるWordpressプラグインです。


ひとことで言うならHTMLコードのお気に入り機能です!


Wordpressの記事編集では、例えば見出し・マーカー・吹き出し・注釈など、多くの装飾を行います。ですが、これらは似た内容のコードを繰り返し書くことも多く、毎回手書きでコードを書いていては編集時の手間となってしまいます。



AddQuickTagの紹介①

記事の装飾に必要なHTMLの一例



例えばシンプルな吹き出しの装飾でも、それなりの量のHTMLがあります。。


AddQuickTagは、そんな記事の装飾に必要なHTMLをあらかじめ登録しておき、すぐに取り出せるようにする事で、効率的な記事編集を可能としてくれるプラグインなのです。




AddQuickTagの紹介②

登録したHTMLのコードをメニューから一発で呼び出せる様になります




良く使うHTMLのコードをAddQuickTagに登録しておくだけでも編集作業がかなり楽になりますね!



▼テーマによってはAddQuickTagが不要なケースも?
有料のブログテーマなどは簡単に文字装飾が出来る機能が豊富なため、あえてAddQuickTagを使わずとも済むケースもあります。AddQuickTagを利用する際には、利用中のテーマの機能についても確認してみましょう。



今回は、そんなWordpressプラグイン『AddQuickTag』のインストール方法・使い方について詳しく解説してゆきます。


AddQuickTagのインストール方法


Wordpressのプラグイン『AddQuickTag』のインストール方法について解説してゆきます。



まずは管理画面のインスト―ル画面を開き、プラグインの検索フォームから『AddQuickTag』と検索しましょう。



AddQuickTagのインストール方法1

管理画面のメニュー『プラグイン->新規追加』を選択します



AddQuickTagのインストール方法2

プラグインの検索で『AddQuickTag』を入力して検索します


プラグインを見つけたら、続けてインストールを行ってゆきましょう。


プラグインを見つけたら『今すぐインストール』を押します。インストール後に続けて『有効化』を押すことで、Wordpress内で使える様になります。



AddQuickTagのインストール方法3

プラグインの『今すぐインストール』のボタンを押します




AddQuickTagのインストール方法4

インストールが完了したら『有効化』ボタンを押します



以上でWordpressのプラグインのインストール作業は終わりです。

プラグインの設定


AddQuickTagのインストールが完了したら続けて設定を行いましょう。


AddQuickTagの設定画面の開き方


Wordpressプラグイン『AddQuickTag』の設定画面は次のように開けばOKです。



AddQuickTagの設定画面の開き方

管理画面のメニュー『設定->AddQuickTag』を選択します



AddQuickTagの設定画面

実際の設定画面がこちら


HTMLコードの登録を行う

AddQuickTagの設定画面を開く事が出来たら、HTMLコードの登録を行いましょう。



ここでは、冒頭でも登場した『吹き出し』を表現するHTMLコードを例に紹介してゆきます。



▼吹き出しを表現するHTMLコード例

<div class="speech-wrap sb-id-11 sbs-flat sbp-r sbis-cb cf">
    <div class="speech-person">
        <figure class="speech-icon">
            <img class="speech-icon-image" src="kakedashi.jpg" alt="かけだし君" />
        </figure>
        <div class="speech-name">かけだし君</div>
    </div>
    <div class="speech-balloon">吹き出しの内容をここに入力</div>
</div>



HTMLコードの登録方法ですが、基本的には次の項目に入力を行い、保存すればOKです。



  • ボタン名(登録するHTMLコードのタイトル)
  • 開始タグの内容
  • 終了タグの内容
  • 全てにチェック



AddQuickTagの登録方法①

①~④全てに入力し『変更を保存』ボタンを押すとHTMLコードの登録が出来ます



『②開始タグ』『③終了タグ』の部分ですが、装飾を行う文字の前後で分割してそれぞれ入力してゆきます。少し解り辛いかもしれませんが、先ほどの例のHTMLコードで表すと次のようになります。



『②開始タグ』に登録するHTMLコード

<div class="speech-wrap sb-id-11 sbs-flat sbp-r sbis-cb cf">
    <div class="speech-person">
        <figure class="speech-icon">
            <img class="speech-icon-image" src="kakedashi.jpg" alt="かけだし君" />
        </figure>
        <div class="speech-name">かけだし君</div>
    </div>
    <div class="speech-balloon">



『③終了タグ』に登録するHTMLコード

</div>
</div>



『吹き出しの内容をここに入力』というテキストの、前後のHTMLコード部分で分割した形なります。


また、④の部分は登録したHTMLコードを使える様にするWordpressの機能を設定する所ですが、ここは基本的に全てチェックすればOKです。(※一番右のチェックをクリックするとまとめてチェックしてくれます)




▼その他の項目について
上記以外の項目はいずれも管理目的の項目となっており、それぞれ次の様な意味があります。

【アイコン】ボタンにアイコンを設定できます
【ラベル名】ボタンにマウスオーバーした際に表示される説明文を設定できます
【アクセスキー】いわゆるショートカットキーになります。設定する事で『アクセスキー+Alt』で、登録した内容を呼び出せる様になります
【順番】登録したHTMLコードの並び順を数字で指定する事ができます


その他の項目は基本的に入力不要です。登録したHTMLコードが増えて来た時に入力してあげると、整理出来て分かりやすくなると思います!


最後に『変更を保存』ボタンを押すと保存が行われ、登録したHTMLコードが一覧で確認できる様になります。




AddQuickTagの登録方法②

登録したHTMLコードが一覧で確認できる様になります



登録した内容を更新する場合は、入力を行い再び『変更を保存』ボタンを押せば更新できます。また、削除をしたい場合は、そのHTMLコードの全ての項目を空にした状態で保存すれば削除ができます。



以上でHTMLコードの登録方法について解説は終わりです。


次からは、いよいよ登録したHTMLコードの使い方について解説してゆきます!

プラグインの使い方


AddQuickTagに登録したHTMLコードを使って文字装飾を行うには、エディター上で次の様に操作しましょう。



  1. 装飾したい文字をカーソルで選択した状態にする
  2. エディターの『Quicktags』メニューから 登録したHTMLコードを選択する



AddQuickTagの使い方①

登録したHTMLコードを使って文字装飾を行う方法



上記の操作を行うと登録したHTMLコードが呼び出され、今回の例の場合だと、次の様な装飾が行われます。



AddQuickTagの使い方②

HTMLが呼び出されて記事の装飾が行われた状態



複雑な装飾でもあらかじめHTMLコードを登録しておけば、非常にスムーズに!執筆作業も捗りますね!


▼エディターによる使い方の違いはある?
ありません。Wordpressには現在、旧エディターである『Classic Editor』と、バージョン5.0から新しく登場したブロックエディタ―『Gutenberg(グーテンベルグ)』の2種類がありますが、本記事で紹介したプラグインは基本的には同じ方法で利用ができます。※本記事の執筆時点(2020年9月現在)で両方のエディターで動作確認済


以上でプラグインの使用方法の解説は終わりです。

この記事のまとめ

今回は登録しておいたHTMLコードを取り出し、文字装飾を簡単にしてくれるWordpressプラグイン『AddQuickTag(アドクイックタグ)』について、インストール方法から設定・使用方法まで解説を行ってきました。



▼本記事で解説した内容

  • プラグイン『AddQuickTag』のインストール方法
  • プラグインの設定方法
  • プラグインの使用方法



投稿記事の文字装飾を行う場合、通常はHTMLのコードを文字ごとに細かく編集する必要がありますが、AddQuickTagを導入すれば繰り返しの作業が簡略化され、効率的な記事編集が可能になります。



Wordpressで日頃からブログ記事を書かれる方には、間違いなくおススメ出来るプラグインの1つです!

Wordpressブログの始め方


ブログの始め方について解説記事を書きました。レンタルサーバーの契約から、Wordpressのインストールまで30分程の時間で完了出来る内容です。




ビジネスへの本格利用・店舗やネットショップの集客・趣味や遊びの情報発信にいたるまで。ブログ運用ならWordpressの利用がおススメ!