コピペOK!ワードプレスで使える、自作の吹き出しHTMLを解説

WordPressプラグイン

ワードプレスで使える、シンプルな吹き出しHTMLを自作してみました。PC・タブレット・スマホに、メディアクエリ(@media)を書かずに対応できるか実験です。

Progate のプログラミング学習で得た知識を、アウトプットしていきます。HTMLやCSS初心者の目線で、吹き出しHTMLの悩みを解決させてください。ご利用は自己責任になりますが、コピペしてもOKですよ。

というわけで今回は、ワードプレスで使える、シンプルな吹き出しHTMLを解説していきます。

kaoleft
ワードプレスで吹き出し用のHTMLを、書いてみました!短め.ver
kaoleft
ワードプレスで吹き出し用のHTMLを、書いてみました!今回は、こんな感じの吹き出しをコピペで、あなたのブログにも導入できるようになります。HTMLと、CSSを丁寧に、解説していきますので、よろしくお願いします。

たくさん書いてもスマホで、縦に長くなるだけ!いかがでしょうか?

ワードプレスで使える!吹き出しHTMLを解説

吹き出しHTMLを、ワードプレスで使うためには、HTMLとCSSを書く必要があります。

  • HTMLは、あなたのブログ記事本文。吹き出しを入れたい場所に、コピペしてください。
  • CSSは、あなたのブログのスタイルシートに記述してください。

それでは、HTMLとCSSについて、ひとつずつ解説していきます。

HTML を解説

Div kousei fukidashi

全体的なHTML構成は、こんな感じです。まず全体DIV(class=”fukidashi”)で、吹き出し要素をすべて囲みました。その中にclass名をつけた、3つのDIV要素を作ります。

  1. 顔DIV;class=”kaol”
  2. 会話DIV;class=”fukidashir”
  3. float解除DIV;class=”clear”

顔DIVの中に、imgタグでアバター画像を挿入。吹き出しDIVに、pタグで会話文を挿入。
すると、下記のようなHTMLになります↓

<div class="fukidashi">
    <div class="kaol"><img src="アバター画像URL" alt="kaoleft" title="kaoleft" border="0" /></div>
    <div class="fukidashir"><p>会話文は、こちらに。</p></div>
    <div class="clear"></div>
</div>

シンプルなHTML構成ですね。これで、HTMLの解説はおわりです。

CSS を解説

全体的なCSS構成は、こんな感じになりました↓

.fukidashi {
    width: 100%;
    margin-bottom: 30px;
}
.kaol {
    float: left;
    width: 35%;
    padding : 0 20px;
    text-align: center;
}
.kaol img {
    max-height: 150px;
    margin: 0 auto;
    border-radius: 50%;
}
.fukidashir {
    float: left;
    width: 65%;
    padding: 10px;
    border: 3px solid #ddd;
    position: relative;
}
.fukidashir p {
    margin: 0;
    padding: 0;
}
.fukidashir::before{
    content: '';
    position: absolute;
    left: -30px;
    top: 20%;
    border-top: 15px solid transparent;
    border-right: 15px solid #ddd;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
}
.clear {
    clear: left;
}

.fukidashi

width: 100%; は、全体DIVを画面いっぱいに広げるため。
margin-bottom: 30px;は、吹き出しHTMLのあとに余白をつくるため。

.kao

float: left;で、吹き出しDIVと横並びするための設定。
width: 35%;は、アバター画像が35%まで左側を使ってOKってこと。
padding : 0 20px;は、上下は余白なし。左右に20pxの余白で、吹き出しとぶつからないため。
text-align: center;は、アバター画像が、常に左側35%の中央に位置させるため。

.kao img

max-height: 150px;は、PC・タブレット・スマホで最大150pxまでの大きさにすることで、見た目の変化を少なくするため。
margin: 0 auto;は、.kaoで指定したtext-align: center;を、動作させるため。
border-radius: 50%;は、もともとの画像が四角い場合に丸くするおまじないです。

.fukidashir

float: left;は、顔DIVと横並びさせるため。
width: 65%;は、吹き出しが65%まで右側を使ってOKってこと
padding: 10px;は、吹き出し線の中に10pxの余白をつくるため。これ見た目のため。
border: 3px solid #ddd;は、吹き出しのボーダーデザインの指定。
position: relative;は、吹き出しのとびでた部分を、.fukidashirのDIVを基準に設定するため。

