AddQuicktagプラグイン/インストールと設定方法

miyamo(@daylisualog)です。

Twitterで仲良くさせてもらっている、同期ブログ仲間のかうたっくさん(@kautakku)がアップされた記事で、AddQuicktagプラグインが紹介されていました。

参考:プラグイン★AddQuicktag★超便利♪設定方法と使い方&困った時の対処法付き

このプラグインは前から名前は知っていたのですが、導入していませんでした。

前からこのブログを読んでいただいている方はご存知かもしれませんが、記事内の文字を太字にしたり、文字を大きくしたりとかは、あまりしていません。

それはなぜかって?

僕は記事を書くときにビジュアルエディターを使っています。

ビジュアルエディターに太字ボタンはあるのですが、使われるタグがstrongなのでSEO的にどうか?(最近は問題ないという話もありますが・・・)

そもそもビジュアルエディターには、文字を大きくするボタンがありません。

そうすると、html表示にして自分でタグを打ち込まないといけなくなります。それって「超面倒くさい」ということで、太字や大きい文字が使われていなかったんです。

かうたっくさんに教えてもらったAddQuicktagを入れてみました。

なんと、太字とか大きい文字とかが簡単に使えるようになるではないですか!なんだ、もっと早く使っておけばよかったです。

しかも!タグを入れるだけじゃなくて、定型文にも使えそうです。

いつも冒頭にmiyamoです。と入れていますが、最近Twitterアカウントのリンクを入れ始めたのですが、これがちょっと面倒だったんです。

定型文を登録しておくと、このリンクを簡単に挿入できそうです。

それでは、AddQuicktagプラグインの使い方を紹介していきますね。

記事が長くなったので、使い方については別記事にまとめてあります。

参考:AddQuicktagの使い方/タグ挿入だけじゃない定型文での便利な使い方

スポンサーリンク

AddQuicktagプラグインのインストールと設定方法

AddQuicktagプラグインはプラグインの追加から簡単にインストールすることができます。

また、使うためにちょっとした設定がありますので、先にそれをしちゃいましょう。

AddQuicktagプラグインのインストール方法

まずは、AddQuicktagプラグインのインストールをします。WordPressでのプラグインのインストールの流れを説明します。

WordPressの管理画面を開いてください。

20150623-1

メニューのプラグインから新規追加を選んでください。プラグインの新規追加画面が開きます。

この画面でプラグインの検索と、インストールをしていきます。

20150623-2

検索ボックスに「addquicktag」と入力しエンターキーを押すと、プラグインが検索されます。

AddQuicktagが表示されたら「いますぐインストール」をクリックしてください。プラグインのインストールが始まりますよ。

20150623-3

インストール画面が表示されます。プラグインを使い始めるので「プラグインを有効化」をクリックします。これで、AddQuicktagが使えるようになりました。

使う前に、AddQuicktagの設定をしましょう。

AddQuicktagプラグインの設定

AddQuicktagで必要な設定は、自分で使うタグの登録と、初めから存在するタグで不要なものがあれば、非表示にすることです。

さっそく設定画面を見てみることにします。プラグインの一覧を表示させましょう。プラグインメニューを開くと、インストール済みプラグインがありますね。

20150623-4

インストール済みプラグインの一覧に、AddQuicktagがあります。その中に「設定」メニューがあるので、それをクリックしましょう。

さて、こちらが設定画面です。ちょっと画像が大きいです。

20150623-5

オリジナルタグの登録

記事を書くときに使いたいタグを、登録することができます。

20150623-6

各項目に設定する内容です。

  • 表示される名前:ボタンやプルダウンに表示される名前です。漢字も使えます。
  • 空欄でOK:ここにはボタンの説明を入力しますが、空欄でもOKです。
  • 開始タグ:タグの始まりを入力します。ここでは「<span class=”font-bold”>」と入力しています。
  • 終了タグ:タグの終わりを入力します。ここでは「</span>」と入力しています。
  • ショートカットキー:IEで使えるキーボードショートカットを入力しますが、空欄でOKです。
  • 表示する順番:ここに入力した数字の順番で表示されます。

次に、どの画面で使用するかを設定します。一番右側をクリックすると全部にチェックが入りますので、その設定でいいかと思います。

ここでは太字にするためのタグを登録しました。ふつうなら<b>タグでは?と思われるかもしれません。

文字の装飾はタグではなくCSSでやるべき!という小さなこだわりがあるので、CSSを書いてそれを使うようにしています。

今回追加した、文字を太字にするCSSはこちらです。

.font-bold {
  font-weight: bold;
}

「.font-bold」というclass名で登録しました。CSSを使うためにspanタグで「<span class=”font-bold”>」と設定しています。

他にも文字を装飾するようなCSSを作成して、spanタグで登録すると見た目を変更する機能をいろいろと追加できますね。

太字のほかには、文字を大きくするとか、文字の背景に色を付けるなどですね。CSSで設定できるものなら何でもできますよ。

不要なタグを削除する

初めから用意されているタグで、非表示にしたいものにチェックを入れると表示されなくなります。

これらは、ビジュアルエディターには表示されず、htmlモードでだけ表示されます。

僕はビジュアルエディターを使っているので、すべてにチェックを入れて非表示にしていますが、htmlモードを使っている方は使うものを残しておくと便利かと思います。

追加機能の有効/無効

追加機能には「preタグ」と「htmlentities」の2つがあります。これらにチェックを入れると、それぞれの機能が有効になります。

htmlentitiesは、htmlモードでhtmlタグをそのまま表示させるための機能が追加されるようになります。

設定の保存/取り込み

ここで設定した内容を、ほかのWordPressで使いたいときに使う機能です。通常は使わないと思いますので、特に触らなくて大丈夫です。

ここで設定した内容を保存しておけば、後で再利用することもできますね。

以上で設定画面の各項目は終了です。最後に青い「設定を保存」のボタンを忘れずに押して、変更した内容を保存しておきましょう。

AddQuicktagの使い方

それでは、AddQuicktagの使い方を説明します。

と、思ったのですが、ここまでですごく長くなってしまったので、次回に分けたいと思います。

次回は、「AddQuicktagの使い方/タグ挿入だけじゃない定型文での便利な使い方」をお送りします。

まとめ

本当は1回でまとめたかったのですが、思いのほか長くなってしまいました。

プラグインの追加方法はよく書くので、1つの記事に独立させてしまってもいいかもしれませんね。

次回は使い方について説明していきたいと思います。

おしまい。miyamo(@dailysualog)でした。

スポンサーリンク

この記事がおもしろかったらシェアしてもらえると嬉しいです。

Twitterでのフォローお待ちしています。