AddQuicktagの設定方法と使い方を画像で解説!定型文あり

こんにちは、シェアリッチ株式会社の阿久津です。

今回は、AddQuicktagの設定方法と使い方を画像を見ながら解説したいと思います。

AddQuicktagは、WordPressで記事を書く時の文字装飾や見出しの設定などをスピーディーに行うことができる便利なプラグイン

WordPressの初期設定では、文字装飾をする場合は自分でHTMLタグを入力しなければなりません。見出しを区別したり、使いたい文字装飾が多くなればなるほど、手動でHTMLタグを入力するのは面倒になります。

そこで、時間を短縮するために、私はAddQuicktagを使用することをおすすめしています。実際に私もAddQuicktagを使用するようになって、手動で入力する煩わしさから解放され、今はとても快適ですよ。

それでは、まずはAddQuicktagの設定方法から見ていきましょう。

AddQuicktagの設定方法

それでは、AddQuicktagの設定を一緒に行いましょう。

AddQuicktagをインストールしていない方は、下記の手順でインストールして、有効化してください。順番に解説していきますね。

インストールと有効化

自分のサイトのダッシュボードのプラグインで赤枠の新規追加をクリックします。

すると、下記のように右上の赤枠部分に入力する欄が出ます。

ここに、「AddQuicktag」と入力してください。

AddQuicktagの表記は、大文字と小文字を正確に入力しましょう。

全て小文字、または全て大文字などでは、AddQuicktagが出てこないことがあります。

正しく入力すると、AddQuicktagのプラグインが出ますので、赤枠のインストールをクリックします。

続いて、有効化をクリックしてください。

インストールしただけでは意味がないので、特に初心者の方は注意してくださいね!

下記のように、プラグインに正しく追加されているか確認できればOKです。

次に、設定を行っていきます。

AddQuicktagの設定

AddQuicktagの設定を行うために、プラグインの赤枠の設定をクリックします。

すると、次のような画面が出てきます。

赤枠の①~④が大切で、後は基本的に不要です。

①~④の役割をひとつずつ説明しましょう。

まずは①から。

①はボタン名です。

ボタン名は、見出し、赤色文字、太文字、黄色マーカーなど、自分が分かりやすい名前を付けます。

今回は、「見出し2」を例に作っていきましょう。

ボタン名に見出し2と入力します。

次に②、③に移ります。

②の開始タグは、HTMLの開始タグのことです。

③の終了タグは、HTMLの終了タグのこと。

開始タグと終了タグの2つがセットになって、初めて装飾が行えます。

見出し2の開始タグは「<h2>」、終了タグは「</h2>」なので入力してください。

最後が④です。

④にチェックをを入れて、すべての項目にチェックが自動で入るようにします。

①~④の入力が終わったら、右下の赤枠の変更を保存をクリックしてください。

これで、見出し2のボタンが完成しました。実際に、使ってみましょう。

AddQuicktagの使い方

続いて、先ほどAddQuicktagで作った「見出し2」のボタンを実際に記事で使用していきますね。

今回は新規記事で解説します。

ダッシュボードの欄にある投稿の新規追加をクリックしてください。

WordPressで記事を書く時は、赤枠のビジュアルと、その右側のテキストのどちらかで文字を入力していきます。

今回は初心者の方にも分かりやすいように、ビジュアルで解説しますね。赤枠のようにビジュアルになっているのを確認します。

次に見出し2にする文字を入れましょう。

今回は「第1章」にしました。

そして、「第1章」の箇所をマウスで選択します。

赤枠のQuicktagをクリックすると、先ほど作った「見出し2」が出てきます。

「見出し2」を選択すると、第1章の文字が大きくなっていますね。

これで、「第1章」という文字が見出し2になりました。テキストの方でも確認してみましょう。

赤枠のテキストをクリックしてください。

テキストの方でも、第1章という文字が見出し2のタグに挟まれて入ればOKです。

以上が、AddQuicktagの基本的な使い方になります。

後は、今回の「見出し2」のように頻繁に使用するタグを追加しておけば、毎回手動で入力する手間が省けます。

最後に、タグとして登録しておくと便利なものを定型文として掲載しておきますね。

AddQuicktagのおすすめ定型文

ボタン名開始タグ終了タグ内容
見出し2<@h2><@/h2>大見出し
見出し3<@h3><@/h3>見出し2の小見出し
見出し4<@h4><@/h4>見出し3の小見出し
大文字<@span class="f20em"><@/span>文字を大きくする
太文字(赤)<@strong><@/font>赤色の太文字
太文字(青)<@span class="blue b"><@/font>青色の太文字
黄色マーカー<@font style="background-color:yellow"><@/font>黄色のマーカー
枠線(点線)<@div style="padding:10px;border: 1px dotted #333333;"><@/div>点線の枠線

※開始タグと終了タグは、すべて@を削除して入力してください。

こちらでは、AddQuicktagに登録しておくと便利な定型文をいくつか載せてあります。

コピーして利用できるので、ぜひお使いください。

まとめ

ここまで、AddQuicktagの設定方法と使い方を画像を見ながら紹介してきました。

AddQuicktagは、記事を書く時の文字装飾を行う時にとても便利なプラグインというのがお分かりいただけたと思います。初心者の方には、プラグインのインストールの方法もお伝え出来ました。

AddQuicktagの設定も使い方も、順序立てて行っていけば、初心者でもできますから安心してくださいね!

装飾の定型文も基本的なものはお伝えしましたので、まずは十分かと思います。

と言いますのも、文字装飾が多すぎると記事がかえって読みにくいので(^-^;

3種類(最大3色くらい)がおすすめですよ!

最新情報をチェックしよう!
>集客に強いサイトを育てるためのサポート

集客に強いサイトを育てるためのサポート

シェアリッチ株式会社では、企業やお店の集客を強化するためのホームページ作成、コンテンツ作成のコンサルティングをしております。興味がございましたら、お気軽にご相談ください。

CTR IMG