.fukidashir p

margin: 0;は、とりあえず。
padding: 0;は、なんとなく。

.fukidashir::before

content: ”;は、吹き出しのとびでた部分を装飾するため。
position: absolute;は、position: relative;で指定したDIVを基準に動かすため。
left: -30px;は、デザインのため。
top: 20%;も、デザインのため。
border-top: 15px solid transparent;border-right: 15px solid #ddd;border-bottom: 15px solid transparent;border-left: 15px solid transparent;は、吹き出しのとびでた部分の色をぬるため。

まだProgateで、::before要素を習っていなかったので、こちらのサイトを参考にさせていただきました↓

.clear

clear: left;は、float解除するためです。空白のDIVですが、これを入れておかないと、デザインがぐちゃぐちゃになるので、おまじないや、入れておくものと思っておけばいいと思います。

これで、CSSの解説はおわりです。

スポンサーリンク


コピペ用コード

HTML

<div class="fukidashi">
    <div class="kaol"><img src="アバター画像URL" alt="kaoleft" title="kaoleft" border="0" /></div>
    <div class="fukidashir"><p>会話文は、こちらに。</p></div>
    <div class="clear"></div>
</div>

CSS

.fukidashi {
    width: 100%;
    margin-bottom: 30px;
}
.kaol {
    float: left;
    width: 35%;
    padding : 0 20px;
    text-align: center;
}
.kaol img {
    max-height: 150px;
    margin: 0 auto;
    border-radius: 50%;
}
.fukidashir {
    float: left;
    width: 65%;
    padding: 10px;
    border: 3px solid #ddd;
    position: relative;
}
.fukidashir p {
    margin: 0;
    padding: 0;
}
.fukidashir::before{
    content: '';
    position: absolute;
    left: -30px;
    top: 20%;
    border-top: 15px solid transparent;
    border-right: 15px solid #ddd;
    border-bottom: 15px solid transparent;
    border-left: 15px solid transparent;
}
.clear {
    clear: left;
}

吹き出しプラグインで、ブログに集中しよう!

Wp fukidashi plugin

あっ、プラグインを使おう!

って、ワードプレス用の吹き出しHTML、自分で作るとしみじみ思います。ありがたいことに、ワードプレスにはプラグインという機能があります。

  • 整ったデザイン
  • レスポンシブ対応
  • 音を鳴らせる
  • アニメーションができる
  • ショートコードで手軽に呼び出せる
  • アバター画像の変更が楽チン

などなど。インストールすれば、これらの機能が簡単に手に入るんです。時間の短縮です。ましてや無料で使える場合もあり、プラグイン開発者様には頭が上がりません。

ワードプレスで使える吹き出しプラグインを、実際に使ってみた記事を書きました。ワードプレス用の吹き出しHTMLを、つくるのが大変だと感じたなら、こちらの記事が役に立つと思いますよ↓

会話相手の画像を、用意する7つの方法

Wordpress balloon image

吹き出しという表現方法を、身につけることができましたね。そこで、気がつくはずです。

読者さん
読者さん
そうだ…会話するのに、相手役がいる…

わたしも、経験しました。友達の写真を使うわけにもいかず、フリー画像の素材を使うのはセーフなのか、イラストを用意するにしても、どこでお願いすればいいのか?

会話相手の画像を用意する方法を、7つ紹介しています。さらに、吹き出し画像に関する悩みを解決する内容も掲載しておきました。気になる方は下記のリンクからごらんください↓

“]

まとめ

ワードプレスの吹き出しHTMLを、解説してきました。いちばんシンプルなHTMLだと思います。プロはさらにデバイスごとにデザインしたり、よりおしゃれにする技術があるんですよね。わたしも、精進あるのみです。

ブログを書くことに集中するなら、「【まとめ】ワードプレスで使える!吹き出しプラグイン5選」を読んで、プラグインでさくっと吹き出しを導入してみてください。

コピペしていただいてもOKですが、自己責任で!もし、間違えていたり、コードがダメな場合は、コメント欄からご連絡ください。

それでは、人生にドラマを!サウンドオルビス(@soundorbis)でした。

記事へのお問い合わせ

サウンドオルビス

926,881 views

あなたの問題を解決するために、情報発信をしています。悩みからの解放宣言。「音楽」「テクノロジー」が得意分野です。

プロフィール
  1. この記事へのコメントはありません。