ブログに吹き出しを入れたい!(CSS編)

ブログに吹き出しを入れたい!(アバター編)」で吹き出しに使う顔の表情を作りました。今回は、いよいよHTMLとCSSで実装していきたいと思います

けんちゃん 喋る S

こんな感じで吹き出しを入れちゃいます!
(左にアイコン)

まずは、下にHTMLとCSSのコードを載せておきます。CODE PENで表示しているので色々といじってみてください。右上の「EDIT ON CODEPEN」をクリックすると、コードを編集できる画面が出ます。CODE PENのいいところは、編集した結果がリアルタイムに表示されるところです。実際にコードの数字などを変えながら理解を深めてください。コピペもできます!

追記:埋め込んだCODE PENは編集ができないようなので、CODE PENのサイトに行って下のコードをコピペして遊んでみるとリアルタイムに結果が反映されるので勉強になると思います。

See the Pen Balloon by Ken_chan (@KentaroT) on CodePen.

ジャンプできる目次

HTMLの設定

HTML

は、吹き出し部分のクラス名です。
クラス名は任意の名前でOKですが、後のCSSの一致させる必要があります。わかりやすい名前がいいと思います。私は、「balloon-right」も作る予定なので「balloon-left」という名前にしました。ここは、吹き出し部分とアイコン部分を合わせたクラス名になります。

は、アイコン部分のクラス名です。
わかりやすくクラス名は「icon」にしてみました。<div>タグがまであるので、②~➃がアイコンの設定ということになります。言い方を変えると、「icon」のクラス名がついた<div>タグがまで続いていますよ、ということです。

は、アイコンの画像情報です。
大事なのは、「img」と「src」ですね。imgは、画像ですよ!ということ。srcは、画像があるURLです。他の情報は、ライブドアブログが自動的に入れたものなので無視しても支障はありません。ただ、大きさを調整したい場合は、「height」で画像の縦の長さを、「width」で画像の横幅を調整してください。上のコードにはないですが単位はpxになります。ライブドアブログでは、画像を挿入したら自動的に③部分のタグを作ってくれました。(ありがたや~)

は、「icon」クラスのついた<div>タグの終わりを意味します。

は、吹き出し部分に入るテキストです。
<div>タグとの</div>タグの終わりではさまれているので、この部分が<div>タグの内容としてテキストで表示されます。

のように、吹き出し部分で改行したい場合は、<br>タグを入れます。

は、吹き出し部分(アイコン部分を含む)の終わりです。
このHTMLは、吹き出し部分の中に、アイコン部分が入っている入れ子状の構造になっています。

CSSの設定

CSS balloon-left

の「balloon-left」は、HTMLとリンクしています。
「balloon-left」の設定ということです。

positionは、相対的に。
これにすると、吹き出しが自動的に端まで伸びます。

paddingは、吹き出しの中の余白です。
この場合は、20px(ピクセル)設定しています。

border-radiusは、吹き出しの角を丸く設定です。
10px分丸くしています。

boderは、3pxの太さの直線で、色#ddddddのボーダーラインを書いて!ということです。
(色の設定は、カラーピッカーを使うと簡単です。ググってみるとすぐ出てきます。)
つまり、吹き出しの線の設定です。

margin-leftは、吹き出しの左に余白を作っています。
今回は吹き出しの左に100px X 100pxのアイコンを入れるので、130pxにしてみました。

CSS balloon-left before

は、吹き出しの左にあるとんがった部分の設定です。
今回は、②で灰色の三角形を作ってから、③で白い三角形を重ねています。

詳しい説明は、GRANFAIRSのサイトがわかりやすいです。
「なんでこれで三角形になるの?」と思った人は参考にしてみてください。

CSS balloon-left after

は、白い三角形を重ねる部分でしたね。

CSS icon

は、「icon」はHTMLとリンクしています。
icon(アイコン部分)の位置を設定しています。iconはHTMLで説明したように、balloon-left(吹き出し部分)の中の構造になるので、位置関係はballoon-leftが基準になります。

positionは、絶対位置で。
(絶対位置といっても基準のballoon-leftから見ての位置になります。)

leftは、balloon-leftからマイナス(左に)130pxの位置に設定して!という意味。

topが0pxということは、balloon-leftと上端を揃えるということです。
仮に10pxだったら、balloon-leftより上端が10px下がります。

は、iconの画像に対して行う処理です。
border-radiusは、画像の角を丸くする設定です。50%だと、正方形の画像が円になります。

ライブドアブログで定型文登録

けんちゃん 笑う S

定型文に登録しておくと便利!!

このブログは、ライブドアブログを使っています。
ライブドアブログは、定型文を設定しておくといつでも呼び出せます。

定型文

私はこんな風に定型文に登録しています。
「コメント」の所に吹き出しの言葉を入れます。
表情を変えたいときは、違う画像を差し替えます。
因みに表情を変えるとこんな感じです。

けんちゃん いじわる S

うっしっしっし~!
うまくいった!(バイバ~イ!)

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (3件)

  • ブログとTwitterを興味深く拝読いたしました。
    プログラミングに関するアフィリエイトの依頼ができないかと思い、今回ご連絡差し上げたました。
    ご興味ございましたら、ご連絡先をいただければ幸いです。
    どうぞよろしくお願いいたします。

  • >>1
    依頼が来るとは思っていなかったので、嬉しいです!
    どんな案件か教えてもらえるとありがたいです。
    お返事はここでも、TwitterのDMでも結構です。

けんちゃん へ返信する コメントをキャンセル

ジャンプできる目次