[徹底解説!!]AddQuicktagのインストールと設定方法

addquicktagで記事を書くスピードが早くなる事をイメージした画像 プラグイン

記事の作成スピードをUpするWordPressプラグイン「AddQuicktag」のインストールと設定方法を徹底解説!

addquicktagで記事を書くスピードが早くなる事をイメージした画像

このプラグインは、ブログなどの記事を作成する際の作業時間を短縮してくれる便利なプラグインになります。

「AddQuicktag」でできることは、

  • 文字の色変えや太さの変更が1クリックでできるようになる
  • 覚えるのが面倒なHTMLコードを1クリックで呼び出せるようになる

ということです。どういうことかというと、

例えば記事を書いている時、文字を太く&赤くしたい場合がありますよね?

そんな時はまず「太字」のアイコンをクリックして、

太字アイコンの画像

次に「テキスト色」のアイコンをクリックして、

テキスト色アイコンの画像

赤色をクリックします。

テキスト色選択画面の画像

つまり、太赤文字にするためには3クリックが必要になります。

ところが、今回解説する「AddQuicktag」を使用した場合、

太赤文字タグの画像

たったの1クリックで太赤文字にすることができます。

 

上の例では太赤文字でしたが、青文字や緑文字への色変え、文字の拡大や縮小、背景色を変えることも1クリックでできるようになります。

たかだか1クリックか2クリックの短縮です。

だけど、あなたはこれからいくつの記事を書きますか???

数記事ならそこまで時間の短縮にはならないかもしれません。

10記事以上書くならどうでしょうか??

1つの記事でどれだけ文字の装飾をしていますか???

長い目で見たら間違いなく1クリックのメリットが大きくなります。

このプラグインを使ってみて、どれだけ記事作成時間を短縮できるか体感してみて下さい。

「AddQuicktagのインストールの方法」

それではWordPressプラグインの「AddQuicktag」をインストールしていきます。

このプラグインをインストールするためには2通りの方法があります。

  • 「AddQuicktag」配布サイトから直接ダウンロード

プラグインを配布しているサイトから直接ダウンロードを行い、サーバ内のWordPressディレクトリに直接インストールする方法になります。これはディレクトリ構造が分かっている方にオススメの方法になります。

  • WordPress管理パネルのプラグイン新規追加からインストール

WordPress管理パネルの「プラグインを新規追加」からインストールする方法になります。直接ダウンロードに比べこちらの方が直感的にインストールできるので初心者の方にオススメの方法です。

「AddQuicktag」配布サイトからダウンロード

まずは、プラグインを配布しているサイト(WordPress.org)へ移動し、ダウンロードをクリックします。

サイトはこちらになります。↓↓(配布サイトは別タブが開きます)

AddQuicktag

addquicktag公式サイトの画像

こちらのサイトでダウンロードしたプラグインを「/wordpress/wp-content/plugins」ディレクトリにアップロードします。

addquicktagのzipファイル画像

ダウンロードしたプラグインを展開します。

addquicktagファイルの画像

アップロードが完了したらWordPress管理パネルから「インストール済プラグイン」をクリックします。すると、

addquicktagプラグイン管理画面の画像

プラグイン一覧の中にインストールされたのが分かるので、「有効化」をクリックします。有効化後は管理パネルにある設定画面からいつでも設定を変更できるようになります。

※この時、ディレクトリに直接アップロードした場合は必ずファイルの所有権の変更を行っておきましょう。

これで、直接インストールする方法は完了しました。

詳しい設定方法については、後ほど解説します。

WordPress管理パネルのプラグイン新規追加からインストール

次に紹介するのは管理パネルからプラグインをインストールする方法になります。

まずは、管理パネルから「プラグイン新規追加」をクリックします。

プラグインの検索に「AddQuicktag」と入力します。

addquicktagプラグインインストール画面の画像

このように表示されるので「今すぐインストール」をクリックします。

プラグインインストール有効化の画像

有効化をクリックしてインストールが完了します。

管理パネルからプラグインを見てみると、以下のようにインストールされているのが確認できます。

プラグイン管理画面の画像

プラグインのインストールの解説はこれで終了です。

