cssで内容によって大きさの変わる吹き出しを作る

Image

吹き出しと顔を組み合わせて会話するようなコンテンツを うさぎにもできるXOOPS Cube入門 というサイトで作りました。当時はcssのこともよく分かっていなかったので、吹き出しも画像などを組み合わせて作ったのでだいぶ時間がかかりました

他のサイトでもふきだしがついたマンガっぽいコンテンツはつい読んでしまうし、また作ってみたいなぁと思いました。今ならcssとかでも作れそうなのでやってみました♪

cssで吹き出しを作る方法をググって調べてみました

色々なサイトで参考にされているのがこの アシアルさん の記事です。

CSSだけで簡単に吹き出しを作成する方法4つ!

デモサイト でどんな吹き出しが作れるか分かるようになっています。

Image

今回はこの 枠線なし・四角・左右三角の形のもので会話してる感じのコンテンツを作ってみたいと思います。

使いたい部分のcssを抜き出して文字を入れてみた

使いたい部分のcssを抜き出して、文字を入れてみました。

表示してみるとこのようになります。高さが指定してあるのではみ出しちゃいますね。

Image

ということで .box の高さ指定を取ってみます。あと、文字が枠にくっついちゃってるのも気になるのでpaddingをいれてみます。

Image

はみ出た部分がなくなって、くっついてたところも間があきました。

吹き出しの幅と、顔を入れる位置とか色々なところを調整する

左側に顔がある行では、顔+吹き出し
右側に顔がある行では、吹き出し+顔

にしようと思います。

あと、

・コンテンツの幅は、、、800pxぐらいに
・顔の大きさは幅100にして
・吹き出しは500pxぐらいに。
・吹き出しは口の位置に合わせて下の方に位置させたい
・キャラクターに合わせて #ccc 灰色 を全部 #f0e68c 薄いオレンジ に

してみました。

こんな感じになります。

Image

一度形が出来ればあとは会話を色々と

これで形が出来たので、会話をふくらませてみました♪

Image

ソースはこんな感じです。

WordPressやXOOPS Cubeでやってみる

この次はWordPressやXOOPS Cubeでもこのような表示が出来るというblogを書こうと思います。単純に、このままのソースをコピペしてもうまく動きませんでした。。うーん、きっとスタイルシートの名前とか単純だから?ですかね~。動かすにはちょっとだけ時間がかかりそうなので、別の回で書きたいと思います!

おまけ

ソースをコピペしてhtmlに保存して、ブラウザで表示すればすぐにいじってみることが出来ます。もし、画像を同じもので表示してみたかったら

http://usadeki.jp/images/usadeki/kao_usagi_funi.png

みたいに頭に、 http://usadeki.jp/images/usadeki/ を付けると見てみることが出来ると思います♪

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る