ワードプレスで自作テーマ作成シリーズ
今回は「L18 プラグインなしでアイコン付き吹き出しをを作る」方法をご紹介します。

CSSにコピペしてAddQuicktagというプラグインに登録するだけで簡単にできてしまします。

以下のような吹き出しができます。

今回はこちらの記事を参考にさせていただきました。

①style.cssの編集

「style.css」に以下を記入してください。

62~66行目の記述で

#single #content .balloon-simple .icon-right img,
.page#content .balloon-simple .icon-right img {
margin-top: 0;
margin-bottom: 0;
}

89~93行目の記述で

#single #content .balloon-simple .icon-left img,
.page#content .balloon-simple .icon-left img {
margin-top: 0;
margin-bottom: 0;
}

とありますが、こちらはアイコンの画像の余白をなしにしています。

当ブログで紹介している自作テーマは記事ページや固定ページのすべての画像上下に20pxの余白をつけていますが、このアイコンには余白はない方がいいのでここで指定しなおしています。
この記述が必要のない方は削除してOKです。

更にスマホ用の指定も追加してください。スマホでは画像を少し小さめに表示しています。

②AddQuicktagに登録

AddQuicktagというプラグインを使うことで投稿画面からわずか2クリックで簡単に吹き出しを適用できるようになります。

「AddQuicktag」のインストール方法、使用方法については以下の記事で解説しています。
https://realinfojpn.xsrv.jp/addquicktag-673.html

③ 以下のように入力し「変更を保存」をクリックしてください。

ボタン名	吹き出し左（任意）
ラベル名	吹き出し左（任意）
開始タグ	<div class=”balloon-simple”> <div class=”icon-left”> <img src=”画像のURL” alt=”任意（画像の説明）”> <p>任意（アイコンの名前）</p> </div> <div class=”balloon”> <div class=”serif-left”> <p>
終了タグ	</p> </div> </div> </div>
順番	任意の数字

ボタン名	吹き出し右（任意）
ラベル名	吹き出し右（任意）
開始タグ	<div class=”balloon-simple”> <div class=”icon-right”> <img src=”画像のURL” alt=”任意（画像の説明）”> <p>任意（アイコンの名前）</p> </div> <div class=”balloon”> <div class=”serif-right”> <p>
終了タグ	</p> </div> </div> </div>
順番	任意の数字

また、ビジュアルエディタ－、post、page、attachment、comment、edit-comments、widgetsにチェックを入れてください。（一番右のチェックマークにチェックを入れると全てにチェックを入れることができます。）

アイコン画像を用意してアップロードし、URLを”画像のURL”に記載してください。画像のサイズは130pixelほどがちょうどいいかと思います。

記事の投稿画面で吹き出しを適用したい文章を選択し任意の下線マーカー名をクリックすると適用されます。投稿画面では適用されていないように見える場合、プレビューで確認してみてください。

関連記事

コメント