公開日 2020/11/4
更新日 2020/12/20

超初心者がネットで検索してはてなブログで
会話風の吹き出し【HTML CSS】にチャレンジしてみます

登場人物

猫さん	ひまわりさん

【無料】はてなブログ【HTML CSS】会話風吹き出しの作り方

【無料】はてなブログ【HTML CSS】会話風吹き出しの作り方

こんな感じの会話風デザイン

一個聞いた事があるのは
「荷物の重さは心の重さ」

ぷぷっ!!

めっちゃ深い話みたいに
なっちゃうけど〜

いやちょ
ちょいダサだけどねー

HTML

下記をブログにコピペします
（FC2ブログ、livedoor Blog、Bloggerも【HTML CSS】編集できます）

Copy and Paste

<div class="bln hidari">
<div class="purplesays"><p>一個聞いた事があるのは<br>「荷物の重さは心の重さ」</p>
</div>
</div>

<div class="bln migi fxd--rr">
<div class="pinksays"><p>ぷぷっ!!</p>
</div>
</div>

<div class="bln hidari">
<div class="purplesays"><p>めっちゃ深い話みたいに<br>なっちゃうけど〜</p>
</div>
</div>

<div class="bln migi fxd--rr">
<div class="pinksays"><p>いやちょ<br>ちょいダサだけどねー</p>
</div>
</div>

CSS クラス名（わかりやすいクラス名を自分で作る）

bln hidari
purplesays
bln migi fxd--rr
pinksays

CSS

無料はてなブログ CSS 設定方法

1. デザイン → カスタマイズ → 記事

2. 下にスクロールして → 記事上のところに下記を貼り付けます

*2020/12/20 2ヶ所右を左に修正しました

Copy and Paste

/*吹き出し(バルーン)のアウトライン*/
.bln {
width: 100%;
margin: 10px auto;
padding: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
overflow: hidden;
}
@media (max-width:480px) {
.bln {
padding: 0;
}
}

/* 左右アイコンのイメージサイズと配置 */
.bln:before {
content: "";
width: 90px;
height: 90px;
background: no-repeat left center / contain;
/* display: inline-block; */
}
@media (max-width:480px) {
.bln:before {
width: 80px;
height: 80px;
}
}

/* 左アイコンのイメージ配置画像100~200pxくらい */
.bln.hidari:before {
background-image: url("https://〜") /*画像ファイル場所を記入*/
}

/* 右アイコンのイメージ配置画像*/
.bln.migi:before {
background-image: url("https://〜") /*画像ファイル場所を記入*/
}

/* 吹き出し中の文章アウトライン */
.purplesays {
position: relative;
margin: 1rem;
max-width: calc(100% - 170px);
padding: .6rem 1.2rem;
border: solid 2px purple;
border-radius: 1.2rem;
}
@media (max-width:480px) {
.purplesays {
margin: 0;
max-width: calc(100% - 125px);
}
}

/* 吹き出し口尖ってるところのあしらい */
.purplesays::before {
content: "";
position: absolute;
top: 50%;
left: -16px;
margin-top: -8px;
border: 8px solid transparent;
border-right: 10px solid #fff;
z-index: 2;
}
.purplesays::after {
content: "";
position: absolute;
top: 50%;
left: -21px;
margin-top: -9px;
border: 9px solid transparent;
border-right: 12px solid purple;
z-index: 1;
}

/* 左のアイコン配置指定吹き出し反転など */
.bln.fxd--rr .purplesays:before,
.bln.fxd--rr .purplesays:after {
transform: scale(-1, 1);

}

/* 左のアイコンから吹き出し反転 */
.bln.fxd--rr .purplesays:before {
left: inherit;
right: -16px;
}
.bln.fxd--rr .purplesays:after {
left: inherit;
right: -21px;
}

/*吹き出内の調整用*/
.purplesays p {
margin: 0;
padding: 0;
}

