あつ森動画随時UPしてます!
ブログ運営初心者

【プラグイン】AddQuicktagの設定方法と使い方【便利コードも教えます】

記事説明用画像
ブロガーくん
ブロガーくん
プラグインのAddQuicktagが評判いいって聞いてインストールしてみたけど設定方法とか使い方がよくわかんないな。初心者でコードとかも良くわからないし自分に恩恵があるかビミョーかも、、、

なんてあなたはこの記事を読んでみてください!

 

えもまる
えもまる

ご覧いただきありがとうございます!AddQuicktagのおかげで利用して記事作成効率化の恩恵を受けているえもまるです。

今回は初心者の方向けにプラグインであるAddQuicktagの設定方法と使い方、入れておくと役に立つコードを3つだけ紹介していきます。

 

この記事の内容

プラグインAddQuicktagの使い方や設定方法を画像付きで解説

とりあえず入れておくと役に立つコードを全部で3つ紹介

この記事を読むべき人

プラグインAddQuicktagの使い方および設定方法がわからない人

コードとか言われてもわからないので自分に恩恵があるのかどうかわからない人

 

最初にインストールしておくべきプラグインとしてよく紹介されているAddQuicktagですが、正直「なんのこっちゃ?」と思っている方は多いかもしれません。

僕も最初はなぜそんなにもてはやされているのかわかりませんでした。そもそもコードとかHTMLタグとか意味不でしたので、、、。

しかしながら、しばらくブログ運営をしてみた運営者の体感で言うと、AddQuicktagを使いこなすせば記事作成の効率が爆上がりします

その理由は下の方で詳しく説明していきます。みなさんも効率爆上げしていきましょう!

【プラグイン】AddQuicktagについてざっくり解説

AddQuicktagは一言でいうと、コードなどの文字列をあらかじめ記憶させておいて、使いたいときにすぐに使えるようにしてくれる便利プラグインです。

ブロガーくん
ブロガーくん
AddQuicktagってプラグインはどんな時に使うのかな?
えもまる
えもまる
僕はこの記事を書いている今この瞬間にAddQuicktagを使用したよ!
ブロガーくん
ブロガーくん
どゆこと?
えもまる
えもまる
というのも、僕が話しているこの吹き出しアイコンは、本来専用のコードを打ち込まないと生成できないんだ。だけどAddQuicktagに吹き出しのアイコンを記憶させて置いてあるからクリックひとつでいつでも吹き出しを生成できちゃうわけ
ブロガーくん
ブロガーくん
なるほどね。ホントだったらいちいち打ち込む作業が必要になるコードを楽に生成できるんだね!
えもまる
えもまる
その通りだね♪いちいちコードをメモ帳に貼り付けて、使うときだけコピペするのもいいけどやっぱり手間がかかるよね。でもAddQuicktagなら記事作成の画面でそのままコード生成ができるんだ
ブロガーくん
ブロガーくん
めちゃめちゃ便利なプラグインや!記事作成の効率が上がりそうだね♪
Add-Quicktag説明用画像

イメージとしては上のような図になります。

AddQuicktagに入れておいた文字列をボタン一つで簡単に取り出せる。まさにコードの保管と取り出しを超便利化してくれる「お気に入り機能」搭載プラグインですね。

AddQuicktagの使い方を画像多用で解説

念のためインストールから説明していきますよ。

まずはWord Pressの管理画面に飛んでくださいね!

AddQuicktagのインストール

Pluginインストール説明画像1

①管理画面の「プラグイン」をクリック

Pluginインストール説明画像2

②「新規追加」をクリック

Add-Quicktag説明用画像2

③検索欄に「AddQuicktag」と入力

Add-Quicktag説明用画像3

④上の画像のプラグインを見つけたら「今すぐインストール」をクリック後、「有効化」をクリック

AddQuicktagの設定方法

AddQuicktagを有効化すると記事作成の画面で、下の画像のように「Quicktags」と表示されるようになります。

