・WordPressで吹き出しを簡単に使いたい
・でもプラグインは使いたくない
・プログラミングの知識はほとんどない
この記事ではこういった疑問にお答えします。
WordPressに限らず、最近多く見かけるようになった“吹き出し”や“会話形式”のデザイン。
あなたも吹き出しや会話風のデザインを使って記事をオシャレにしてみませんか？
吹き出しを入れることができるプラグインもありますが、使用しているテーマによってはズレが発生することも多々。。。
そもそもプラグインを入れ過ぎるとサイトスピードが落ちてしまうので、もうこれ以上入れたくない。。。
こんな方もいるのではないでしょうか。
ご安心ください。
このページでは、プログラミングの知識が無くても、プラグイン無しで、しかもコピペで簡単に使える吹き出しのテンプレートをご紹介していきます。
また、色や形のアレンジ方法もご紹介しますので、あなたのオリジナルの吹き出しを作ることができるようになります！
このページでご紹介する吹き出しは、あなたのサイトで自由に使用していただいて大丈夫です。
それでさっそく見ていきましょう。
1. このページの使い方
このページではこのような流れで吹き出しデザインを紹介していきます。
- まず吹き出しのテンプレートを紹介します
好きなデザインを選んでHTMLとCSSをメモ帳にコピーして保存してください - 吹き出しのアレンジ方法を伝授するのでオリジナルの吹き出しを作ってみてください
- WordPressでのHTMLとCSSの使い方を解説します
HTMLとCSSの知識がゼロでも大丈夫！
それでは早速テンプレートを見ていきましょう。
2. WordPress吹き出しテンプレート
ここからは、吹き出しテンプレートをご紹介していきます。
まず、必要になるものは吹き出し横のアイコンに使う画像です。
このページで紹介する吹き出しは、350px × 350px の画像を使っています。
イラストはPNG形式、写真はJPEG形式を推奨します。
それではテンプレートをご紹介していきます。
WordPressでのHTMLとCSSの使い方をすでにご存じの方は、コードをコピーしてバンバンご利用ください。
HTMLとCSSの使い方をまだご存じではない方も、下の方で分かり易く解説していますのでご安心ください！
✅ アイコンや画像の作成はCanvaがおすすめ♪
①シンプル吹き出し
この吹き出しデザインのポイントは次の点です。
・シンプルな見た目でどのサイトにもフィットしやすい
・アイコン画像と吹き出しのボックスに影を付けています
・枠や吹き出し背景の色を変えることができます
・画像と吹き出しボックスの枠の形を変更できます
左側にアイコン画像がある吹き出しです
テキストはここに入力していきます
br タグを使って改行することができます
右側にアイコン画像がある吹き出しです
テキストはここに入力していきます
br タグを使って改行することができます
【左アイコン吹き出しのHTML】
<div class="f-container">
<div class="f-icon">
<img src="ここに画像のURLを貼り付け" alt="icon image" title="icon-image" border="0"></div>
<div class="f-text-box">
<!-- <p>と</p>の間にテキストを入力。改行は<br>を使う -->
<p>
ここにテキストを入力！<br>
ここにテキストを入力！
</p>
</div>
</div>【左アイコン吹き出しのCSS】
.f-container {
width: 100%;
margin-bottom: 30px;
display: flex;
}
.f-icon img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon {
width: 25%;
padding : 0 20px 0 0;
text-align: center;
margin-top: -5px;
}
.f-text-box {
width: 70%;
padding: 10px;
border: 2px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #fff;
}
.f-text-box p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box::before {
content: '';
position: absolute;
left: -31px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid #000000;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
@media only screen and (max-width: 769px) {
.f-text-box p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box {
width: 73%;
}
.f-icon {
width: 27%;
}
}
【右アイコン吹き出しのHTML】
<div class="f-container-r">
<div class="f-text-box-r">
<!-- <p>と</p>の間にテキストを入力。改行は<br>を使う -->
<p>
ここにテキストを入力！<br>
ここにテキストを入力。
</p>
</div>
<div class="f-icon-r">
<img src="ここに画像のURLを貼り付け" alt="icon image" title="icon-image" border="0"></div>
</div>【右アイコン吹き出しのCSS】
.f-container-r {
width: 100%;
margin-bottom: 30px;
display: flex;
}
.f-icon-r img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon-r {
width: 25%;
padding : 0 0 0 20px;
text-align: center;
margin-top: -5px;
}
.f-text-box-r {
width: 70%;
padding: 10px;
border: 2px solid #000000;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #fff;
}
.f-text-box-r p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box-r::before {
content: '';
position: absolute;
right: -31px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #000000;
}
@media only screen and (max-width: 769px) {
.f-text-box-r p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box-r {
width: 73%;
}
.f-icon-r {
width: 27%;
}
}
①シンプル吹き出しのアレンジ
これから色の変更方法もご紹介していきますが、色のコードはこちらを参考にしてみてください → 原色大辞典（外部サイト）
＜CSS編集：画像枠の色を変更したい場合＞
左アイコン = .f-icon img の中の、border ⇁ #0000000 を変更する
右アイコン = .f-icon-r img の中の、border ⇁ #000000 を変更する
＜CSS編集：吹き出しの枠の色を変更したい場合＞
左アイコン = .f-text-box の中の、border → #000000 を変更する
右アイコン = .f-text-box-r の中の、border → #000000 を変更する
＜CSS編集：吹き出しの突起（三角部分）の色を変更＞
左アイコン = .f-text-box::before の中の、border-right → #000000 を変更する
右アイコン = .f-text-box-r::before の中の、border-left → #000000 を変更する
＜CSS編集：吹き出しの背景色を変更する＞
左アイコン = .f-text-box の中の、background → #fff を変更する
右アイコン = .f-text-box-r の中の、background → #fff を変更する
②ビビッド吹き出し
この吹き出しのポイントは次の点です。
・枠線を取り除いたポップな見た目
・テキストボックスが立体に見えるようにデザイン
・テキストボックスの色を変えることができます
左側にアイコン画像がある吹き出しです
テキストはここに入力していきます
br タグを使って改行することができます
右側にアイコン画像がある吹き出しです
テキストはここに入力していきます
br タグを使って改行することができます
【左アイコン吹き出しのHTML】
<div class="f-container">
<div class="f-icon">
<img src="ここに画像のURLを貼り付け" alt="icon image" title="icon-image" border="0"></div>
<div class="f-text-box">
<!-- <p>と</p>の間にテキストを入力。改行は<br>を使う -->
<p>
ここにテキストを入力！<br>
ここにテキストを入力。
</p>
</div>
</div>【左アイコン吹き出しのCSS】
.f-container {
width: 100%;
margin-bottom: 30px;
display: flex;
}
.f-icon img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #ffffff;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon {
width: 25%;
padding : 0 20px 0 0;
text-align: center;
margin-top: -5px;
}
.f-text-box {
width: 70%;
padding: 10px;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #fff566;
border-bottom: 4px solid #b8af3e;
border-radius: 20px;
}
.f-text-box p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box::before {
content: '';
position: absolute;
left: -30px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid #fff566;
border-bottom: 15px solid transparent;
border-left: 15px solid transparent;
}
@media only screen and (max-width: 769px) {
.f-text-box p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box {
width: 73%;
}
.f-icon {
width: 27%;
}
}
【右アイコン吹き出しのHTML】
<div class="f-container-r">
<div class="f-text-box-r">
<!-- <p>と</p>の間にテキストを入力。改行は<br>を使う -->
<p>
ここにテキストを入力！<br>
ここにテキストを入力。
</p>
</div>
<div class="f-icon-r">
<img src="ここに画像のURLを貼り付け" alt="icon image" title="icon-image" border="0"></div>
</div>【右アイコン吹き出しのCSS】
.f-container-r {
width: 100%;
margin-bottom: 30px;
display: flex;
}
.f-icon-r img {
max-height: 120px;
margin: 0 auto;
border-radius: 50%;
border: 3px solid #ffffff;
box-shadow: 3px 3px 3px #C6C6C6;
}
.f-icon-r {
width: 25%;
padding : 0 0 0 20px;
text-align: center;
margin-top: -5px;
}
.f-text-box-r {
width: 70%;
padding: 10px;
box-shadow: 3px 3px 3px #C6C6C6;
position: relative;
background: #ffc0fa;
border-bottom: 4px solid #b672b0;
border-radius: 20px;
}
.f-text-box-r p {
margin: 0;
padding: 0;
line-height: 28px;
}
.f-text-box-r::before {
content: '';
position: absolute;
right: -30px;
top: 20%;
border-top: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #ffc0fa;
}
@media only screen and (max-width: 769px) {
.f-text-box-r p {
line-height: 23px;
letter-spacing: 1px;
font-size: 13px;
}
.f-text-box-r {
width: 73%;
}
.f-icon-r {
width: 27%;
}
}
②ビビッド吹き出しのアレンジ
先ほどご紹介した色コードの参考サイトはこちら ⇁ 原色大辞典（外部サイト）
＜CSS編集：吹き出しの背景色の変更方法＞
左アイコン = .f-text-box の中の、background → #fff を変更する
右アイコン = .f-text-box-r の中の、background → #fff を変更する
＜CSS編集：吹き出しの突起（三角部分）の色を変更＞
左アイコン = .f-text-box::before の中の、border-right → #000000 を変更する
右アイコン = .f-text-box-r::before の中の、border-left → #000000 を変更する
＜CSS編集：吹き出し下部の立体に見える縁 (ふち) の色＞
左アイコン = .f-text-box の中の、border-bottom → #b8af3e を変更する
右アイコン = .f-text-box-r の中の、background → #b672b0 を変更する
3. WordPressでHTMLとCSSを使う方法
このページでご紹介した吹き出しをWordPressで使うには、HTMLとCSSを利用する必要があります。
プラグインで吹き出しを入れる方法もありますが、プラグインを入れるとどうしてもサイトスピードが遅くなってしまうため、個人的にはHTMLとCSSを使って記述する方法をお勧めします。
まだ使ったことがないという方向けに、できる限り分かり易く解説していきます。
・HTMLの使い方
HTMLを記述する方法はとても簡単です。
WordPressの投稿編集画面では、HTML記述のためのオプションがデフォルトで備わっています。
ちなみに、このサイトで採用しているエディターはGutenbergです。
ブロックを選択する際に、『カスタムHTML』を選択し、コードを記述するだけです。
この画像のようにブロック候補に出てこない場合は、「ブロックの検索」から検索、または、下の「すべて表示」をクリックすると選択できます。
あとはHTMLコードを記述するだけです。
記述後に「プレビュー」を押すと確認できますが、コードの内容によってはうまく表示されないこともあります。
その場合は、投稿編集画面の上部にある「プレビュー」ボタンを使うと正常に確認することができます。
では次にCSSコードの記述方法を見ていきましょう。
・CSS記述方法 – その①
CSSは、HTMLで作成した文書や骨組みに、デザインを追加するための情報です。
CSSを記述する方法として、1番推奨されるのは、『子テーマ』を作成してスタイルシートと呼ばれる、CSSを記述するためのファイルに追記する方法です。
これはWordPressでブログを運営している場合は、絶対にしておいた方が良い作業です。
こちらの記事で手順を解説していますので、まだ設定していない場合は参考にしてみてください。
WordPress 子テーマ設定｜初心者のための子テーマ設定3ステップ
早ければ10分で終わる簡単な作業です。
子テーマの設定が完了したら、「style.css」というファイルの中に、このページで紹介しているCSSをそのままコピペし、保存すれば完了です。
・CSS記述方法 – その②
できる限り『子テーマ』を使ったCSSの追記が良いですが、なんらかの理由で不可能な場合、別の方法もあります。
使用しているテーマによっては、CSSコードを追加するための機能がデフォルトで付いています。
このサイトのテーマ、アルバトロスの場合、「外観 > カスタマイズ > 追加CSS」から追記することができます。
あとはこのページで紹介してる吹き出しのCSSをまるっとコピペして保存するだけです。
4. 吹き出しが崩れる場合
最後に、「吹き出しを入れてみたけどデザイン微妙に崩れてしまう」といった場合の調整方法をご紹介します。
・吹き出しの調整方法
＜吹き出しのボックスと突起（三角）の間が空いてしまう場合＞
左アイコン = .f-text-box::before の中の、left のピクセル数を調整
右アイコン = .f-text-box-r::before の中の、left のピクセル数を調整
ボックスにぴったりくっつくように、数字を大きくしたり、小さくしたり試してみてください。
＜アイコンと吹き出しボックスのバランスが悪い場合＞
アイコン画像と吹き出しボックスの割合は、25%対70%になるように作成しています。
この幅の割合を調整することで、バランスを変更することができます。
左アイコンの場合：
アイコンの割合 = .f-icon の中の、width の割合 (%) を変更
吹き出しボックスの割合 = .f-text-box の中の、width の割合 (%) を変更
右アイコンの場合：
アイコンの割合 = .f-icon-r の中の、width の割合 (%) を変更
吹き出しボックスの割合 = .f-text-box-r の中の、width の割合 (%) を変更
・吹き出しを使う際の注意点
このページで紹介した2種類の吹き出しを1つのサイトで両方同時に使用すると、上手くデザインが反映されない場合があります。
どちらか1種類を使用することをお勧めします。
左右両方の吹き出しは問題なく同時に使うことができます。
5. まとめ
いかがでしょうか？
吹き出しは、ユーザーの目を引くだけではなく、ユーザー目線の発言を吹き出しを使って入れることで、より興味を引くことができます。
また、難しい解説を入れる際に、会話形式で解説することで、伝えやすくすることもできます。
ぜひ、このページで吹き出しの使い方をマスターして、あなたのサイトでも利用してみてください！
✅このページで使用している画像は、Canvaを利用して作成したものです。
コメントを残す