/* 吹き出し中の文章アウトライン */
.pinksays {
position: relative;
margin: 1rem;
max-width: calc(100% - 170px);
padding: .6rem 1.2rem;
border: solid 2px pink;
border-radius: 1.2rem;
}
@media (max-width:480px) {
.pinksays {
margin: 0;
max-width: calc(100% - 125px);
}
}

/* 吹き出し口尖ってるところのあしらい */
.pinksays::before {
content: "";
position: absolute;
top: 50%;
left: -16px;
margin-top: -8px;
border: 8px solid transparent;
border-right: 10px solid #fff;
z-index: 2;
}
.pinksays::after {
content: "";
position: absolute;
top: 50%;
left: -21px;
margin-top: -9px;
border: 9px solid transparent;
border-right: 12px solid pink;
z-index: 1;
}

/* 右のアイコン配置指定吹き出し反転など */
.bln.fxd--rr .pinksays:before,
.bln.fxd--rr .pinksays:after {
transform: scale(-1, 1);

}

/* 右のアイコンから吹き出し反転 */
.bln.fxd--rr .pinksays:before {
left: inherit;
right: -16px;
}
.bln.fxd--rr .pinksays:after {
left: inherit;
right: -21px;
}

/*吹き出内の調整用*/
.pinksays p {
margin: 0;
padding: 0;
}

/* 右の人にする時につける flex要素 */
.fxd--rr {
flex-direction: row-reverse;
}

</style>

3. 変更を保存する

point

記事上に　"頭に <style type="text/css">　おしりに </style>　が入る"
画像は 100ピクセルで作りました
左右の吹き出しの枠の色を紫とピンクにしました

あと必ず
デザイン → カスタマイズ → デザインCSSにもコピぺして下さい!!
頭に <style type="text/css">　おしりに </style>は入れません
これをやらないとトップページに cssが反映されません!!

あとで気づきました、、、

出てきた CSS プロパティなど