Add-Quicktag説明用画像4

「Quicktags」をクリックすると、下の画像のようにコードがあらかじめ登録してあれば、コードの名称が表示され、その名称をクリックすればいつでもコードが生成できるようになります。

Add-Quicktag説明用画像4

このように表示させるための設定をこれから行っていきましょう!!

えもまる
えもまる
設定はめちゃめちゃ簡単!!5分もかからないよ!!

それでは順番にいってみましょう!!

Add-Quicktag説明用画像6

⑤WordPress管理画面の設定にカーソルを合わせる

⑥出てきたウィンドウの「AddQuicktag」をクリック

Add-Quicktag説明用画像5

上のような画面が表示されていると思います。設定するのはとりあえず⑦~⑩の4つだけです。

まずは例として「吹き出しコード」を入力していきましょう

ボタンのラベル

こちらはコードの名称です。ご自分で分かりやすいものを付けてあげてください。

今回は「吹き出し」と入力してください。

開始タグ

開始タグの空欄には下の「“[” からはじまり”吹き出しの内容”」で終わるコードをコピペしてください。

⑨終了タグ

終了タグには下の文字列のみ入力してください

一番右端の□にチェックを入れてください!すべての□が✔されるはずです。

ちなみに、アクセスキーはショートカットキーと同じ意味で「ALT」+「何かしらのキーボタン」を押すことでコードを打ち込むことが可能です。

⑪そして最後に下にスクロールすると「変更を保存」という青いボタンがあると思いますのでこれを忘れずクリックです。

AddQuicktagに登録したコードの使い方

それでは上で保存したコードを実際に使ってみましょう!

Add-Quicktag説明用画像4

記事作成画面にいき「Quicktags」をクリック

Add-Quicktag説明用画像4

②先ほど作成した「吹き出し」をクリック

アイコン名
アイコン名
吹き出しの内容

③上のような吹き出しアイコンが表示されていればOKです!

これでいつでも吹き出しアイコンを使用できますよ♪

念のため吹き出しアイコン中の文字列の説明をしておきます。お好きなように文字列を変更してみてくださいね!


chat face=”画像名.png”

こちらに吹き出しに表示させたい画像ファイル名を入力。画像ファイルは「〇〇.png」とか「〇〇.jpg」のような形になっていると思いますので「〇〇」の部分を「画像名」の部分に入力です。

ちなみに画像の末尾の拡張子が「.jpg」の場合は「.png→.jpg」に書き換えてください。

つまり、使用する画像が「.png」なのか「.jpg」なのかで「画像名.png」の部分を下記変えなくてはならないということです。

name=”アイコン名”

吹き出し画像の下に表示させるアイコン名です。入力すると小さく文字が表示されますよ。

align=”left”

吹き出しを右か左のどちらに表示させるかの配置設定です。

“left”のままなら吹き出しアイコンは左側に表示されます。

“left”→”right”と書き換えれば吹き出しアイコンは右側に表示されます。

お好みに合わせて設定してみてくださいね。

border=”blue”

吹き出し枠の色の設定です。デフォルトでは青色ですがblue以外のお好きな色に変更可能です。

style=”maru”

アイコン画像の枠の形です。デフォルトだと枠は丸ですね。

ちなみにstyle=”maru”の文字列を消すと枠自体を消去することができ、アイコン画像全体を表示することが可能になります。

えもまる
えもまる
こんな感じで丸枠を付けるバージョンと
えもまる
えもまる
付けないバージョンができるよ!

アイコン画像自体はご自分のお好きな画像を使用してくださいね♪

知っておくと便利なコードをあと2つだけ紹介

吹き出し以外にも便利なコードをあと2つだけ紹介しておきますね。

①アンカー

②アンカーへのリンク

この2つです。

ちなみにアンカーとは「ページ内リンク」のことです。例えば、

ある単語にリンクを付けておき、クリックしたときに同じページ内にある説明文に飛ばしたい

なんて時などに便利です♪適切なページ内リンクはSEO的にも良い効果を発揮すると言われていますのでこの機会にぜひ登録してみてくださいね!

それでは早速コードの入力を、先ほどと同じ手順でやっていきましょう。

アンカー

開始タグ↓

終了タグ↓

アンカーリンク

開始タグ↓

終了タグ↓

上のコードを先ほどと同様の手順でAddQuicktagに登録しておいてくださいね!使い方は下で説明します。

アンカーとアンカーリンクの使い方

アンカーとアンカーへのリンクの使い方を紹介していきます。

例えば、「トイレ」という単語にリンクを付けて「トイレはおおよそつるつるとした手触りである。また、心のきれいな人にはトイレの神様が見えるともいわれている。」という説明文に飛ばしたいとします。

えもまる
えもまる
最初にアンカーへのリンクを作成していきましょう!
AddQuictag説明画像18 Add-Quicktag説明用画像7 Add-Quicktag説明用画像8

①記事作成のエディター上部に表示されている「Quicktags」をクリックし、「トイレ」の文字列の横で「アンカーリンク」のコードを生成

②ビジュアルエディタとテキストエディタでそれぞれ上の画像のように表示されるはずです

Add-Quicktag説明用画像9

③テキストエディタの状態で、“トイレ”の文字列を切り取って”文字・画像”の部分にペーストします。ついでに“アンカー名”を”トイレの説明”としておきましょう

Add-Quicktag説明用画像10 Add-Quicktag説明用画像11

④アンカーへのリンクがうまくいくとテキストエディタとビジュアルエディタでそれぞれでは上の画像のようになります。

ビジュアルエディタで見るとちゃんとリンクっぽくなっているのがわかるかと思います。

えもまる
えもまる
次にアンカーを作成していきましょう!
Add-Quicktag説明用画像12 Add-Quicktag説明用画像13

①まずは上記の文字列の左にカーソルを持っていき「Quicktags」をクリックし「アンカー」のコードを生成します。

②ビジュアルエディタとテキストエディタでの見え方はそれぞれ上のような画像になります。

Add-Quicktag説明用画像14

③テキストエディタの状態のまま“文字”を削除し、“アンカー名”を”トイレの説明”にする“アンカー名”はアンカーへのリンクのコードのときと共通にしないとリンクとしてみ紐付けされませんので注意しましょう

Add-Quicktag説明用画像15 Add-Quicktag説明用画像16

④アンカーの設定がうまくいくとテキストエディタとビジュアルエディタでそれぞれでは上の画像のようになります。

一番左に船でよく見る「いかりマーク」が表示されているかと思います。これがだていればOKです。

えもまる
えもまる
ここまで設定出来たらWordPressの投稿画面の「変更をプレビュー」の状態にして先ほど作ったリンクをクリックしてみてください!指定したアンカーに飛べたらページ内リンクの設定成功です。

おまけ:Contact Form 7で作成したお問い合わせコードを記憶させておく

Contact Form 7というプラグインを使用している方は、専用のお問い合わせコードが生成されているはずです。

そのお問い合わせコードもAddQuicktagに記憶させておくと便利ですよ!!

AddQuicktag設定画面

Contact Form 7説明画像16

上の画像のようにコードを入力すればいつでもお問い合わせフォームを設置可能です♪

ちなみにお問い合わせフォームの設置がまだの方は下の記事を参考にしてみてくださいね!

記事説明用画像
プラグインContact Form 7でお問い合わせフォームを設定する方法を画像多用で解説 教えさせてください。 この記事の内容 WordPressのプラグインContact Fo...

まとめ

いかがでしたでしょうか?

プラグインのAddQuicktagの設定方法や使用方法を紹介させていただきました。

他にもみなさんのお好みでコードを登録して、記事作成の効率を爆上げしていきましょう!