PR

AddQuicktagの設定と使い方　タグやコードを簡単追加

スポンサーリンク
スポンサーリンク
2019.10.23

AddQuicktagの使い方

WordPressの投稿や固定ページの編集画面で、タグや定型文、ショートコードなどをワンクリックで追加できるプラグイン「AddQuicktag」の設定方法と使い方をご紹介します。

AddQuicktagを使うとHTMLコードやタグをワンクリックで追加できるので、記事の作成スピードが一気に向上して記事の内容に集中できます。

例えば、WordPressの編集画面では＜h2＞のような見出しタグや文字の装飾を手入力しないといけませんが、AddQuicktagを使うと、ワンクリックでタグを追加できるようになります。

AddQuicktag タグ追加

他にも、使用頻度の高いショートコードや定型文をはじめ、太字や色文字などの装飾をあらかじめAddQuicktagに登録しておくと、文章やタグ追加の時間を一気に短縮できます。

マーカーや吹き出しなどの装飾用コードや、Tableタグの表作成にも使えるので便利ですよ。おすすめタグとして、マーカーと枠の追加方法も紹介しています。

あと、AddQuicktagはGutenbergに対応していませんが、エディターをクラシックに切り替えると使えるようになります。最後に切り替え方法を紹介しています。

スポンサーリンク

AddQuicktagで記事作成スピード向上

AddQuicktagを使うと、記事作成スピードが大幅に向上します。例えば以下の見出しを作成する時は、単純に9回キーボードを打つ必要があります（見出しタグのみ）。

＜h2＞見出し文＜/h2＞

そこでAddQuicktagに見出しタグを登録しておくと、見出し部分の文字を反転させて、ボタンをワンクリックするだけで見出しタグを挿入できます。

＜h2＞見出し文＜/h2＞　見出しのタグ入力がワンクリックで終了！

＜h2＞や＜h3＞のような見出しタグはブログで多用するので、記事が増えれば増えるほどタグ入力の時間短縮効果が高まります。

また、AddQuicktagは、長いタグや複雑なコードを入力するときに威力を発揮します。たとえばTableで表を作成するときは、以下のようなタグを打ち込む必要があります。

<table>
<tr>
<th></th>
<td></td>
</tr>
</table>

表を作成するたびにtableタグを手打ちするのは面倒ですが、AddQuicktagにTableタグ一式を登録しておけば、上記のような表作成用の枠が一発で作成できます。

AddQuicktagのインストール

では、さっそくAddQuicktagをインストールしてみましょう。

まずはダッシュボードのメニューから、「プラグイン」→「新規追加」に進み、検索窓から「AddQuicktag」でプラグインを検索します。

AddQuicktag 検索

AddQuicktagが見つかったら、「今すぐインストール」をクリック。

AddQuicktag インストール

インストールが終わったら、「プラグインを有効化」してください。これでAddQuicktagのインストールは終了です。

スポンサーリンク

AddQuicktagの設定

次は、AddQuicktagの設定です。タグや定型文の記述はここで行います。まずは左メニューの「設定」→「AddQuicktag」をクリックします。

AddQuicktag 設定

AddQuicktagの設定は以下の4項目です。最後に「変更を保存」をお忘れなく。

  • クイックタグの追加と削除
  • デフォルトのクイックタグを非表示にする
  • 拡張コードクイックタグボタン
  • インポート・エクスポート

クイックタグの追加と削除

クイックタグの追加と編集を行います。「*」が付いた項目は必須なので、必ず入力してください。クイックタグを削除する場合は、登録したタグをすべて空欄にして保存すればOKです。

AddQuicktag 追加

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

ボタンのラベル・ダッシュアイコン・ラベル名を入力します。

AddQuicktag ボタン名とラベル名

「ボタンのラベル」は登録したタグの名称です。ここで入力したボタン名が、実際に編集画面で表示されるボタンになります。「ラベル名」はマウスオーバー時に表示される説明です。

AddQuicktag ボタンのラベル

「ダッシュアイコン」はビジュアルモード入力時に表示されるアイコンです。特に必要がなければ、ラベル名もダッシュアイコンも未入力のままでOKです。

AddQuicktag ダッシュアイコン

開始タグと終了タグ

開始タグと終了タグを入力します。見出しタグ(h2)を追加する場合は、開始タグに＜h2＞、終了タグに＜/h2＞を入力します。

AddQuicktag 開始タグと終了タグ

HTMLタグ以外のショートコードや、tableタグ一式、フレーズを追加する場合は、終了タグを入力する必要はありません。開始タグのところだけ登録すればOKです。

AddQuicktag 開始タグ

アクセスキーと順番

アクセスキーを設定しておくと、ショートカットキーとして「アクセスキー」+「Alt」でタグが入力できるようになります。ただし、Internet Explorer使用時だけ有効で、ChromeやFirefoxでは使えないのであまり意味はありません。

順番に数字を入れると、ボタンの並び順を変更することができます。追加したタグは登録順にボタン表示されますが、後から分類する時に使うと便利です。

AddQuicktag アクセスキーと順番