margin	領域間のスペーススタイルシートリファレンス > margin
padding	領域内のスペーススタイルシートリファレンス > padding
box-sizing	ボックスサイズの算出方法を指定 CSS3 > box-sizing content-box パディングとボーダーを幅と高さに含めない（初期値） border-box パディングとボーダーを幅と高さに含める inherit 親要素の値を継承する
display	要素の表示形式（ブロック・インライン・フレックス等）を指定スタイルシートリファレンス > display flex ブロックレベルのフレックスコンテナボックスを生成する inline-flex インラインレベルのフレックスコンテナボックスを生成する
align-items	コンテナ内のアイテムの交差軸方向（初期値では縦方向）のデフォルト揃え位置を指定 CSS > align-items center センターに配置 start 始端に配置 end 終端に配置 flex-start フレックスコンテナ内の始端に配置 flex-end フレックスコンテナ内の終端に配置
overflow	はみ出た要素の表示方法を指定 CSS > overflow visible 内容がボックスに収まらない場合、ボックスからはみ出して表示される（初期値） hidden 内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない scroll 内容がボックスに収まらない場合、収まらない部分はボックスからはみ出さない。内容が収まらない場合には、スクロールバーなどが表示される auto ボックスに収まらない内容をどう表示するかは、ユーザーエージェントに依存する。内容が収まらない場合には、スクロールバーなどが表示される no-display 内容がボックスに収まらない場合、display：none; が指定されたかのようにボックス全体が削除される no-content 内容がボックスに収まらない場合、visibility：hidden; が指定されたかのようにボックス全体が非表示となる
@media	スタイルシートを適用する条件を指定 CSSリファレンス> @media CSS @ mediaルール /* 幅が 768px以上 1200px以下であれば / @media (min-width:768px) and (max-width:1200px) { ... } / 幅が 480px 以下であれば */ @media screen and (max-width: 480px) { }
position	ボックスの配置方法（基準位置）を指定スタイルシートリファレンス > position CSSのposition: absoluteとrelativeとは static 特に配置方法を指定しません。この値のときには、top、bottom、left、rightは適用されません。これが初期値です。 relative 相対位置への配置となります。positionプロパティでstaticを指定した場合に表示される位置が基準位置となります。 absolute 絶対位置への配置となります。親ボックスにpositionプロパティのstatic以外の値が指定されている場合には、親ボックスの左上が基準位置となります。親ボックスにpositionプロパティのstatic以外の値が指定されていない場合には、ウィンドウ全体の左上が基準位置となります。 fixed 絶対位置への配置となるのはabsoluteと同じですが、スクロールしても位置が固定されたままとなります。
calc	CSSのcalc()を使って幅や高さを計算式で指定ウェブ制作小ネタTIPS > CSSのcalc()を使って幅や高さを計算式で指定する ■calc()内の計算式に使用できる記号 + 加算 - 減算 * 乗算 / 除算横幅100%マイナス170px width: calc(100% - 170px); +と-の前後には半角スペースが必須
rem	ルートのフォントサイズを1として考える単位 font-sizeのremとは？正しい使い方と間違った使い方基本的にブラウザのデフォルトのフォントサイズは16px。html要素にfont-size: 62.5%を指定することで、pxにすると10pxになります。そうするとことで、remの指定の仕方が簡単になります。 26pxとしたい場合、remの指定は、2.6remになりわかりやすい
border-radius	角丸をまとめて指定 CSS3 > border-radius
border	ボーダーのスタイル・太さ・色を指定スタイルシートリファレンス > border ■ボーダースタイルの値 none ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合は他の値が優先されます。これが初期値です。 hidden ボーダーは表示されず、太さも0になります。表のセルなどのボーダーが重なり合う場合はhiddenの値が優先されます。 solid 1本線で表示されます。 double 2本線で表示されます。 groove 立体的に窪んだ線で表示されます。 ridge 立体的に隆起した線で表示されます。 inset 上と左のボーダーが暗く、下と右のボーダーが明るく表示され、ボーダーで囲まれた領域全体が立体的に窪んだように表示されます。上下左右の一部だけに指定しても立体感は出ません。 outset 上と左のボーダーが明るく、下と右のボーダーが暗く表示され、ボーダーで囲まれた領域全体が立体的に隆起したように表示されます。上下左右の一部だけに指定しても立体感は出ません。 dashed 破線で表示されます。 dotted 点線で表示されます。 ■ボーダー太さの値数値で指定数値にpxやemやexなどの単位をつけて指定します。キーワードで指定 thin（細い）、medium（普通）、thick（太い）のうち、いずれかを指定します。キーワードで指定する場合、実際に表示される太さはブラウザにより異なります。 ■ボーダー色の値色 #000000などの記述やカラーネームで色指定をします。 transparent ボーダーの色を透明にします。
z-index	重なりの順序を指定スタイルシートリファレンス > z-index 整数値で指定重なりの順序を整数で指定します。0を基準として、値が大きいものほど上になります。 auto 親要素と同じ階層になります。これが初期値です。
before	要素の直前に内容を挿入スタイルシートリファレンス > :before擬似要素
after	要素の直後に内容を挿入する際に使用トップページ > スタイルシートリファレンス > :after擬似要素
transform:scale()	要素を拡大・縮小表示する CSS3 > transform > transform:scale()
inherit	親要素から子要素へのスタイルの継承 CSSの基本 > スタイルの継承
flex-direction	フレックスコンテナ内のアイテムの配置方向を指定する際に使用 CSS >flex-direction row フレックスコンテナの主軸は左から右になります。正確に言うと現在のインライン軸の方向と同じになります。（初期値） row-reverse フレックスコンテナの主軸方向が row の逆になります column フレックスコンテナの主軸は上から下になります。正確に言うと現在のブロック軸の方向と同じになります。 column-reverse フレックスコンテナの主軸方向が column の逆になります。