久しぶりに、当ブログのデザインを大幅に見直しました。
と言っても、見直したのはスマホ版のデザインなので、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>
参考にしたサイト様
今回は、以下のサイト様を参考にしました。
変えた部分は、フキダシのアイコン画像を指定する箇所です。
上記のサイト様では、フキダシのアイコン画像のURLをHTMLタグの中で指定していますが、ここではCSSの中で指定しています。
こうすることで、アイコンは１つしか設定できなくなりますが、一々アイコン画像を指定する必要がなくなります。
どちらが良いかは、用途によって選んでくださいね！
それでは、みなさんも楽しいブログライフを！
