黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

【はてなブログ】チャット風フキダシの作り方

久しぶりに、当ブログのデザインを大幅に見直しました。

と言っても、見直したのはスマホ版のデザインなので、PC版の方はほとんど変わってないんですけどね。

 

デザイン変更に伴って、カスタマイズした箇所の記事を書いていけたらと思います。

今回は、その第一弾として「チャット風フキダシ」の作り方を紹介します。

 

 

こんな感じでしゃべれます。

 

アイコンはブログアイコンやプロフィールアイコンに使っているものです。

実は、私がポケモンの擬人化で描いたキャラなのですが、何のポケモンか当ててみて下さい^^

 

 

それでは、以下より早速紹介していきたいと思います!

 

チャット風フキダシのコード

チャット風フキダシのデザインは以下の通りです。

そのままコピペで使えるかはご自身のブログデザインによるので、適宜調整してくださいね!

 

デザインCSSはこちら↓

/*↓---- チャット風フキダシ ----↓*/
/* チャットボックス */
.chat-box {
  width: 100%;
  height: auto;
  overflow: hidden; /* floatの解除 */
  margin: 1.0em 0;
}
/* チャットアイコン */
.chat-face {
  float: left;
  margin-right: -64px;
  background-image: url(画像URL);
  background-repeat: no-repeat;
  width: 64px;
  height: 64px;
}
/* フキダシ部分 */
.chat-area {
  float: right;
  width: 100%;
}
/* フキダシ */
.chat-ballon {
  display: inline-block;
  position: relative;
  background: #D9F0FF;
  border-radius: 10px;
  margin: 0 4px 4px 80px;
  padding: 0 0.8em;
  box-shadow: 2px 2px 4px gray;
}
.chat-ballon:after {
  display: block;
  position: absolute;
  content: "";
  top: 18px;
  left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 10px 0;
  border-color: transparent #D9F0FF transparent transparent;
}
/* フキダシ内文章 */
.cat-ballon p{
  margin: 0;
  line-height: 1.0;
}
/*↑---- チャット風フキダシ ----↑*/

オレンジ色の箇所には、フキダシの左側に表示する画像URLを貼って下さい。

◯pxの部分は、画像の大きさと同じ値にして下さい。

また、水色の部分を変えると、フキダシの背景色を変える事ができます。

 

上記のコードをはてなブログの「デザインCSS」に追加したあとは、記事の任意の箇所に以下のHTMLコードを挿入して下さい。

 

HTMLはこちら↓

<div class="chat-box">
  <div class="chat-face"></div>
  <div class="chat-area">
    <div class="chat-ballon">
      <p>ここに文章を書く</p>
    </div>
  </div>
</div>

 

参考にしたサイト様

今回は、以下のサイト様を参考にしました。

vdeep.net

 

変えた部分は、フキダシのアイコン画像を指定する箇所です。

上記のサイト様では、フキダシのアイコン画像のURLをHTMLタグの中で指定していますが、ここではCSSの中で指定しています。

 

こうすることで、アイコンは1つしか設定できなくなりますが、一々アイコン画像を指定する必要がなくなります。

どちらが良いかは、用途によって選んでくださいね!

 

 

それでは、みなさんも楽しいブログライフを!