大人のための『夢を叶える学校』

「夢は叶えるもの!」険しい道でも突き進めば、その先に必ず光が見える。実現した経緯や飲食店経営・起業の仕方などについて投稿しています

会話調の吹き出し「はてなブログをカスタマイズ」誰でも簡単に導入する方法【コピペ可】

ブログを閲覧していると、会話調で「吹き出し」を見かけます。

こんなことできるのは、かなりの熟練者であって、HTML や CSS の知識がないとできないのではないか・・・と初心者は思ってしまいます。

そこで今回は「はてなブログ」で吹き出しを表示させる方法をご紹介します。

f:id:success-life:20220131000002j:plain

吹き出し

私も初心者なので、見る度に憧れていました。

「使ってみたい、でもどうしてらいいか分からない・・・」

って、簡単に諦めていました。

でも、

一歩踏み出したら「簡単に出来た!」のでやってみてください。

 

以下の通り、手順は簡単です。

  ✅CSS のコピペ

  ✅画像のアップロード

  ✅CSS の追加(画像の設定)

  ✅HTML 記述

 

早速、やっていきましょう。

 

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;
  }
}

 

次に、【ダッシュボード】から【デザイン】をクリックします。

 

f:id:success-life:20220130171924p:plain

ダッシュボード

 

【カスタマイズ】から【{}デザインCSS 】をクリックします。

 

f:id:success-life:20220130172050p:plain

デザイン設定

 

CSSの記述窓をクリックします。

 

f:id:success-life:20220130172729p:plain

デザインCSS

 

先程コピーした CSS をペーストします。

 

f:id:success-life:20220130172930p:plain

CSSのコピペ

 

コピペができたら【変更を保存する】をクリックします。

 

f:id:success-life:20220130173822p:plain

変更を保存

 

ひとまず、ここで変更保存しておきます。

また『デザインCSS』に記述しますので、この作業手順は覚えておいてくださいね。

 

画像のアップロード

【利用中のサービス】から【はてなフォトライフ】をクリックします。

 

f:id:success-life:20220130175451p:plain

はてなフォトライフ

 

上部から【アップロード】をクリックします。

 

f:id:success-life:20220130180220p:plain

画像アップロード①

 

【クリックしてファイルを選択・・・】の枠をクリックします。

 

f:id:success-life:20220130180333p:plain

画像アップロード②

 

保存してある画像を選択し【開く】をクリックします。

 

f:id:success-life:20220130180557p:plain

画像アップロード③

 

CSS の追加(画像の設定)

 

『.クラス名::after{background-image:url(画像のURL);}』

 

 

ここでは、先程アップロードした画像を指定する CSS を追加します。

クラス名とは、HTML で記述するときに、画像を指定する名前です。

画像のURLは、先程アップロードした「はてなフォトライフ」の画像のURLです。

 

私がオススメする CSS の記述方法をご紹介します。

①上記の追加する CSS をメモ帳などに保存しておきます。

②保存しておいた CSS をコピーします。

f:id:success-life:20220130210745p:plain

吹き出しCSS

③デザインCSS を開き、先程コピペした「会話の吹き出しCSS 」の後に追加する。

f:id:success-life:20220130214023p:plain

CSS追加

 

「クラス名」の書き替え

先程コピペした CSS の「クラス名」を書き替えます。

半角英数字でクラス名を決めてください。

f:id:success-life:20220130214603p:plain

クラス名の書き替え

 

「画像のURL」の書き替え

はてなフォトライフにアップロードした画像を右クリックします。

【リンクアドレスをコピー】をクリックします。

f:id:success-life:20220130215134p:plain

画像URLのコピー

 

  コピペした CSS の「画像のURL」に貼り付けます。

f:id:success-life:20220130220709p:plain

画像URLの書き替え

 

最後に【変更を保存する】をクリックします。

 

この CSS の記述は、いくつでも追加していくことができます。

なので、クラス名は分かりやすい名前にしておいた方がいいです。

 

HTML 記述

では、実際どのようにして記述すればいいかを説明します。

【HTML編集】モードにします。

②右側に指定した画像、左に吹き出しを表示するコード

 

  <p class="l-fuki クラス名">本文</P>

 

 ※クラス名は CSS に追加した「クラス名」

 ※本文には吹き出しに入る文面

③左側に指定した画像、右に吹き出しを表示するコード

 

  <p class="r-fuki クラス名">本文</P>

 

 ※クラス名は CSS に追加した「クラス名」

 ※本文には吹き出しに入る文面

 

実践結果

画像の設定

デザイン CSS に2種類の画像を追加しました。

  ①クラス名:shanks ②クラス名:yamato

f:id:success-life:20220130231402p:plain

実践CSS

 

HTML 記述

左側に画像:<p class="r-fuki shanks">簡単にセリフ入れられるよね!</p>

右側に画像:<p class="l-fuki yamato">メモ機能を利用すると作業が楽だよ!</p>

 

【HTML編集】モードに切り替えて記述します。

f:id:success-life:20220130233019p:plain

HTML記述

【編集見たまま】モードでは以下のように表示されます。

f:id:success-life:20220130233208p:plain

編集モードの表示

編集モードでは、画像は表示されませんので注意しましょう。

【プレビュー】で確認することを推奨します。

 

【プレビュー】で表示確認

簡単にセリフ入れられるよね!

メモ機能を利用すると作業が楽だよ!

 

さいごに

いかがでしたか。

CSS をコピペしておけば、あとは画像を準備して追加CSS に記述し、HTML モードで記述すればいいだけです。

それぞれの「記述コード」はメモ機能を使って保存しておけば、すぐに活用できるようになります。

 

会話調の吹き出しを表示させることで、より分かりやすい記事が表現できるようになります。

また、記事作成のモチベーションも上がり、ユーザーからの評価も高くなります。

ぜひ参考にしてください。

ではまたお会いしましょう。

 

  参考になった!  参考にならない