【2023年最新版】はてなブログで会話形式の吹き出しを使う方法

今回は、はてなブログで吹き出し使う方法についてです。ググってやってみたけど上手くいかなかった方、はい、私もです。そんな私が試行錯誤して実装できたのでわかりやすく解説していきたいと思います。

はてなブログで会話形式にするのに2時間かかった。。

息子、お疲れさんやで。こんな吹き出しを出せるようになるよ

ということで

・はてなブログで会話形式の吹き出しを使う方法

わかりやすく解説していこうと思います！

一度やって上手くいかなかった人にぜひ見て欲しい！

吹き出しに使う画像URLの用意

まず、吹き出しに用いる画像を用意してください

JPEG、PNGなどで用意するのが一般的です

画像の外枠や丸い形、色は別途設定するので、丸の中の画像だけの用意で結構です

画像を用意したら、「はてなフォトライフ」に画像をアップロードします

はてなブログのダッシュボード右上にある設定タブから飛ぶことができます

アップロードの方法ははてなフォトライフのヘルプを参照してください

アップロードが出来たら画像を右クリックして、「画像のURLをコピー」してください

コピーしたURLは後で使うのでメモ帳などに貼り付けておいてください

吹き出しに使う画像のURLの用意は以上です

headにメタデータ追加

次に、headに設定を追加します。ここが要ポイントです

headにコピー&ペースト

はてなブログのダッシュボードから以下の通り画面遷移してください

「設定」 >「 詳細設定」 > 「要素にメタデータを追加」

以下の内容をコピーして、上記設定（head要素にメタデータを追加）にペーストしてください

/* 吹き出しの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 {
  margin: 20px auto 36px 0;
}
.entry-content .r-fuki {
  margin: 20px 0 36px auto;
}
.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 {
  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::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;
}
@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;
  }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

一番下の「クラス名」の部分と「画像のURL」の部分だけ書き換える必要あります

head内編集 -その1 クラス名-

クラス名は適当なローマ字で設定して良いです、例えばr-papaとか。(右向いてる親亀の意)あとで使うから覚えておきましょう。

head内編集 -その2 画像URL-

前段で用意した、画像のURLをペーストしてください

クラス名、画像のURLをそれぞれ貼り付けた結果のサンプル↓になります

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

ちなみに

「はてブロ　吹き出し　設定」などでググると、CSSデザインの設定に上記コードを記載する記事がほとんどですが、それだと私はうまくいかなかったです。（過去にはできたのかもしれません）

記事を書く画面でHTML編集

最後に、記事を書く画面でHTML編集にして、以下の内容を記載してください。

「クラス名」と「テキスト」は自身で設定したものに適宜変更する必要があります。

<p class="r-fuki クラス名">テキスト</p>

サンプル↓この記事で使っているもののhtml記述です

<p class="l-fuki r-papa">はてなブログで会話形式にするのに２時間かかった。。</p>

以上です。プレビューで見ると吹き出しができていれば成功です

最後に

ポイントはヘッダーの設定に記載することです！

うまくいかなかった方は本記事コメントや問い合わせフォームなどから投稿ください

息子、お疲れさんやで

コピペした内容の詳細については下記の記事にまとめています

テキスト背景の色の変更などしたい方は御覧ください

nagarami-kurokiri.hatenablog.com