次は実際に設定を行っていきましょう。

「AddQuicktag」設定の方法

ここでは具体的な設定方法について解説していきます。

管理画面左の「設定」⇒「AddQuicktag」をクリックします。

addquicktag設定画面へ移動するボタンの画像

もしくは、管理画面左の「インストール済プラグイン」⇒「設定」をクリックしてもOKです。

インストールプラグインのaddquicktagの設定ボタンの画像

「AddQuicktag」基本的なクイックタグの追加と削除の方法

設定ボタンをクリックすると一番上に「クイックタグの追加と削除」設定が表示されます。

addquicktagの基本設定画面の画像

ここの画面で好きなタグを登録すれば、投稿画面でそのボタンが表示されて使える仕組みになります。

基本的な項目の見方は下の表の通りになっています。

項目意味
ボタン名投稿画面で表示されるボタンの名前(任意で設定)
ダッシュアイコンアイコンの形
ラベル名マウスカーソルをボタンに当てた時に出てくる説明文
開始タグHTMLの開始タグ

(定型文を登録する場合は開始タグに入れる)

終了タグHTMLの終了タグ
アクセスキーショートカットキーのコード
順番 登録するボタンの順番

それでは、実際の具体例を見ながら解説していきます。

まずは設定前の投稿画面を見てみます。

addquicktagを設定する前の投稿画面の画像

あれ???何かやたら色んなアイコンがあるぞ!?って思われるかもしれませんが、ビジュアルエディタを使いやすくするプラグインの「TinyMCE Advanced」をインストールしてます。

このプラグインは、ビジュアルエディタの使い勝手を良くしてくれますので、オススメです。

ビジュアルエディタ「TinyMCE Advanced」の使い方
ビジュアルエディタ「TinyMCE Advanced」で簡単記事作成(できることと使い方の解説) 「TinyMCE Advanced」は記事を作成する際に使用するビジュアルエディタの機能を拡張するWordPressプラグインになり...

それでは、「AddQuicktag」の解説に戻ります。

まず設定画面を開きます。

試しに、記事を書く際によく使うタグの1つである「大見出し」(h1)のタグを入れてみます。

「大見出し」の開始タグは<h1>、終了タグは</h1>になります。

ここでは、<>やh1の前にある「/」については深く考えなくても大丈夫です。

これらはHTMLと呼ばれる文章を入力するときのルールを記号化したものなんですが、覚えようとすると数がありすぎて大変なので、とりあえず必要になったらコピペしておけば問題ありません。

設定画面でこれらを入力してやると下図のようになります。

addquicktag設定画面の画像

右側のチェックボックスは全てチェックをいれてあげましょう。

特に一番右はチェックを入れないと設定が反映されないので必ずチェックするようにして下さい。

入力が終わったら「変更を保存」をクリックします。

投稿画面に戻ってみると、

addquicktag設定後の投稿画面の画像

右側に「Quicktags」のアイコンが追加されたのが分かります。

▼をクリックすると

quicktagsタグの画像

 

「大見出し」(h1)のタグが追加されました。

一度設定したクイックタグを削除したい時は、入力した項目を削除すればOKです。

「AddQuicktag」追加すると便利なクイックタグを追加しよう

ここでは「AddQuicktag」で追加しておくと便利なクイックタグの登録の方法を解説していきます。

登録は下の手順でおこないます。

  1. クイックタグの登録
  2. テーマのスタイルシートにCSSをコピーして登録

1.のクイックタグの登録は、先ほど解説した「大見出し(h1)」の時の手順で登録していきます。

2.のCSSというのは、簡単に言うと文字の色や大きさ、ブログの外観を設定できるものです。

これを登録しておくと、クイックタグで設定した文字の色とかをを変更したくなった時に簡単に変更できるようになります。

登録はCSSに慣れていない人でも簡単にコピペでできるので安心して下さい。

「AddQuicktag」で便利なクイックタグ一覧

クイックタグに入れておくと便利なタグは色々ありますが、代表的なものを下図に載せました。

