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

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

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

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

①style.cssの編集

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

	/* 吹き出し左右共通 */
	.balloon-simple {
	width: 100%;
	margin: 20px 0;
	overflow: hidden;
	}
	.balloon-simple .icon-right img,
	.balloon-simple .icon-left img{
	width: 100%;
	border-radius: 50%;
	background-size:cover;
	}
	.icon-right p,
	.icon-left p{
	text-align: center;
	top: -10px;
	position: relative;
	}
	.balloon-simple .balloon {
	width: calc(100% - 110px);
	float: right;
	}
	.serif-right,
	.serif-left {
	position: relative;
	padding: 20px 30px 20px 15px;
	border-radius: 10px;
	}
	.serif-right:after,
	.serif-left:after {
	content: "";
	position: absolute;
	top: 15px;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 5px solid transparent;
	}
	.serif-right p,
	.serif-left p {
	margin: 0;
	padding: 0;
	color: #555;
	}
	/* 右の吹き出し */
	.balloon-simple .icon-right {
	float: right;
	width: 100px;
	margin-right: 10px;
	margin-top: 0;
	margin-bottom: 0;
	}
	#single #content .balloon-simple .icon-right img,
	.page#content .balloon-simple .icon-right img {
	margin-top: 0;
	margin-bottom: 0;
	}
	.serif-right {
	margin: 10px 20px 0 0px;
	background: #eeeeee;
	}
	.serif-right:after {
	transform: scale(-1, 1);
	right: -22px;
	border-right: 20px solid #eeeeee;
	}
	/* 左の吹き出し */
	.balloon-simple .icon-left {
	float: left;
	width: 100px;
	margin-left: 10px;
	margin-top: 0;
	margin-bottom: 0;
	}
	#single #content .balloon-simple .icon-left img,
	.page#content .balloon-simple .icon-left img {
	margin-top: 0;
	margin-bottom: 0;
	}
	.serif-left{
	display: inline-block;
	margin: 10px 0 0 20px;
	background: #d8f4f8;
	}
	.serif-left:after{
	left: -22px;
	border-right: 20px solid #d8f4f8;
	}

view raw style.css hosted with by GitHub

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です。

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

	@media(max-width : 767px) {
	/*吹き出し*/
	.balloon-simple .icon-left,
	.balloon-simple .icon-right {
	width: 70px;
	margin-left: 0;
	margin-right: 0;
	}
	.balloon-simple .balloon {
	width: calc(100% - 70px);
	font-size: 16px;
	}
	.serif-right, .serif-left,
	.serif-right, .serif-right {
	padding: 10px;
	}
	}/*max767*/

view raw style.css hosted with by GitHub

②AddQuicktagに登録

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

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

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

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

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

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

関連記事