【らくらく装飾】WordPressで使える便利なプラグインAddQuicktagをご紹介

 

悩める女の子
吹き出し、マーカーをさっと使いたいんだけど、設定できる便利なプラグインはあるかな?

 

こんな悩みを解決します

 

  • この記事を書いた人

ようせい(@yousei_bg

 

ブログの装飾にこだわりたい方は吹き出し、自作マーカーを作りたいですよね。

 

よう
テーマにある既存のマーカーの色が好みじゃない場合、プラグインで作りましょう!

 

今回はWordpressで使えるプラグインをご紹介します。

 

この記事の内容
  • マーカーの設定方法
  • 吹き出しの設定方法

 

この作業は簡単に出来るので記事を読みながら進めてみてください★

 

マーカーの設定方法

 

 

事前準備

  • プラグインの新規追加画面から「AddQuicktag」をインストール(有効化)する
  • マーカーにしたいカラーコードを用意する

 

早速始めていきます。

 

  • 外観」→「テーマエディター」に進み、スタイルシート (style.css)の編集画面で、使用したいCSSをコピー&ペーストしてください。

.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

※ transparent→「透明度」 #FFDFEF→「カラーコード」narrow→「細い」

 

コピペしてもらっても構いません★(カラーコード・透明度・太さなど自作可能です)

.pink_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FFDFEF 0%) repeat scroll 0 0;}

.blue_line{background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #cce5ff 0%) repeat scroll 0 0;}

.yellow_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #ffff00 0%) repeat scroll 0 0;}

.pink_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffb2d8 0%) repeat scroll 0 0;}

.blue_line_narrow {background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #add6ff 0%) repeat scroll 0 0;}

.yellow_line_narrow{background:rgba(0, 0, 0, 0) linear-gradient(transparent 80%, #ffff00 0%) repeat scroll 0 0;}

.orange_line {background:rgba(0, 0, 0, 0) linear-gradient(transparent 60%, #FACC2E 0%) repeat scroll 0 0;}

 

>>カラーコード表はこちら

 

スタイルシート (style.css)に書き終わったらプラグインの設定に進みます!

 

  • インストール済みプラグイン「AddQuicktag」を開き設定ボタンをクリックします

 

  • この画面に名前とタグを入力していきます

 

 

ボタン名

蛍光ペン:太いオレンジ(編集画面で表示されるので自分がわかりやすい名前でOK)

開始タグ*

<span class=”orange_line”>オレンジの蛍光ペン(太め)

終了タグ(s)

</span>

アクセスキーと並び順

入力した数字の順番に表示されます(0でもOK)

ビジュアルエディター

全ての項目にチェックマークを入れます

 

  • 全て入力出来たら「変更を保存」ボタンをクリックで完了です

 

スタイルシート (style.css)に読み込ませてプラグイン設定内で名前・開始終了タグを打つだけで簡単にオリジナルのマーカーが作れるので1つ作っておくと大変便利で使えます!

 

せい
編集画面でボタン1つでマーカーが引けるので時短にもなります★

 

次は吹き出しの設定方法を見ていきましょう。

吹き出しの設定方法

 

先程と同じように「吹き出しのタグ」をプラグインに設定していきます

 

ようせいブログの吹き出しのタグ↓

<div class=”balloon”>
<figure class=”balloon__img balloon__img-left”>
<div><img class=”alignnone size-medium wp-image-1902″ src=”http://mamorunet.com/wp-content/uploads/2020/10/C98E9532-E867-4ECB-84C7-28786D58B01B-300×300.jpg” alt=”” width=”300″ height=”300″ /></div>
<figcaption class=”balloon__name”>よう</figcaption></figure>
<div class=”balloon__text balloon__text-right”>コメント</div>
</div>

 

ボタン名

吹き出し:笑う「よう」(編集画面で表示されるので自分がわかりやすい名前でOK)

開始タグ*

<div class=”balloon”>
<figure class=”balloon__img balloon__img-left”>
<div><img class=”alignnone size-medium wp-image-1902″ src=”http://mamorunet.com/wp-content/uploads/2020/10/C98E9532-E867-4ECB-84C7-28786D58B01B-300×300.jpg” alt=”” width=”300″ height=”300″ /></div>
<figcaption class=”balloon__name”>よう</figcaption></figure>
<div class=”balloon__text balloon__text-right”>コメント</div>

終了タグ(s)

</div>

アクセスキーと並び順

入力した数字の順番に表示されます(0でもOK)

ビジュアルエディター

全ての項目にチェックマークを入れます

 

  • 全て入力出来たら「変更を保存」ボタンをクリックで完了です

 

よう
喜怒哀楽の吹き出しを設定しておくと、わざわざ編集画面で画像を変えなくてもボタンを押すと出てくるのでとても便利です♪

 

まとめ

プラグイン「AddQuicktag」で吹き出し・マーカーを設定する方法をご紹介しました。

入れて損はないプラグインなのでぜひ活用してみてください★

自分の好みの色のマーカーを使うと気分も上がりますよね♪

 

よう・せい
最後までご覧いただきありがとうございました。

 

関連記事【収益・PV数】ブログ3か月・100記事書くといくら稼げる?毎日更新し続けた結果をご紹介