まずデフォルトの吹き出しはこうなっています。枠が細くて灰色です。

(※ キャプチャ画像です)

 

 

これを調整してこのようにしました。

調整した吹き出し
 入力補助の「会話」ではなく「吹き出し」のカスタマイズについての記事です。三角が下についた吹き出しだけを扱っています。

カスタマイズの背景

ここのところ、本サイト以外にサイトを作っていました。もちろんそこでもテーマはDiverを使っていたのですが、ここでは使ったことがなかった「吹き出し」を使う必要が出てきました。

ただ、吹き出しはデフォルトの状態では線の太さも色も固定でいじるメニューも見当たらない。少し使いにくかったので、本当はやりたくなかったのですがカスタマイズせざるを得ませんでした。

CSSをいじるときは、子テーマに書き加えることが多いと思いますが、今回は1ページだけに適用された方が都合が良かったので、カスタムCSSを使うことにしました。

子テーマをいじろうとすると警告が出たこともあって、少し怖いのでちょうどいいです。

カスタムCSSに10行書き加えて吹き出しを調整

投稿画面で補助入力から「吹き出し」を挿入し、以下をカスタムCSSに書き込みました。

.sc_balloon {
border: 2px solid #000;
}
.sc_balloon.bottom:before {
border-top-color: #ffffff;
bottom:-13px;
}
.sc_balloon.bottom:after {
border-top-color: #000;
}

これで本記事冒頭の枠が太い吹き出しになりました。

それでは1行ずつ解説していきます。

吹き出しパーツ1:長方形の部分

.sc_balloon {
border: 2px solid #000;
}
.sc_balloon { 吹き出しの長方形の部分を指定します。他のテーマはわかりませんが、Diverではここのクラス名がsc_baloonでした。先頭の「.」を忘れないようにしてください。
border: 2px solid #000; 線の太さ、線の種類、線の色を指定します。線の色を選ぶときはhttps://www.colordic.org/が大変参考になります。
} かっこを閉じます。

吹き出しパーツ2:吹き出しの三角部分1

吹き出しの下の三角部分です。

.sc_balloon.bottom:before {
border-top-color: #ffffff;
bottom:-13px;
}
.sc_balloon.bottom:before { パーツ1と同様に、カスタマイズする部分のクラス名を指定します。
border-top-color: #ffffff; ここではborderの上側の色だけを指定しました。指定した色はサイトの背景の色です。
bottom:-13px; ここで三角部分の線の太さを調整します。好みの数字に調整してください。
} 同上です。

吹き出しパーツ3:吹き出しの三角部分2

.sc_balloon.bottom:after {
border-top-color: #000;
}
.sc_balloon.bottom:after { 同上です。
border-top-color: #000; borderの上の色だけを指定しました。色は吹き出しの枠と同じ色です。
} 同上です。

さいごに

下に三角がついた吹き出しの枠の調整を行いました。横や上に三角がついた吹き出しもありますが、

  • あまり使っているサイトを見たことがない
  • 使う予定がない

という理由からここでは触れませんでした。

【2019年1月15日追記】

左に三角がついた吹き出しを使う機会があったので、枠の調整をやってみました。下のは上で開設した「下に三角がついた吹き出し」を調整するためのCSSです。

.sc_balloon {
border: 2px solid #000;
}
.sc_balloon.bottom:before {
border-top-color: #ffffff;
bottom:-13px;
}
.sc_balloon.bottom:after {
border-top-color: #000;
}

これを下のように変更すると「左に三角がついた吹き出し」の枠を調整することができます。

.sc_balloon {
border: 2px solid #000;
}
.sc_balloon.left:before {
border-right-color: #ffffff;
bottom:-13px;
}
.sc_balloon.left:after {
border-right-color: #000;
}

また、下のように両方書いておくこともできます。(ごちゃごちゃしてきたのでコメントを追加しました。)

/*吹き出しの四角部分の調整*/
.sc_balloon {
border: 2px solid #000;
}
/*吹き出しの下につく三角の調整*/
.sc_balloon.bottom:before {
border-top-color: #ffffff;
bottom:-13px;
}
.sc_balloon.bottom:after {
border-top-color: #000;
}
/*吹き出しの左につく三角の調整*/
.sc_balloon.left:before {
border-right-color: #ffffff;
bottom:-13px;
}
.sc_balloon.left:after {
border-right-color: #000;
}
おすすめのレンタルサーバー
おすすめの記事