はてなブログで対話形式を取り入れる設定を詳しく解説

こちらの記事で吹き出しを使った対話形式にする方法を記載しました。

その中でヘッダーに追記するCSSを載せていますが、各行ごとの設定内容について

解説していきたいと思います。

対話形式と言ってるのはこのやりとりのことだね

そうだね、吹き出しとも表現するかな

本記事の概要

・はてなブログで吹き出しを使った対話形式に必要なCSSの内容を解説
・吹き出しで使うフォントや背景色、サイズなどを変えたい人は必見
・サクッと対話形式を実装したい人はこちらの記事を見てね！
・今回はCSSを上からある程度の行数ごとに説明を入れていくので、一気に全文知りたい方も過去記事参照してください

サイトの毎に変えるポイントをわかりやすく解説！

吹き出しボックスの設定
吹き出しの尖った部分の設定
吹き出し元の円形部分の設定
画面幅によってスタイルを変更
呼び出すクラス名と画像の指定
まとめ

吹き出しボックスの設定

 .entry-content .l-fuki,
 .entry-content .r-fuki {
  position: relative;
  width: calc(100% - 82px);
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 20px;
  border-radius: 6px;
  border: 2px solid #ddd;
  box-shadow: 0 3px 8px -2px rgba(0,0,0,.16);
  background-color: #fff;
  z-index: 1;
  box-sizing: border-box;
}

.entry-content .l-fuki および .entry-content .r-fuki の要素に適用されるスタイルを指定しています。
position: relative; は相対的な位置指定を行うことを意味します。
width: calc(100% - 82px); は幅を親要素の幅から82ピクセルを引いた値に設定しています。
box-sizing: border-box; は要素のサイズにボーダーとパディングを含めるように指定しています。
padding: 20px; は要素の内側のパディングを20ピクセルに設定しています。
border-radius: 6px; は要素の角の丸みを6ピクセルに設定しています。
border: 2px solid #ddd; は要素のボーダーのスタイルを指定しています。
box-shadow: 0 3px 8px -2px rgba(0,0,0,.16); は要素に影を付けるためのスタイルを指定しています。
background-color: #fff; は要素の背景色を白に設定しています。
z-index: 1; は要素のスタッキングコンテキストでの重なり順序を指定しています。

ポイント

ここまでで、よく変更する設定は以下の3つ

・width　　・Padding　　・background-color

設定の意味と、実際に値を変更したものを見てみましょう

上記の３点を変更するだけで、大きく見た目が変わりますよね。

注意点はwidthの設定ですが、後述の@media 以降にも記述があります。ここも同様の設定（一定以上の画面サイズ時の場合の設定）なので変更したい場合は一緒に修正するようにしてください。

ちなみに

background-colorの設定値、#fffやa8d17aというのはカラーコードという色を表すhtml記述で、どんな設定値がどんな色になるかはこんなサイトなどで簡単に調べられます

吹き出しの尖った部分の設定

ここからは吹き出しの尖った部分の設定です

 .entry-content .l-fuki::before,
 .entry-content .r-fuki::before {
  position: absolute;
  content: "";
  top: 16px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background-color: #fff;
  z-index: 2;
}

.entry-content .l-fuki::before および .entry-content .r-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
position: absolute; は絶対的な位置指定を行うことを意味します。
content: ""; は擬似要素のコンテンツを空に設定しています。
top: 16px; は要素の上端から16ピクセルの位置に配置されるように指定しています。
width: 10px; は要素の幅を10ピクセルに設定しています。
height: 10px; は要素の高さを10ピクセルに設定しています。
border-right: 2px solid #ddd; は要素の右側のボーダーのスタイルを指定しています。
border-bottom: 2px solid #ddd; は要素の下側のボーダーのスタイルを指定しています。
background-color: #fff; は要素の背景色を白に設定しています。
z-index: 2; は要素のスタッキングコンテキストでの重なり順序を指定しています。

ここでのポイントは、さっきも出てきた background-color かな
吹き出しボックスの背景色を変更したら、ここの背景色も同じ色に変えよう

この下の部分も吹き出しの尖った部分の記述の続きです