ボタン名開始タグ終了タグ
大見出し(h1)<h1></h1>
中見出し(h2)<h2></h2>
小見出し(h3)<h3></h3>
小見出し(h4)<h4></h4>
小見出し(h5)<h5></h5>
太文字<span class="bold"></span>
太赤字<span class="bold-red"></span>
合わせて読みたい(リンクが1つ)<p class="emphasize-link"><a href="リンク先URL">リンク先タイトル</a></p>
合わせて読みたい(リンクが2つ以上)<div class="emphasize-link">
<p><a href="リンク先URL1">リンク先タイトル1</a></p>
<p><a href="リンク先URL2">リンク先タイトル2</a></p>
</div>

「AddQuicktag」で便利なクイックタグを登録

上のタグをひたすら追加すると下図のようになります。

addquicktag設定後の前半部分の画像

addquicktag設定画面の下段部分の画像

一回一回「変更を保存」ボタンをクリックしないといけないので、大変ですが、頑張って入力しましょう(笑)

とりあえず自分が普段使うものを入れておけば大丈夫です。

この設定をやっておくと後でかなり楽できます。

テーマのスタイルシートに「CSSコード」を登録

CSSの登録はテーマのスタイルシートに追記していきます。

管理画面の「外観」⇒「カスタマイズ」⇒「追加CSS」をクリックします。

※ここでは、追加CSSを使用しますが、お使いのテーマによって場所が変わる可能性があります。「テーマの編集」という項目からもCSSの編集ができますので、各自のテーマに合わせて下さい。

追加CSSボタンの画像

CSS編集画面になりますので、一番下にCSSのコードを追記していきます。

追加CSS追記画面の画像

ここの一番下に先ほど設定したクイックタグのCSSを追記します。

「合わせて読みたい」のCSSを追記

「合わせて読みたい」のCSSは以下のようになります。

/* あわせて読みたいカスタマイズ */
.emphasize-link {
position: relative;
margin: 36px 0 16px;
padding: 16px 10px;
border: 2px solid #0068b7;
background-color: #f7f6fb;
}
.emphasize-link p:last-child {
margin-bottom: 0;
}
.emphasize-link::before {
position: absolute;
bottom: 100%;
left: -2px;
padding: 2px 6px;
content: "あわせて読みたい";
background-color: #0068b7;
color: #fff;
font-weight: bold;
}

上記のCSSをコピーして実際に貼り付けると下のようになります。

CSS追記後の画像

「太文字」、「太赤文字」のCSSは以下のようになります。

/*太字*/
.bold {
font-weight: bold;
}/*太赤字*/
.bold-red {
font-weight: bold;
color: #ff7f50
}

上記のCSSをコピーして実際に貼り付けると下のようになります。

追加CSS画面の画像

投稿画面で「AddQuicktag」を使用してみよう

それでは実際に記事の投稿画面で登録したタグを使ってみます。

「Quicktags」のアイコンをクリックすると下のように表示されます。

addquicktagボタンの画像

それでは「合わせて読みたい」というリンクタグを使用してみます。

まず、ビジュアルエディタ画面で「合わせて読みたい」をクリックした後、テキストエディタ画面へ移動すると、下のように表示されます。

テキストエディタ画面

「リンク先URL」と「リンク先タイトル」を入力します。

ここでは、例として

リンク先タイトルを「快適に記事作成!ビジュアルエディタ「TinyMCE Advanced」をインストールしよう」

リンク先URLを「https://linux-for-beginners.net/wordpress/plug-in/tinymce-advanced」

を入力していきます。

入力後の画面は下のようになります。

テキストエディタで例題を入力した画面

これをビジュアルエディタ画面で見ると下のようになります。

ビジュアルエディタ画面の画像

では、実際に公開した後はどのようになるかというと下のようになります。

 

 

「AddQuicktag」で設定したタグがしっかりと反映されているのが分かりますね。

まとめ

「AddQuicktag」は設定するのが少し面倒ですが、一旦設定してしまえば、記事を作成する時間が格段にスピードアップできます。

記事を書く環境を整えるというのは、良質な記事を書く基本的な土台にもなりますので、ぜひインストールして活用してみて下さい。

 

コメント

タイトルとURLをコピーしました