https://souiunogaii.hatenablog.com/entry/hatenablog-fukidashiicon

【はてなブログ】カスタマイズCSSで、吹き出し会話形式のブロックを表示する手順、似顔絵画像作成サイトも紹介

本記事では、はてなブログのカスタマイズで、似顔絵アイコン画像から、吹き出しの形でセリフ形式のブロックを作って、
その中に文章を表示させるためのカスタマイズCSSを紹介します。

記事の後半では、このブログでも使用したおススメの似顔絵アイコン画像作成が無料でできるサイトも紹介します。

似顔絵アイコン画像から、吹き出しの形でセリフ形式のブロックを
簡単に表示できる方法です

似顔絵アイコン画像をはてなフォトライフにアップロード

はてなフォトライフのフォルダ「Hatena Blog」を選択してアップロード

画像を右クリック　＞　画像アドレスをコピー

デザインCSSに追加

設定　＞　カスタマイズ　＞　デザインCSS

以下のCSSを追加します。

/* -----吹き出しのCSS[start]------ */
.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(https://cdn-ak.f.st-hatena.com/images/fotolife/s/souiunogaii/20200111/20200111225713.png);}
/* -----吹き出しのCSS[end]------ */

CSSの一番下の●●●●●●●●●の部分はクラス名なので、任意の名前に変更してください。

実際のブログの書き方

htmlの記述例(r-fuki)

<p class="r-fuki ●●●●●●●●●">アイコンが左、文章が右側の場合の書き方</p>

表示イメージ

アイコンが左、文章が右側の場合の書き方

htmlの記述例(l-fuki)

<p class="l-fuki ●●●●●●●●●">アイコンが右、文章が左側の場合の書き方</p>

表示イメージ

アイコンが右、文章が左側の場合の書き方

おススメの似顔絵アイコン画像作成が無料でできるサイト

Peanutizeme

スヌーピー・ピーナッツのキャラ風の似顔絵アイコンが簡単に作成できます

www.peanutizeme.com

参考にしたサイト

mamazakki.hatenablog.com