こんな悩みを解決します
- この記事を書いた人
ようせい（＠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つ作っておくと大変便利で使えます！
次は吹き出しの設定方法を見ていきましょう。
吹き出しの設定方法
先程と同じように「吹き出しのタグ」をプラグインに設定していきます
ようせいブログの吹き出しのタグ↓
<figure class=”balloon__img balloon__img-left”>
<div><img class=”alignnone size-medium wp-image-1902″ src=”https://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=”https://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」で吹き出し・マーカーを設定する方法をご紹介しました。
入れて損はないプラグインなのでぜひ活用してみてください★
自分の好みの色のマーカーを使うと気分も上がりますよね♪
