【はてなブログ】見たままモードで吹き出しを表示する方法

あなたはブログの記事に吹き出しを使っていますか？
吹き出しを使うと、会話形式になって読みやすく、やさしい雰囲気の記事になります。

でも、吹き出しを使うたびにHTMLを書くのはちょっと苦手なんだよね…

大丈夫！一度設定してしまえば、見たままモードから簡単に使えるようになります。

この記事では、初心者の方でも迷わず設定できるように、
しっぽ付きの吹き出しを簡単に作る方法を解説します。

まずは完成イメージを見てみましょう。

こんにちは！ポヤラです。

白猫だよ。こんな会話形式の記事が作れるようになるんだね！

このような吹き出しを、見たままモードから簡単に使えるようにしていきます。

■この記事でできること■

• しっぽ付き吹き出しの設定
• キャラクター画像の登録
• 見たままモードから吹き出しを使う方法

一度設定してしまえば、記事作成がとても楽になります。
一緒に設定していきましょう。

吹き出しを表示する仕組み

はてなブログの吹き出しは、次の2つを組み合わせて作ります。

• デザインCSS：吹き出しの形や配置を作る
• 定型文：記事内で呼び出すためのコード

この2つを設定しておけば、見たままモードから簡単に吹き出しが使えるようになります。

手順①：吹き出しのCSSを設定する

まずは、吹き出しの形を作るための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: #FFFCF6;
  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;
  }
}

貼り付けたら、忘れずに「変更を保存する」をクリックしてください。

手順②：キャラクター画像を設定する

次に、吹き出しに表示するキャラクター画像を設定します。

①画像URLをコピーする

1. はてなブログで「記事を書く」を開く
2. サイドバーから画像を貼り付ける
3. 「HTML編集」に切り替える
4. 表示されたコードの中の画像URL（src="〜"の部分）をコピー

例：

<img src="https://cdn-ak.f.st-hatena.com/images/...">

この中のURL部分だけをコピーして使います。

②デザインCSSに画像を登録

先ほど貼ったCSSの下に、次のコードを追加します。

.poyara1::after {
  background-image: url(ここにポヤラ画像URL);
}

.hiruneko1::after {
  background-image: url(ここに白猫画像URL);
}

これでキャラクターの設定は完了です。

手順③：定型文を作る

次に、記事内で吹き出しを簡単に使えるように定型文を作ります。

①定型文のコード

左側の吹き出し：

<p class="l-fuki poyara1">テキスト</p>

右側の吹き出し：

<p class="r-fuki hiruneko1">テキスト</p>

②定型文を登録する

1. 記事を書く画面を開く
2. 右側の「定型文貼り付け」をクリック
3. 「定型文を作成する」を選択
4. タイトルを入力（例：ポヤラ吹き出し）
5. 先ほどのコードを貼り付けて保存

見たままモードで吹き出しを使う方法

1. 記事編集画面でカーソルを置く
2. 定型文アイコンをクリック
3. 作成した吹き出しを選択
4. テキスト部分を書き換える

これで、見たままモードから簡単に吹き出しが使えるようになるよ。

まとめ｜一度設定すれば簡単に使える

• デザインCSSに吹き出しのコードを貼る
• キャラクター画像を登録する
• 定型文を作る

この3ステップで、吹き出しは簡単に使えるようになります。

一度設定してしまえば、記事作成がぐっと楽になりますよ。

---

※吹き出しの基本CSSは、先輩ブロガーさんの便利なコードを参考にしています。
シンプルで使いやすい設計なので、初心者の方にもおすすめの方法です。

【はてなブログ】吹き出しで会話形式にするのをめっちゃ楽にしてみた | SHIROMAG

はてなブログで収益化したい方へ

初心者向けに、収益化までの手順をまとめています。

poyaran.com