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

ワードプレス吹き出し
この記事のURLとタイトルをコピーする

ワードプレスで使える、シンプルな吹き出し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;
}

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

Wordpress balloon image

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

そうだ...会話するのに、相手役がいる...

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

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

まとめ

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

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

コピペしていただいてもOKですが、自己責任で!

ワードプレスで、吹き出しを実装する方法は、ほかにもあります。

  • プラグインで実装
  • テンプレート標準装備
  • HTMLを自作

ワードプレスのテンプレートで吹き出しを実装すると、別のテンプレートを使いたくなったときにショートコードを書き直す必要があります。そのほかの実装方法を知っているだけで、リスクの分散にもなりますよ。

難易度ごとに紹介していますので、興味のある方はこちらの記事をどうぞ↓

関連する記事


この記事のURLとタイトルをコピーする

サウンドオルビス

2,557,469 views

「音楽」と「テクノロジー」をキーワードに、あなたの「やってみたい!」悩みを解決するために、情報発信しています。

プロフィール
記事へのお問い合わせ