クイックタグの表示

クイックタグの表示場所を指定します。一番後ろにチェックを入れると、すべての項目にチェックが入ります。

AddQuicktag クイックタグの表示

以上がAddQuicktagの設定項目ですが、基本的に「ボタンのラベル」、「開始タグ」、「終了タグ」、「タグの表示」だけ設定すれば十分に使えます。

スポンサーリンク

AddQuicktagが表示されない場合

AddQuicktagでクイックタグを設定しても表示されない場合は、チェックの入れ忘れが原因です。

AddQuicktagの設定項目からボタンのラベル名と開始タグ、終了タグを入力しても、右側のpostやpageにチェックを入れ忘れると、設定したクイックタグは表示されません。

AddQuicktag クイックタグが表示されない

クイックタグを設定したら、表示させるエディターの種類に必ずチェックを入れましょう。

AddQuicktag 表示されない

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

WordPressにあらかじめ登録されているデフォルトのクイックタグを非表示にすることができます。一番後ろにチェックを入れるとすべての項目が選択されます。

AddQuicktag デフォルトのクイックタグを非表示にする

WordPressでは画像を挿入する「img」や「タグを閉じる」ボタンはほとんど使いません。編集画面に表示する必要がないボタンは、ここで整理しておきましょう。

スポンサーリンク

拡張コードクイックタグボタン

記事内にHTMLコードをそのまま表示したり、貼り付ける言語ごとに文字を装飾できる「拡張コードボタン」を追加することができます。

AddQuicktag 拡張コードクイックタグボタン

preボタン

＜pre＞タグは半角スペースや改行をそのまま表示するためのタグで、記事内で以下のようにHTMLやCSS、PHPなどのサンプルコードを紹介する時によく使います。

.css-testcode{
    font-size:15px;
    color:#ff0000;
}

「pre」ボタンの隣にドロップダウンメニューも追加されますが、これは「code」ボタンと一緒に使います。言語を選んで「code」ボタンを押すと、codeタグにCSSが追加されます。

AddQuicktag 拡張コードクイックタグボタン

選択できる言語は7種類で、CSSに各言語ごとのclassを追加すると、サンプルコードに注釈を入れることができます。「code」で挿入されるコードは以下のようになります。

＜code class=”language-●●●●●”＞＜/code＞　●●●●●には各言語名が入る

たとえば「html」と「css」に以下のようなCSSを追加してみます。

pre{
position:relative; 
}

.language-html{
	position: absolute;
	top: 0;
	left: 0;
	font-size:1.5em;
	color:#ffffff;
	background-color:#ff0000;
}

.language-css{
	position: absolute;
	top: 0;
	left: 0;
	font-size:1.5em;
	color:#ffffff;
	background-color:#5588ee;
}

記事内でHTMLとCSSのサンプルコードを表示するため、preタグとcodeタグを組み合わせます。

AddQuicktag HTMLサンプルコード

以下のような感じでcodeタグとpreタグを追加します。

AddQuicktag codeタグとpreタグ追加

ブラウザで見るとこんな感じになります。これなら何のサンプルコードなのかが一目瞭然ですね。あとはテーマに合わせてCSSを修正してください。

AddQuicktag サンプルコード

html entitiesボタン

「html entities」ボタンを追加すると、編集画面で「<」を「＆lt;」にしたり、「"」を「＆quot;」に変換するHTMLエスケープ処理ができるようになります。AddQuicktag html entities

ウェブツール等でHTMLコードを変換する必要がなくなるので、記事内でよくサンプルコードを表示するなら、必ず有効にしておきましょう。

たとえば、以下のサンプルコードをWordPressの編集画面にそのまま貼り付けると・・・

<span style="color:#ff0000;">サンプルHTMLコードです</span>

単なるHTMLコードとして認識され、赤い文字が表示されてしまいます。

サンプルHTMLコードです

これを「HTML entities」ボタンで、以下のように変換（HTMLエスケープ）します。

＆lt;span style="color:#ff0000;"＆gt;サンプルHTMLコードです＆lt;/span＆gt;

変換後はHTMLコードとして認識されないので、ちゃんとサンプルコードが表示されています。

<span style="color:#ff0000;">サンプルHTMLコードです</span>

変換後のコードを選択して「Decode HTML」をクリックすると、HTMLエスケープする前のコードに戻ります。

「HTML Entities」と「Decode HTML」ボタンは、テキストエディタだけに表示されます。ビジュアルエディタでは使えないので注意してください。

エクスポート・インポート

AddQuicktagの設定内容をエクスポートして、他のサイトにインポートすると、追加したタグやボタンをそのまま利用することができます。

AddQuicktag エクスポートとインポート

AddQuicktagのエクスポートファイルはjson形式でダウンロードできます。インポートの際はjsonファイルをアップロードすればOKです。

AddQuicktag　エクスポート

スポンサーリンク

AddQuicktagの使い方

では、実際にAddQuicktagを使ってみましょう。大見出しの＜h2＞と小見出しの＜h3＞タグ、文字の装飾「赤い太字」を設定してみました。

