【はてなブログ】吹き出しを表示させて会話形式にする方法を詳しく解説してみた

はてなブログで、吹き出しを使って会話形式にする方法にチャレンジしてみました。

A：「吹き出しってどうやってつくるの？」

B：「いまから詳しく説明しますね！」

って書くより、

吹き出しってどうやってつくるの？

いまから詳しく説明しますね！

って吹き出しを使って、会話形式にした方が目を引きませんか？

僕は文章を書くのが下手なので、読んでいただいた方の目にとまるように、吹き出しを使ってみました。

参考にさせていただいたのは、SHIROMAさんのこちらの記事です。

www.notitle-weblog.com

かんたんにできました。ありがとうございます！

今回僕がやったことは、以下のとおりです。

• 吹き出し用の画像を準備する
• 画像を［はてなフォトライフ］にアップロードする
• 吹き出しのCSSをコピー → ちょっとだけ書き換える
• 書き換えたCSSを［デザインCSS］に貼り付ける

最後に見たままモードの［HTML編集］画面で編集すれば、吹き出しを使った会話形式の記事が作れます。

STEP1. 吹き出し用の画像を準備する

最初に吹き出しのアイコンとして使う画像を準備します。

僕は無料でイラストがダウンロードできるサイト「イラストAC」を利用しています。

Windows10の無料アプリ「ペイント3D」を使って、ダウンロードした画像を切り抜けば、かんたんにアイコン用の画像が作れたりします。
 

よろしければ下の記事もご覧ください。

www.matsutarou.com

www.matsutarou.com

STEP2. 画像をはてなフォトライフにアップロードする

画像が準備できたら、はてなフォトライフにアップロードします。

上部のメニューから［アップロード］をクリック → 破線の四角の中に画像をドラッグ＆ドロップします。

STEP3. 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: #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

の部分です。たとえば下のように書き換えます。

.matsutarou::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/matsutarouu/20200406/20200406204204.png);}
.hiyoko::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/m/matsutarouu/20200426/20200426142741.png);}

まず［クラス名］を半角英数字で書き換えます。分かりやすい名前がおすすめです。

［クラス名］を［hiyoko］に書き換えました

クラス名で使用できるのは、半角英数とアンダーバー（ _ ）、ハイフン（ - ）だけのようです。名前はアルファベットで始めてください。

つづいて［画像のURL］の部分を書き換えます。
先ほど、はてなフォトライフにアップロードした画像のURLを使用します。

上部のメニューバーから、［マイフォト］をクリック → アイコンにしたい画像をクリックします。

画面が変わるので、画像にカーソルを合わせて右クリック → ［画像アドレスをコピー］ をクリックします。

画像のアドレスがコピーされた状態になりました。
このURLを、コードの［画像のURL］部分にペーストして書き換えます。

ちなみに吹き出し用の画像は、何個でも追加できるので便利です。

STEP4. はてなブログのデザインCSSにコードを追加する

先ほど書き換えたコードを、はてなブログのデザインCSSに追加します。
コードを追加する前に、デザインCSS内のコードをコピペして、バックアップすることをおすすめします。

まず最初に、先ほど書き換えたコードをコピーします。

次に管理画面のサイドバーから、［デザイン  ］ → ［カスタマイズ  ］ → ［デザインCSS］の順番でクリックします 

 

デザインCSSの記述欄に、
コードをペースト → 変更を保存します。

STEP5. スマホ用のコードを追加する

僕はPCとスマホを別デザインにしているので、スマホ用のコードも追加する必要がありました。

参考にさせていただいた記事のやり方とちょっと違うのですが、この方法で正常に表示されています。

なおレスポンシブルデザインの場合は、この設定は必要ありません。

管理画面のサイドバーから、［デザイン  ］ → ［スマートフォン  ］ → ［記事］の順番でクリックします 。

下にスクロールして［記事上］の下の記述欄をクリックします。

以下のコードを追加します。

<style type="text/css">
先ほどのCSS
</style>

下の画像のようなかんじです。
コードを追加したあと、［変更を保存する］をクリックして、内容を保存します。

これでスマホにも、吹き出しが反映されました。

STEP6. 吹き出しを表示させる

記事内に吹き出しを表示させる方法です。

見たままモードの［HTML編集］画面で、以下のコードを入力します。

吹き出しが右側、画像が左側の場合

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

「クラス名」は先ほど決めた名前に書き換えます。
「r-fuki」と「クラス名」の間には半角スペースをいれます。
「テキスト」の部分が吹き出しの中の文字です。
仕上がりはプレビュー画面で確認してください。

吹き出し内で改行する場合
［Shift］+［Enter］で改行してください。

吹き出しが左側、画像が右側の場合

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

「クラス名」は先ほど決めた名前に書き換えます。
「l-fuki」と「クラス名」の間には半角スペースをいれます。
「テキスト」の部分が吹き出しの中の文字になります。
仕上がりはプレビュー画面で確認してください。

吹き出し内で改行する場合
［Shift］+［Enter］で改行してください。

最後に

今回は吹き出しの会話形式にする方法をご紹介させていただきました。

「ブログを読んでほしい！」っていうときに、吹き出しがちょっとしたアクセントになって目を引きますよね！

吹き出しを使った記事を書いたことのない方は、挑戦してみてはいかがでしょうか。

読みづらい部分もあったかと思いますが、最後まで読んでいただき、ありがとうございました。