ハウリンの雑念だらけで生きている

ゆるゆると書いていきます

はてなブログ 記事内に【吹き出しで会話形式】に出来る様に設定!


スポンサーリンク

こんにちは、ハウリンです (*^^*)

ブログを作成していて、この部分かなり目立つ様に出来ないかな、

他の人のブログを見て、吹き出しで会話出来るのいいな!

という方に「吹き出しで会話形式にする」カスタムを紹介したいと思います。

こんな感じにしていきたいと思います。 

f:id:twistinhaurin:20200907231352p:plain 

どうやって設定していくのか???

CSSとHTML画面にコードを入れて行きます!

 

 

 

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

 

 

コピーしたコードを「デザイン」➡「カスタマイズ(スパナマーク)」➡「デザインCSS」に貼り付ける。

f:id:twistinhaurin:20200602155233p:plain

 

f:id:twistinhaurin:20200602154654p:plain

 

 

「クラス名」と「画像のURL」は書き換えて下さい。

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

クラス名は自分が分かりやすい文字を入れて下さい。

画像に名前をつけるみたいな事です。

使用できる文字は、半角英数字、ハイフンとアンダーバーで、アルファベットから入れて下さい。(数字、記号から入れないで下さい)

 

次に画像のURLを入れます

 

 

 

画像のURLを入れる 

すでに記事の中で使ってる画像を使いたい時は、画像の上で右クリック2回すると出る「画像アドレスをコピー」をクリック。

これで画像のURLをコピー出来ます。

f:id:twistinhaurin:20200907171358p:plain

 

はてなフォトライフからならどの画面からでも、画像を右クリックで「画像アドレスをコピー」出来ると思います。

f:id:twistinhaurin:20200907171058p:plain

 

上記でコピーしたアドレスを「画像のURL」の所と書き換えて下さい。

 

画像作りは、こちらの「かぶりっこメーカー」お勧めです(^O^)/

www.iconpon.com


 

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

上のコードはクラス名を重複しない様にすれば、いくらでも増やせますよ(*^^*)

 

最後に「変更を保存する」を忘れない様にクリックしましょう!

f:id:twistinhaurin:20200522165623p:plain

 

 

HTML画面にコードを入れる

記事を書く画面で「HTML編集」画面にします。

f:id:twistinhaurin:20200904135420p:plain

 


吹き出しを入れたい所に、下のコードを入れる。

<p class="l-fuki クラス名">ここに文章を入れる</p>

 

 例えば・・・

<p class="l-fuki クラス名">どんな感じになるかというと</p>

どんな感じになるかというと

 

<p class="r-fuki クラス名">こんな風に表示されるんです (*^^*)</p>

こんな風に表示されるんです (*^^*)

POINT

lとrで向きが変わります。

 

今回こちらのサイトを参考にさせて頂きましたm(__)m

www.notitle-weblog.com

スマートフォンでの表示方法、Chrome 拡張機能をインストールして使う方法など詳しく載ってます! 

 

あとがき

クラス名を増やして画像を変えるだけで、記事にメリハリやポップさが増して見やすくなりますよ (*^^*)

いろんな画像を作っておくと便利かと思います。

それでは、最後まで読んで頂いてありがとうございました。

このブログが少しでも役立てば嬉しいです。 

 

 

 

\読者登録してもらえると嬉しいです/