addquicktagで吹き出しや蛍光マーカーも設定!おすすめの使い方とは?作業効率をアップ

投稿者: | 2019年10月24日

ワードプレスのaddquicktagプラグインを利用して、吹き出しや蛍光ペンのマーカーなどの装飾でよく使うタグを一発でエディタに反映させ、記事作成の効率を劇的に向上させるための方法をご紹介します。

これで、よく使う吹き出しや、蛍光ペンのマーカー風なアンダーラインや、お洒落なアンダーラインのhtmlタグやCSSをわざわざコピペして登録する必要はもうありません。

一度CSSやショートコードを追加設定するだけで、作業効率がアップし、ブログも短時間で見やすく仕上げることができるようになります。

(追記:2019/10/24 吹き出し設定について+記事更新)

 

Aki☆
難しい設定は、私イヤなんですけど・・タグとか超ムリなんですけど!
クマ吉
心配しないで!難しいコトは一切ないですよ。この記事の通り進めればOKです。

 

 

タグとは一体なに?

ワードプレスで文字を書いていると、タグという意識はないかもしれません。

でも、【テキスト】モードで表示すると分かり易いのですが、<p>文字文字文字</p>などの表示がたくさんありますよね。

この基本的に<>~</>で文字を括ると、太文字であったり、斜体文字であったり、赤文字であったりと変化するようになります。

何気に使っている「表」もそうですね。

<table>

<tr><td>文字1</td></tr>

<tr><td>文字2</td></tr>

</table>

このような構成で基本的に表の枠が作られ、線の太さや大きさ、横幅や色などを追加設定していくわけです。

勿論、今でもWEBデザイナーさん達は複雑なタグやプログラミングのコードを用いて最先端のホームページやブログを作成しています。

HTMLやCSS、JAVASCRIPTやPHPなど多岐に渡りますね。

 

しかし、Webデザイナーではない私が、毎日ブログ記事を書くために、毎回文章以外にタグの設定で文字を装飾したりするのはとても労力がいります。

良く使うコードや凝った装飾を労力をかけずに、いつでも呼び出すことができないかな・・しかもワードプレスで。

そこで登場するのが、AddQuicktagというプラグインなのです。

難しい装飾タグや、毎回呼び出すのが面倒なタグを一度設定するだけで、いつでも好きなタイミングでワンクリックで呼び出すことができます。

ワードプレスには、とても便利なツールが多数存在します。

少しでも作業効率が向上するツールに出会い、時間を有効利用できると幸いです。

では見ていきましょう!

 

 

ワードプレスにAddQuicktagプラグインをインストール

 

まずは、ワードプレスにAddQuicktagプラグインをインストールしましょう。

【プラグイン】⇒【新規追加】をクリックします。

キーワードに「AddQuicktag」と入力します。

AddQuicktagのプラグインをインストールします。

【今すぐインストール】ボタンをクリックします。

 

インストールが完了したら【有効化】ボタンをクリックします。

※有効化にせず、上手くいかないという問い合わせがたまにあります。

 

プラグインが確実に有効化になったことを確認します。

 

 

Simple Custom CSSプラグインのインストール

プラグインの追加画面に戻ります。

キーワードに【Simple Custom CSS】と入力します。

Simple Custom CSSプラグインをインストールします。

【今すぐインストール】ボタンをクリックします。

 

インストールが完了したら、【有効化】ボタンをクリックします。

 

 

 

AddQuicktagプラグインの設定

 

基本設定と、操作方法は下記の①~⑤を繰り返すだけです。

見本として、「青色の蛍光ペンマーカーのアンダーライン」の設定を例として設定していきたいと思います。

 

①【設定】⇒【AddQuicktag】を表示します。

下記の図のように設定し【設定を保存】します。

【ボタン名】:penlight-blue

【ラベル名】:penlight-blue

【開始タグ】:<strong class=”penlight-blue”>

【終了タグ】:</strong>

 

②【外観】⇒【カスタムCSS】を表示します。

下記のCSSコードをコピペし、【カスタム設定の更新】ボタンをクリックします。

