コピペOK！はてなブログで吹き出しを使って会話形式にする方法

当サイトは広告、アフィリエイトを含みます

吹き出しを使った記事って憧れませんか？

私は昔、「何これ！？使ってみたい！」と結構衝撃でした（笑）

最初の設定は少し面倒ですが（と言っても慣れてる人だったら5分もかからないです）、不具合もなく（比較的）簡単に吹き出しを使えるものがあるので、紹介します。

Contents

はてなブログの吹き出しを使う方法
吹き出しの使い方
スマホで表示されない場合の対処法
最後に

はてなブログの吹き出しを使う方法

ちょっと長いですが、まずはこのコードをデザインCSSに貼り付けます。場所・「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」

コードが長いので、コピペする時に開けて使ってください。

[ac-box01 title=”コードを見る”]

/* 吹き出しの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);}

[/ac-box01]

注）レスポンシブでない人は、<style>上のCSS</style>とスタイルで囲って、スマホ用のデザインCSSに貼り付けましょう。

最後の「.クラス名::after {background-image:url(画像のURL);}」で、登場人物の設定をします。

例えば　.jibun::after {background-image:url(https://cdn-ak2.f.st-hatena.com/images/fotolife/n/xxx/20200203/20200203064149.jpg);}と言った感じです。

クラス名はローマ字で書き、数字も使えます。（良い例・dog1 悪い例 1dog）

この個所はいくらでも増やせるので、その都度設定してください。

画像のURLの取得方法は、このようにします。

1　はてなフォトライフにいく。

2　アップロードをクリックし、画像をアップ。左下に表示されたアップロード済みの画像の上で右クリックし、画像アドレスをコピーを押す。