AddQuicktag タグボタン

タグの追加は対象を選択してボタンをクリックするだけです。以下はテキストエディタで実際にタグを追加しています。見出しや装飾がボタンをクリックするだけで追加されていますね。

AddQuicktag タグ追加

エディタでタグを追加して、ブラウザで見るとこんな感じになります。

AddQuicktag タグ追加

ビジュアルエディタでは、「ツールバー切り替え」で全てのボタンを表示しないと、AddQuicktagで追加したタグを選択できません。追加したタグはドロップダウンメニューから選択します。

AddQuicktag ビジュアルエディタ

ビジュアルエディタでタグを追加しています。

AddQuicktag ビジュアルエディタ

他のタグ入力方法として、開始タグ追加→テキスト入力→終了タグ追加という方法もあります。ボタンを一度押すと開始タグを追加、2度目は終了タグを追加します。

AddQuicktag タグ入力

AddQuicktagのおすすめタグ　マーカー

AddQuicktagのおすすめタグをいくつかご紹介します。まずは強調したい部分を目立たせるマーカーを追加しましょう。マーカーを使うと、文字が以下のように装飾されます。

これは黄色太マーカーです。

これは黄色細マーカーです。

以下は入力したボタン名と開始タグ、終了タグです。

AddQuicktag マーカー

太マーカー　<span class="marker-bold"></span>
細マーカー　<span class="marker-fine"></span>

次にWordPressのスタイルシート(style.css)に、以下のCSSを追記します。

.marker-bold{
background: linear-gradient(transparent 0, #ffff66 0);
} /* 太マーカー */
.marker-fine{
background: linear-gradient(transparent 60%, #ffff66 60%);
} /* 細マーカー */

CSSの「#ffff66」の部分を変更すると、マーカーの色が変わります。

#ffccdd　細マーカーピンク

#ccffcc　太マーカーグリーン

#cceeff　細マーカーブルー

あとは好みに合ったマーカーの太さや色を選んでください。

CSSを使わず、AddQuicktagだけでマーカーを追加する場合は、開始タグに以下のコードを入力してください。CSSと同じ要領でマーカーの色や太さを変更できます。

<span style="background:linear-gradient(transparent 60%, #ffccdd 60%);">
スポンサーリンク

AddQuicktagのおすすめタグ　枠

ブログの文章にメリハリを付けるため、AddQuicktagで文章の要点や注意点を強調するための枠を追加しましょう。

マーカーと同じように、AddQuicktagとCSSを組み合わせると簡単に枠を追加できます。CSSで枠線の太さや背景色、枠の角を丸くするなどのカスタマイズが可能です。

サンプルとして、ピンクの角丸枠とグレーの枠を追加してみます。AddQuicktagに以下の開始タグと終了タグを追加します。

<span class="waku-pink">　</span>
<span class="waku-gray">　</span>

次にWordPressのスタイルシート(style.css)に、以下のCSSを追記します。

.waku-pink{
    padding:10px;
    border-radius:10px;
    background:#ffbbff;
} /* ピンク角丸枠 */
.waku-gray{
    padding:10px;
    background:#ddd;
} /* グレー枠 */

文章に以下のような枠が追加されます。あとはCSSを調整して、好みの枠を作成してください。

ピンク角丸枠ですピンク角丸枠ですピンク角丸枠です

グレイ枠ですグレイ枠ですグレイ枠ですグレイ枠です

枠線を入れたり、影を追加することもできます。CSSを使わない場合は、開始コードを以下に変更してAddQuicktagに追加してください。

枠線影付きイエロー角丸枠です枠線影付きイエロー角丸枠です

<span style="background: #ffff77; padding: 10px; border: 2px solid #111111; border-radius: 10px; box-shadow: 5px 5px 7px rgba(0, 0, 0, 0.32); word-break: break-all;">

GutenbergでAddQuicktagを使う

WordPress5.0から新たに導入された「Gutenberg」と呼ばれるブロックエディターですが、AddQuicktagはGutenbergに対応していません。

ただし、エディターをクラシックに変更すると、AddQuicktagを使うことができます。

まずは投稿もしくは固定ページから、本文中または上部の +（ブロックを追加）ボタンを押して、ブロック選択画面を開きます。

AddQuicktag Gutenbergブロック変更

左のリストから「クラシック」を選択して、WordPressエディターを切り替えます。

AddQuicktag Gutenberg エディター切り替え

タグ入力ツールバーが表示されるので、右端の「ツールバー切り替え」をクリックしてください。

AddQuicktag Gutenbergツールバー切り替え

ツールバーが拡張されて「Quicktags」が表示されました。ここからAddQuicktagに登録したタグを呼び出すことができます。

GutenbergでAddQuicktagを使う

タグ挿入や定型文入力は、その場では数秒ほどの作業でも、累計するとバカにならない時間を費やすことになりますが、AddQuicktagを使えばその時間を短縮できます。

顔文字やよく使う文章も登録できるので、いろいろ工夫しながらAddQuicktagを使いこなしてくださいね。

スポンサーリンク
タイトルとURLをコピーしました