Wordpress

AddQuicktagの使い方【ワードプレスプラグインで効率UP】

AddQuicktagで装飾を楽にする方法【ワードプレスプラグイン】

こんにちは! 脳科学ブロガーのクルス(@homncls1)です。

 

・ブログの記事をもっと早く書きたい

・Add Quick tagって何?使い方を教えて

・コードをコピーしたり書いたりするのが面倒くさい..

今回はこのような方へ向けて、記事を書きました。

 

ブログの作成スピードを上げたい.というのはブロガーの皆が思うことですよね。

特に、マーカーや吹き出し・太字などを毎回コード入力するのは面倒極まりないです。

 

そこで、今回はブログの装飾や編集を楽にするwordpressプラグイン「Add Quick tag」の特徴と使い方を紹介します!

 

✔CONTENT

・wordpressプラグインAddQuicktagとは

・AddQuicktagの導入法

・AddQuicktagの使い方

 

なお、今回の記事ではプログラミングの「コード」が少しでてきます。

プログラミングとブログの関係性を頭に入れておくと、理解が深まるので下記の記事も参照オススメです。

 

ブログにプログラミングの知識は必要か?【メリットを公開】

 

ワードプレスプラグインAddQuicktagとは

AddQuicktagとは

 

AddQuicktagでは、マーカーや吹き出し等のコードを登録しておくことで装飾・編集スピードを上げるツールです。

登録しておけばボタン1つで欲しい装飾を呼び出せるので、編集時間の短縮ができます。

 

アナタ
アナタ
ちょっとイメージ分かない…

という方も多いかと思うので、具体例を1つ載せておきます。

 

例えば、ある部分に黄色マーカーをつけたいなぁと思ったら下記のコード入力が必要です。

 

<span class=”marker”>この中に文章</span>

(※ワードプレステーマによっては、元からマーカーをボタン1つで呼べたりもします)

 

また、下記のような吹き出しを呼ぶときもコードは必要。

呼んだ?

 

こういった装飾もaddquicktagにコード自体を登録しておけば、ボタン1つで解決です。

普通に便利やん。という話なので、早速プラグインのインストールに移りましょう!

 

AddQuicktagの導入法

AddQuicktagの導入手順

 

「AddQuiktag」は、wordpressのプラグインだけあって導入もとっても簡単です。

サクッと見ていきましょう。

AddQuicktagを有効化

 

AddQuicktagを導入する手順は下記のとおりです。

①wordpressダッシュボードのプラグイン「新規追加」をクリック

②「AddQuicktag」と検索

③「今すぐインストール」→「有効化」をクリック

 

AddQuicktagを検索して有効化

 

AddQuicktagの導入はこれにて終了です。

 

AddQuicktagの使い方

AddQuicktagの使い方

 

続いては、addquicktagにコードを登録して実際に使う手順を抑えていきましょう。

・AddQuicktagにコードを登録する

・AddQuicktagのその他の機能

・AddQuicktagを使ってみよう

・マーカーが表示されないときは..

 

AddQuicktagにコードを登録する

 

ダッシュボードの「設定」→「AddQuicktag」をクリックです。

すると、下記の画像のような画面がでてきます。

AddQuicktagの設定画面

 

AddQuicktagへのコード追加はこの画面で行います。

 

今回は例として、先ほど登場した黄色マーカーのコード登録法を見てみましょう。

手順は下記の通りです。

 

①ボタン名を入力

→今回なら黄色マーカー

②コードの開始タグを入力する

→<span class=”marker”>

③コードの終了タグを入力する

→</span>

④✔を全てにいれる(一番右の□に✔すると一気に全ての項目がチェックされます。)

⑤「変更を保存」をクリック

 

下記の画像の欄が埋まっていればOKです。

AddQuicktagの編集例

 

これにて、黄色マーカーのコードをaddquicktagに登録できました。

 

AddQuicktagのその他の機能

 

先ほど扱わなかった欄の解説もしておきます。

 

「ダッシュアイコン」:そのボタン独自のアイコンを設定できます。

「アクセスキー」:いわゆるショートカットキー(Alt+設定したキーで使えます)

「順番」:ブログ作成画面にショートカットボタンが表示される順番です。

空欄にしておくと、登録順で表示されます。

 

選べるアイコンの種類は、下記の画像の通り。

AddQuicktagの補足説明

 

AddQuicktagを使ってみよう

 

ワードプレスのブログ編集画面に移って、実際に使ってみましょう。

 

まずコードを適用したい(今回ならマーカをつけたい)箇所を選択。

その後、新しく表示された「Quicktags」を開きましょう。

 

すると、先ほど登録した「黄色マーカー」という欄があるのでクリックします。

 

これで、マーカーをつけることに成功しました。(プレビュー画面で確認しましょう)

AddQuicktagでマーカーを導入

※間違えて、ピンクマーカーになっているのはご容赦ください💦

 

なおテキストエディターでは、下記画像のように「黄色マーカー」ボタンが追加されているので、そちらを使いましょう。
AddQuicktagのテキストエディター版

 

マーカーが表示されない方は…

 

黄色マーカーが表示されないという方は、下記のコードを「外観」→「テーマ編集(エディター)」のstyle.cssにコピペしてください。

 

 

.marker_yellow_half {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

 

※コピペの前は必ずバックアップを取っておきましょう。

 

よく分からない。という方は、下記の記事を参照ください。

wordpressプラグインを使ったバックアップのとり方

 

style.cssにコピペ・設定を保存までできたら、もう一度ワードプレスの編集画面でAddQuicktagを使ってください。

 

恐らく黄色マーカーがだせるようになっています。

 

プラグインAddQuicktagでブログを効率化しよう

要約

今回は、ワードプレスプラグイン「AddQuicktag」の使い方について解説しました。

 

・AddQuicktagはコードを登録することで、装飾がボタン1つで簡単にできる。

・wordpressのプラグインなので、導入も簡単。

 

AddQuicktagにコードをどんどん登録して、ブログ作業を効率化していきましょう!

 

なお、入れておくと便利なプラグインをもっと知りたい方は下記の記事も参照ください。

ワードプレス初心者が入れておくべきプラグイン9選

 

最後までお読みいただきありがとうございました。

 

他のブログに役立つ記事は、下記にまとめています。

ブログの質・収益・集客力を上げたい。という方はぜひ参照ください。