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

2019.04.22 / 更新日：2019.06.10

困ってる人

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

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

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

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

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

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

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

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

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

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

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

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

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

困ってる人

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

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

オペレーター

【プラグインなし】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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

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

</div>

<div class="balloon-comment-right"><p>テキストテキストテキスト</p></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;
}

100

101

102

103

/* 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;
}

/* 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。

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

と、ここまで書けたら、あとは毎回、上のHTMLタグを文章内に貼り付けるだけでOK。

ワードプレスの場合だと「テンプレート登録」の機能があったりもするので、そこに今回のHTMLを保存しておいてもOK。

吹き出しの色や、画像を変更したい場合は「CSS」の編集が必要、ただ一度編集してしまえば、あとは自由に使い放題。

僕の場合は、作業の効率化のために「functions.php」に直接、QTags.addButtonというものを書き込んで、

吹き出しボタン以外にも、こんな感じで[h2][h3][h4][改行]ボタンなどを作って使っています。

そうする事によって、次回以降はこのボタンを押すだけで吹き出しアイコンが自動的に作られ、ワードプレスでブログを書く際の手間を大幅に減らす事が出来ます。

クイックタグの「functions.php」への登録方法は、他にも沢山ありますので、興味があればぜひ調べてみて下さいね。

プログラミングが難しい, 挫折した, 勉強法が分からないという人におすすめのプログラミングスクール