/* 文字を蛍光ペンマーカーで塗りつぶし(色:blue) */
.penlight-blue {
background: linear-gradient(transparent 40%, #66ccff 40%);
}

 

③新規記事を作成します。

【テキスト】モードにします。

①で設定したボタン名が表示されていることを確認します。

装飾を付けたい文字を入力します。

例:AAAAAAAAAA

文字を反転させて、【①で設定したボタン名】をクリックします。

下記のようなコードが付きましたか?

<strong class=”penlight-blue”>AAAAAAAAAAA</strong>

 

④プレビューで確認します。

選択した文字に装飾が付きました。

 

⑤次回呼び出すときは、このボタンを押すだけで、文字を装飾できます。

 

Aki☆
これならAki☆もできるかも!

 

 

 

各種アンダーラインの設定について

色々なアンダーラインをこの際にまとめて登録しておきましょう。

設定は、上記の通り指定された箇所へ繰り返し登録していくだけです。

ブログ運営で毎回タグをコピペしたり調べていたら疲れますからね。

 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-wavy
【ラベル名】:underline-wavy
【開始タグ】:<p class=”underline-wavy”>
【終了タグ】:</p>

<カスタムCSS>
.underline-wavy {
-webkit-text-decoration: underline wavy red;
text-decoration: underline wavy red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-solid
【ラベル名】:underline-solid
【開始タグ】:<p class=”underline-solid”>
【終了タグ】:</p>

<カスタムCSS>
.underline-solid {
-webkit-text-decoration: underline solid red;
text-decoration: underline solid red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-double
【ラベル名】:underline-double
【開始タグ】:<p class=”underline-double”>
【終了タグ】:</p>

<カスタムCSS>
.underline-double {
-webkit-text-decoration: underline double red;
text-decoration: underline double red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-dotted
【ラベル名】:underline-dotted
【開始タグ】:<p class=”underline-dotted”>
【終了タグ】:</p>

<カスタムCSS>
.underline-dotted {
-webkit-text-decoration: underline dotted red;
text-decoration: underline dotted red;
}

 


 

文字にアンダーラインを付けたいです!

【ボタン名】:underline-dashed
【ラベル名】:underline-dashed
【開始タグ】:<p class=”underline-dashed”>
【終了タグ】:</p>

<カスタムCSS>
.underline-dashed {
-webkit-text-decoration: underline dashed red;
text-decoration: underline dashed red;
}

 

 


 

蛍光ペンのマーカー風の塗りつぶし設定について

 

蛍光ペンのマーカーの装飾についても、意外と簡単に設定できてしまいます。

知らないと、すごく特殊なことをしているのかな・・と思いますよね。

同じく設定をしていきましょう。

もちろん、好きな色に変更していただいても結構です。

 

 

文字を蛍光ペンのマーカーで塗りつぶして強調させたいのです!

【ボタン名】:penlight-blue
【ラベル名】:penlight-blue
【開始タグ】:<strong class=”penlight-blue”>
【終了タグ】:</strong>

<カスタムCSS>
.penlight-blue {
background: linear-gradient(transparent 40%, #66ccff 40%);
}

 


 

文字を蛍光ペンのマーカーで塗りつぶして強調させたいのです!

【ボタン名】:penlight-yellow
【ラベル名】:penlight-yellow
【開始タグ】:<strong class=”penlight-yellow”>
【終了タグ】:</strong>

<カスタムCSS>
.penlight-yellow {
background: linear-gradient(transparent 10%, #fff001 0%);
}

 


 

文字に★印を付けて強調させる設定

 

文字に★印を付けて強調させたい!

 

【ボタン名】:b*
【ラベル名】:b*
【開始タグ】:<b class=”star”>
【終了タグ】:</b>

<カスタムCSS>
.star{
-webkit-text-emphasis: ‘★’ red;
text-emphasis: ‘★’ red;
}

※設定後、文字の大きさを変えると上記のようになりますよ!

 

 


 

文字に影文字を付ける設定

 

 

文字に影を付けたいのです!

【ボタン名】:shadow
【ラベル名】:shadow
【開始タグ】:<b class=”shadow”>
【終了タグ】:</b>

<カスタムCSS>
.shadow{
text-shadow:10px 10px 5px #aaa;
}

 

 

吹き出し設定について(追記2019/10/24)

 

このaddquicktagは本当に使い方次第でとても作業効率がアップします。

私は、記事をたくさん書いていると、もっと分かり易くするために「吹き出し」などを利用する機会が増えてきました。

最初は、吹き出し用のタグをノートパッドなどに保存しておき、必要な時にコピペなどをしていました。

PCが変わる度にコード忘れた・・とか、またウィンドウをたくさん開いていると、コードを保存したテキストを呼び出すのに時間が掛かったりして、ウンザリすることもありました。

でも、addquicktagに一度登録しておくと、一発で好きな時に呼び出せます。

こんな感じに。

クマ吉
ん?お呼びですか?
Aki☆
もう、何時だと思ってるの?

 

設定の仕方は下記の通りとてもシンプルです。

ただし、「事前に吹き出し用の設定が必要」となりますので、こちらの記事でサッと設定をしておきましょう。

⇒ Speech Bubbleプラグインで会話型の吹き出しデザインを極めよう!

 

 

また、addQuicktagプラグインは、見出しのデザイン変更も登録しておくと、とても便利です。

このプラグインをインストールしたついでに、「ワードプレスの見出しデザインをプラグインで簡単に装飾設定・使い方」も合わせてご覧ください。見出しのデザインはとても重要で、設定の有無で読みさすが違います。

ご参考にしてみてくださいね。

 

 

 

最後にまとめ

 

以上が、addquicktagプラグインによる作業効率の向上の記事でした。

1回設定してしまえば、いつでも簡単にワードプレスに呼び出すことができます。

是非、自身のブログデザインに合った装飾をデザインしてみてくださいね。

 

 

addquicktagで吹き出しや蛍光マーカーも設定!おすすめの使い方とは?作業効率をアップ」への6件のフィードバック

  1. nuts

    こんばんは。
    ブログランキングから来ました。
    参考にさせていただきます。
    ありがとうございました。

    返信
    1. kuma 投稿作成者

      是非、是非、参考にしてみてくださいね。

      返信
  2. takafumi

    おはようございます。
    うわ~これはスゴイですね。
    こちらの記事を見ながらCSSコードをコピペして設定しようと思います。
    こういう知識は知らないといつまで経ってもわからないままです。
    ありがとうございます。

    返信
    1. kuma 投稿作成者

      懲りだすと、記事作成よりも時間がかかってます。
      コピペで色々と色を変えてみると楽しいですよ!

      返信
  3. chaseourdreams

    こんにちは。ランキングから来ました。すごい修飾技術ですね。びっくりしました。普通のワードでもなかなか実現できないことをWordPressでやっちゃうとはホントすごいです。早速マネさせていただきます。ありがとうございました。

    返信
    1. kuma吉

      こんにちは。
      この記事がお役に立てて、とても嬉しいです。
      頑張って作った甲斐がありました(^.^)

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です