photo by Leonid Mamchenkov
miyamo（@dailysualog）です。
こちらの冒頭の名乗りもAddQuicktagのおかげで、Twiiterリンクを簡単に入れられるようになりました。以前は手入力をしていたので、楽ちんになりました。
さて、AddQuicktagを紹介する記事の第2弾です。前回はインストール方法と設定についてお伝えしましたが、第2弾の今回はAddQuicktagの使い方です。
まだ、AddQuicktagプラグインのインストールをしていないというかた。プラグインのインストールと設定についてはこちらの記事で紹介しています。もしよかったら一緒に見てみてください。
参考：AddQuicktagプラグイン／インストールと設定方法
それでは、ビジュアルエディターとテキストエディターでの使い方をご紹介します。
ビジュアルエディターには初めから文字装飾のボタンがいくつかありますので、自分で登録したタグだけが表示されます。
どちらかというと、テキストエディターで本領を発揮するプラグインですね。
記事を書くときにテキストエディターを使っている方は、記事を書くのが楽になるんじゃないでしょうか。
以前は使われるタグが全部わからないと気が済まないのでテキストエディターを使っていましたが、気が付いたらいつの間にかビジュアルエディターばかり使ってました。
画像がそのまま表示されるので、今回のような紹介記事を書くときには、画像の内容を確認しながら記事を書けるので、けっこう便利です。
それではからが長かったですね。今度こそ本当に使い方についてです。
目次
ビジュアルエディターでの使い方
記事を書くときに、ビジュアルエディターとテキストエディターではどちらが多く使われてるんでしょうか？
WordPressのビジュアルエディターは、比較的素直な動きなので気に入ってます。
ビジュアルエディターでのAddQuicktagプラグインの表示
ビジュアルエディターでは、自分で登録したタグがプルダウンの形式で表示されるようになります。
僕は、TinyMCE Advancedというプラグインを入れているので、標準よりも少しだけボタンが増えています。
ビジュアルエディターでのAddQuicktagプラグインの使い方
ビジュアルエディターでは、自分で登録したタグを使うようになります。今回は、太字にするためのタグを登録しましたので、それを使ってみます。
使い方は簡単です。
手順は2つです。
- 装飾したい文字列を選択しておきます
- AddQuicktagのプラグインから使いたいタグを選択します
これで選択した文字列にタグが適用されます。今回は、太字にするタグを使います。
ビジュアルエディターで見た目が変わらないことがある
タグを選んだのですが、あれ？見た目が変わってません。
太字に・・・なってます？なってませんね。う～ん、おかしいなぁ。どこか間違えたのかなぁ。
テキストエディターでタグが入力されているか見てみましょう。
テキストエディターに切り替えてみたところ、きちんとspanタグとCSSのclassが入ってますね。
CSSコードをstyle.cssに登録しているので、ビジュアルエディターでは見た目が反映されません。
ためしに、インラインstyleにしてみます。
<span class=”font-bold”>を<span style=”font-weight: bold;”>に変更しています。
ビジュアルエディターでは、インラインstyleなら見た目がきちんと反映されるようです。
- ビジュアルエディターで見た目を反映したいなら、インラインstyleを使う。
- ビジュアルエディターでの見た目の反映よりも、CSSはきちんとstyle.cssに集約したいなら、class指定で使う。
タグの使い方は、これらのどちらかになります。
ブログ全体で見た目をそろえるような装飾（テーマカラーで色をそろえているとか）は、class指定を使う方がいいでしょう。
テーマカラーの色を変えたくても、インラインstyleにしていると個別の記事を全部修正する必要がありますが、style.cssに集約しておくとstyle.cssを修正するだけで全体に反映されます。
見出しとかは、このような使い方ですね。
文字の色を変える、文字の大きさを変える、太字にするなど、その記事個別で完結するようなものは、インラインstyleでもいいと思います。
テキストエディターでの使い方
テキストエディターでは、どんなタグが使われているのかすぐにわかるところがいいですね。
テキストエディターでのAddQuicktagの表示
テキストエディターでは、自分で登録したタグがボタンで表示されます。
追加機能のhtmlentitiesもチェックを入れましたので、そのボタンも表示されています。
テキストエディターでのAddQuicktagプラグインの使い方
テキストエディターでは2通りの使い方があります。
タグを先に入力する方法
タグを先に入力して、そのあとに文書を入力する方法です。
まず、使いたいタグのボタンをクリックします。ここでは太字にする例です。
太字ボタンをクリックすると、登録していたタグが入力されます。
タグが入ると同時に、太字ボタンの前に「/」がついて、閉じタグのボタンとなりました。
文字列を入力して終わったら、閉じタグになった太字ボタンをクリックします。
このように閉じタグが入力されました。
タグを反映したい文字列を先に選択しておく方法
ビジュアルエディターのときと同じように、先にタグを反映させたい文字列を選択する方法です。
文字列を選択したら、反映したいタグのボタンをクリックします。
この方法では、選択した文字列の前後にタグが入力されます。
どちらの方法でも同じことができますが、先に文字列を入力しておくやり方がやりやすいかなと思います。
HTML Entitiesの使い方
HTML Entitiesは、記事の中にタグをそのまま表示させたいときに使います。
タグを表示できる形式に変換する
タグを表示できる形式に変換するには、表示したいタグを選択しておきます。
そのあとに、HTML Entitiesのボタンをクリックしてください。
タグが記号に変換されました。この記号が記事を表示したときにタグに変わってくれます。
実際に記事として表示させたときは、このように表示されます。
きちんと、タグの表記になっていますね。記事の中にタグを書きたいときに使えますね。
変換したものをもとのタグに戻す方法
記号に変換されたタグを、もとのタグに戻すことができます。
変換されたタグを選択しておきます。そのあとに、Decode HTMLをクリックしてください。
このように、元のタグに戻すことができました。
定型文の入力に使う方法
タグを登録する以外にも、よく使う定型文を登録することができます。
定型文の登録方法
定型文の登録は、AddQuicktagの設定画面で行います。
開始タグのところに定型文を入力して、終了タグのところは空欄のままにします。
今回は、Twitterリンク入りの定型文を登録してみました。入力内容は次の通りです。
miyamo（<a href="https://twitter.com/dailysualog" target="_blank">@daylisualog</a>）
これを利用すると「miyamo（@dailysualog）」というものが、一発で入力できます。
普通の文字列だけではなく、htmlタグも入力することができます。250文字くらい入れてみましたが、大丈夫でした。もっと長文でも登録できそうです。
よく使う文字列を登録しておくと、記事を書くのがはかどります。
まとめ
2回にわたっておおくりした、AddQuicktagプラグインの使い方でした。
テキストエディターを使っている方は、見出しタグなどを登録しておくと、かなり便利になるんじゃないでしょうか。
ビジュアルエディターを使っていると、ある程度の書式はそろっているので、Twitterリンクと文字を大きくするくらいの用途になるかな。
今後よく使うフレーズが出てきたら、それらも登録していきたいと思います。
おしまい。miyamo（@dailysualog）でした。
