AddQuicktagの使い方を徹底解説【記事の装飾が捗ります。】

Left Caption
AddQuicktagの使い方を詳しく知りたいなぁ。どんな設定ができてどんなことができるんだろう。

本記事では、上記のような疑問を解決します。

もくじ

  • AddQuicktagでできること
  • AddQuicktagの設定方法
  • AddQuicktagの使い方

この記事を書いている私は、業界歴10年ほどのシステムエンジニアのサラリーマンブロガーです。本記事では、ブログ執筆におすすめなプラグインをご紹介します。

効率化を行いたい方は必見です。ぜひご覧ください。

広告

AddQuicktagの使い方を徹底解説【記事の装飾が捗ります。】

「AddQuicktag」について解説していきます。

「AddQuicktag」プラグインでできること。

まずはできることですが、下記のとおりです。

  • 登録したショートコードや、htmlタグを一発で呼び出しができるようになる。(いちいち手で入力する必要が無くなる。)
  • 投稿画面で不要な装飾ボタンを非表示にすることができる。
  • 「pre」タグの追加、「code」タグの拡張ができる。

以降では、「インストール、設定、使い方」の順で説明していきます。

「AddQuicktag」プラグインのインストール

次は、「AddQuicktag」プラグインのインストール方法です。とはいえ、他のプラグインと変わらないです。

インストール方法

「プラグイン - 新規追加」を押下。

「AddQuicktag」を検索して、「今すぐインストール」をクリック。

インストールができたら、プラグインを「有効化」します。

下記のメッセージが表示されればOKです。

「AddQuicktag」プラグインの設定方法

次は設定の詳細を解説します。まずは設定画面に遷移します。

設定画面を開く

下記のように「設定」をクリックすることで、設定画面を開くことができます。

設定①:クイックタグの追加と削除

「クイックタグの追加と削除」では、ショートコードやhtmlタグの登録が行えます。登録することで後から簡単に呼び出しができるようになります。

下記のような画面になりますので必要な個所を設定していきます。

ボタンのラベル、ダッシュアイコン、ラベル名

ここは呼び出し時のラベルやアイコンの設定です。

実際の設定後の結果を見てもらうと分かり易いかと思います。※ビジュアルエディタ表示時と、テキストエディタ表示時で見た目が異なります。

上記のように、「ボタンラベル」に設定した内容がそれぞれ該当箇所に表示されるようになります。

開始タグと終了タグ

呼び出ししたいショートコード、htmlタグを登録します。

アクセスキーと順番

登録したショートコードやhtmlタグを呼び出しするためのショートカットキーとなります。

ですが、試したところ正しく動作しません。Internet Explorer(IE)のみという記事も見かけましたが、IEでもうまく動作せず。設定しなくよいでしょう。

ビジュアルエディターから右側のチェックボックス

こちらは、AddQuicktagの機能をどの場面で有効にするかの設定になります。とりあえず全部有効にしておいて、何か困るような場合においてチェックをOFFにすればOKです。

設定②:デフォルトのクイックタグを非表示にする

こちらは、デフォルトで用意されているクイックタグを非表示にすることができる機能になります。ここは好みでOKです。

設定③:拡張コードクイックタグボタン

ここは少しややこしい設定ですが、何のことか良く分からない方は気にしなくてOKです。(たぶん、使うシーンがそんなに無いです。)

「Pre」ボタン

ブログを書いているときに、気づく方もいるかと思いますが、スペースや改行などは普通のままだと省略(消去)されてしまいます。それらをそのままの形で表示したい場合には、<pre>~</pre>で囲うと良いです。

そんな為の「Pre」ボタンの追加です。

「htmlentities」ボタン

「<」や、「>」などはhtmlのタグを示す記号なので、文字として表現したい場合にはそのまま使用することができません。そのため、文字として表現したい場合には、「&lt;」や「&gt;」とする必要があります。

そんな時に、一発で切り替えをしてくれるボタンになります。

「AddQuicktag」プラグインの使い方(登録タグの呼び出し)

使い方は簡単で、登録した「ボタンラベル」を選択すればOKです。

登録したショートコード or htmlタグの呼び出し

投稿画面に遷移し、下記のようにリストから選択すればOKです。

ちなみに、リストが表示されていないって方は、下記の赤枠個所(ツールバーの切り替え)を押下してみてください。ただ単に表示していないだけかもです。

実際には、下記のように使います。
「装飾対象を選択 - クイックタグを選択」でOKです。

こんな時は:タグの設定など正しくできているはずだけど、cssが適用されない場合

その場合は、WordPressの投稿画面にのみ、cssが適用されていない可能性が高いです。そのような場合には、投稿画面にもcssファイルを読み込みしてあげる必要があります。

こちらの記事をご覧ください。wordpressの投稿画面にオリジナルのcssを反映させる方法

=====

今日は以上となります。
どこかの誰かの参考になれば幸いです。

広告