.entry-content .l-fuki::before {
  right: -7px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
  left: -7px;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.entry-content .l-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
right: -7px; は要素を右から7ピクセルの位置に配置しています。
transform: rotate(-45deg); は要素を反時計回りに45度回転させています。
-webkit-transform: rotate(-45deg); は一部の古いブラウザに対応するためのプレフィックス付きのスタイル指定です。
.entry-content .r-fuki::before の擬似要素 ::before に適用されるスタイルを指定しています。
left: -7px; は要素を左から7ピクセルの位置に配置しています。
transform: rotate(135deg); は要素を反時計回りに135度回転させています。
-webkit-transform: rotate(135deg); は一部の古いブラウザに対応するためのプレフィックス付きのスタイル指定です。

吹き出し元の円形部分の設定

ここからは、吹き出し元の円形部分の設定となります

 .entry-content .l-fuki::after,
 .entry-content .r-fuki::after {
  position: absolute;
  content: "";
  width: 60px;
  height: 60px;
  top: -6px;
  border-radius: 50%;
  border: 3px solid #fff;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 5px #aaa;
  box-sizing: border-box;
}
.entry-content .l-fuki::after {
  right: -82px;
}
.entry-content .r-fuki::after {
  left: -82px;
}

.entry-content .l-fuki::after および .entry-content .r-fuki::after の擬似要素 ::after に適用されるスタイルを指定しています。
position: absolute; は絶対的な位置指定を行うことを意味します。
content: ""; は擬似要素のコンテンツを空に設定しています。
width: 60px; は要素の幅を60ピクセルに設定しています。
height: 60px; は要素の高さを60ピクセルに設定しています。
top: -6px; は要素を上方向に6ピクセルの位置に配置しています。
border-radius: 50%; は要素の角を丸くするための半径を50%に設定しています。
border: 3px solid #fff; は要素のボーダーのスタイルを指定しています。
background-size: cover; は要素の背景画像を要素全体に表示するように指定しています。
background-position: center center; は要素の背景画像の位置を中央に設定しています。
background-repeat: no-repeat; は要素の背景画像の繰り返しを禁止しています。
box-shadow: 1px 1px 5px #aaa; は要素に影を付けるためのスタイルを指定しています。
box-sizing: border-box; は要素のサイズにボーダーとパディングを含めるように指定しています。
.entry-content .l-fuki::after の擬似要素 ::after の位置を右側に配置しています。
right: -82px; は要素を右から82ピクセルの位置に配置しています。
.entry-content .r-fuki::after の擬似要素 ::after の位置を左側に配置しています。
left: -82px; は要素を左から82ピクセルの位置に配置しています。

ポイント

ここまでで、よく変更する設定は以下の4つ。

・width　　・height　　・border-radius　　・border

borderでは色の円形の色の指定ができます。
その他の設定の意味と、実際に値を変更したものを見てみましょう

ここでも注意点として、widthとheightの設定です。後述の@media 以降にも記述があります。ここも同様の設定（一定以上の画面サイズ時の場合の設定）なので変更したい場合は一緒に修正するようにしてください。

画面幅によってスタイルを変更

画面幅によってスタイルを変更するようになっています。画面幅が478px以上の場合、吹き出しのサイズや配置が変更されます。

基本的に上で解説している設定と重複していますが、サイトを閲覧する側の環境によって自動的に適用される設定となるため、上の部分の設定を修正した場合はこちらも修正するようにしてください。

 @media screen and (min-width: 478px) {
  .entry-content .l-fuki::after,
  .entry-content .r-fuki::after {
    width: 80px;
    height: 80px;
  }
  .entry-content .l-fuki,
  .entry-content .r-fuki {
    width: calc(100% - 106px);
  }
  .entry-content .l-fuki::after {
    right: -106px;
  }
  .entry-content .r-fuki::after {
    left: -106px;
  }
}

@media screen and (min-width: 478px) は、ウィンドウの幅が478ピクセル以上の場合に適用されるメディアクエリを指定しています。
.entry-content .l-fuki::after および .entry-content .r-fuki::after の擬似要素 ::after に適用されるスタイルを指定しています。
幅を80ピクセル、高さを80ピクセルに設定しています。
.entry-content .l-fuki および .entry-content .r-fuki の要素の幅を計算し、106ピクセルを引いた値に設定しています。
.entry-content .l-fuki::after の擬似要素 ::after の位置を右側に配置しています。
right: -106px; は要素を右から106ピクセルの位置に配置しています。
.entry-content .r-fuki::after の擬似要素 ::after の位置を左側に配置しています。
left: -106px; は要素を左から106ピクセルの位置に配置しています。

呼び出すクラス名と画像の指定

 .r-papa::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620173047_120.jpg);}
 .l-child::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/n/nagarami_kurokiri/20230620/20230620173004_120.jpg);}