こんにちは、ヨロと申します。
今回はワードプレスでブログを書いている人向けの記事で、
「CSS」でプラグインを使わずに「吹き出しアイコン」の機能を搭載する方法をご紹介。
今回作るのは、こちらのブログでも使ってるこんな感じの「ふきだし」を作る機能。
プラグインを使って吹き出しの機能を使うのもいいのですが、プラグインを入れるとページの表示が遅くなったりと、何かしらと問題が出る事も多く、そうなるとSEO的にもあまりよくない。
という事で今回は、プラグインを使わない方法。
これらの機能は、後からいくらでもキャラクターを追加したりする事も可能で、実装もコピペで簡単なはず。
「CSS」がある程度分かる人は、吹き出しアイコンのデザインもある程度自由に変えれますね。
もし、面倒な事は嫌いだという人にはやっぱりプラグインを使うのがおすすめ。
有名どころのプラグインだと「Speech Bubble」なんかがありますね。
僕も、昔は使ってました。
もし興味があれば、試しにダウンロードして使ってみるといいかも。
【プラグインなし】CSSで吹き出しアイコンを作る方法
という事で、今回まずやる事というのは、
吹き出しアイコンのデザインが大体出来たら、次に今度はこれらを呼び出す。
呼び出す方法としては、
もし「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.webp" 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.webp" 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をもう少しシンプルに書きたい場合は、
* { 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」への登録方法は、他にも沢山ありますので、興味があればぜひ調べてみて下さいね。
出来ればプラグインは使いたくないんだよなぁ…