【WordPressブログ】CSSでの吹き出しアイコンの作り方(プラグインなし)

困ってる人

HTMLとCSSだけで吹き出しアイコンをつくりたいんだけど、どうやって作るんだろう？
出来ればプラグインは使いたくないんだよなぁ…

こんにちは、ikuxxと申します。

今回は、ワードプレスでブログを書いている人向けの記事で、

「CSS」でプラグインを使わずに「吹き出しアイコン」の機能を搭載する方法をご紹介。

今回作るのは、こちらのブログでも使ってるこんな感じの「ふきだし」を作る機能。

プラグインを使って吹き出しの機能を使うのもいいのですが、プラグインを入れるとページの表示が遅くなったりと、何かしらと問題が出る事も多く、そうなるとSEO的にもあまりよくない。

という事で今回は、プラグインを使わない方法。

これらの機能は、後からいくらでもキャラクターを追加したりする事も可能で、実装もコピペで簡単なはず。

「CSS」がある程度分かる人は、吹き出しアイコンのデザインもある程度自由に変えれますね。

もし、面倒な事は嫌いだという人にはやっぱりプラグインを使うのがおすすめ。

有名どころのプラグインだと「Speech Bubble」なんかがありますね。

僕も、昔は使ってました。

もし興味があれば、試しにダウンロードして使ってみるといいかも。

困ってる人

という事で、吹き出しアイコンを作る方法を教えて下さい

かしこまりました。それでは簡単にご説明致しますね

オペレーター

【プラグインなし】CSSで吹き出しアイコンを作る方法
1. 吹き出しアイコンの作り方：HTMLの準備
2. 吹き出しアイコンの作り方：CSSの準備

【プラグインなし】CSSで吹き出しアイコンを作る方法

という事で、今回まずやる事というのは、

HTMLの準備(吹き出しの元となる骨組み)

CSSの準備(ここで吹き出しのデザインを決める)

吹き出しアイコンのデザインが大体出来たら、次に今度はこれらを呼び出す。

呼び出す方法としては、

HTMLタグを毎度コピペをしながら使う

WordPressのテンプレート機能を使う

クイックタグに登録して、ボタン１個で操作出来るようにする

もし「HTML」や「CSS」についてさっぱり分からないという人は、

こちらの記事に目を通しておくといいかも。

HTML, CSSタグの書き方, ホームページの作り方【初心者・入門編】

という事で、まずはHTMLタグの準備から。

吹き出しアイコンの作り方：HTMLの準備

<!-- HTML部分 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <div class="balloon-left">
            <div class="balloon-icon">
                <img src="image/panda.png" alt="panda" class="bounce">
                <div class="balloon-name">パンダ</div>
            </div>
            
            <div class="balloon-comment-left"><p>テキストテキストテキスト</p></div>
        </div>

        <div class="balloon-right">
            <div class="balloon-comment-right"><p>テキストテキストテキスト</p></div>

            <div class="balloon-icon">
                <img src="image/buta.png" alt="buta" class="bounce">
                <div class="balloon-name">ぶた</div>
            </div>
        </div>

    </body>

</html>

吹き出しアイコンの作り方：CSSの準備

/* CSS部分 */

* { box-sizing: border-box; }

body {
	font-family: 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
	margin: 0px;
	color: #333333;
}

.balloon-left {
	display: flex;
	width: 100%;
	padding: 5px 10px;
}

.balloon-right {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 5px 10px;
}

.balloon-left p, .balloon-right p {
	margin: 0;
	letter-spacing: 2px;
}

.balloon-icon {
	display: flex;
	flex-direction: column;
	margin: 0px 15px;
	text-align: center;
}

.balloon-icon img {
	height: 100px;
	margin: 0 auto;
	border-radius: 50px;
	object-fit: contain;
}

.balloon-name {
	font-size: 13px;
	padding: 5px 0px 0px 0px;
}

.balloon-comment-left {
	position: relative;
	padding: 7px 15px 7px 15px;
	margin: auto 0;
	border: 2px solid #fdf;
	border-radius: 20px;
	background-color: #fdf
}


.balloon-comment-left:before {
	position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #fdf;
    top: 20%;
    left: -20px
}

.balloon-comment-left:after {
	position: absolute;
    content: '';
    border: 10px solid transparent;
    border-right: 10px solid #fdf;
    top: 20%;
    left: -17px;
}


.balloon-comment-right {
	position: relative;
	padding: 7px 15px 7px 15px;
	margin: auto 0;
	border: 2px solid #cff;
	border-radius: 20px;
	background-color: #cff;
}


.balloon-comment-right:before {
	position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #cff;
    top: 20%;
    right: -20px
}

.balloon-comment-right:after {
	position: absolute;
    content: '';
    border: 10px solid transparent;
    border-left: 10px solid #cff;
    top: 20%;
    right: -17px;
}

CSSをもう少しシンプルに書きたい場合は、

/* CSS部分 */

* { box-sizing: border-box; }

body {
	font-family: 'Meiryo', 'Hiragino Kaku Gothic Pro', sans-serif;
	margin: 0px;
	color: #333333;
}

.balloon-left {
	display: flex;
	width: 100%;
	padding: 5px 10px;
}

.balloon-right {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding: 5px 10px;
}

.balloon-left p, .balloon-right p {
	margin: 0;
	letter-spacing: 2px;
}

.balloon-icon {
	display: flex;
	flex-direction: column;
	margin: 0px 15px;
	text-align: center;
}

.balloon-icon img {
	height: 100px;
	margin: 0 auto;
	border-radius: 50px;
	object-fit: contain;
}

.balloon-name {
	font-size: 13px;
	padding: 5px 0px 0px 0px;
}

.balloon-comment-left {
	position: relative;
	padding: 7px 15px 7px 15px;
	margin: auto 0;
	border: 2px solid #fdf;
	border-radius: 20px 20px 20px 0px;
	background-color: #fdf
}

.balloon-comment-right {
	position: relative;
	padding: 7px 15px 7px 15px;
	margin: auto 0;
	border: 2px solid #cff;
	border-radius: 20px 20px 0px 20px;
	background-color: #cff;
}

これでもOK。

そうすると「吹き出しアイコン」の形はこんな感じ。