HTMLを簡単挿入できるAddQuicktagの使い方と設定方法

いちいちHTMLタグを挿入するのは面倒。でも、ビジュアルエディタに欲しいタグが無いから毎回毎回手入力をしないといけない。。。仕方ないか。

そんなあなたを助けるプラグインを紹介します。

AddQuicktag

あらかじめ指定したHTMLタグを簡単に自動挿入できるプラグインです。毎回毎回テキストエディタに切り替えてタグを手入力で打ち込まなくても、このプラグインがあれば簡単挿入できます。

ビジュアルエディタで用意されているタグには無いので、自分で作ろう!というものです。

2014-07-13_110505

デフォルトはこんな感じ。

2014-07-13_110515

ちょっと拡張するとこんなかんじ。フォントサイズは「12px 14px 18px 24px 36px」となっており、間の微妙なサイズが欲しい時に物足りないと感じる。「B」はbタグじゃなくて、ストロングタグだし。個人的にこのHTMLタグを使いたい!という場合に、ここに無ければ手入力しかありません。

2014-07-13_110533

そこで、AddQuicktagの登場。

2014-07-13_110541

このように自分であらかじめ登録したタグを簡単クリックで使用できる。いちいちテキストエディタに移動して、タグを探して手入力するという手間を省くことができるので超便利です。

導入と設定方法

2014-07-13_114501

2014-07-13_114811

2014-07-13_115101

いつも通りプラグインを検索して、インストールして有効化した後に、設定>プラグインを選択します。

2014-07-13_115207

このようなページに移動します。

2014-07-13_115259

この編集画面にタグを入力します。

  • ボタン名:ビジュアルエディタに表示される名前
  • ラベル名:どんなタグなのかをメモしておくと良い
  • 開始タグ:タグの開始部分を入力する <b> ~ </b>
  • 終了タグ:タグの終了部分を入力する <b> ~ </b>
  • アクセスキー:空欄で
  • 順番:ボタンを表示させる順番を番号で並び替えることができる(デフォルトは0になる)

2014-07-13_115309

このように表示させると良い。

AddQuicktagが表示されない?使えないの?

HTMLタグを入力して設定しても、ビジュアルエディタに表示されないという質問がありました。

2014-07-13_120531

他の人たちも困っているようですね。笑 でもご安心ください。正しく設定すればちゃんと表示されるし、使えますよ。

2014-07-13_120254

HTMLタグを設定したとき、右側にこういった表記があります。一番右のチェックマークをつけてください。

2014-07-13_120304

そうすると、すべてのチェックマークがonになります。この状態で設定を完了させましょう。そうすればちゃんと表示されるようになります。ご確認ください。

便利なHTMLタグを教えて!

2014-07-13_115805

いつも使っているタグをあらかじめ登録しておくと良いですが、他にも便利なタグが欲しい場合は、こちらのサイトでチェックすると良い。さまざまなタグがあるので、ぜひ参考に。

ホームページお役立ち小技集

  • このエントリーをはてなブックマークに追加

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>