Contents
WordPressで、画像に、吹き出しの【説明バルーン】を作ってみる。
こんな感じで、作ってみます。画像の上に、マウスを乗せてください。
説明バルーンが、表示されます。
初めまして、五十嵐未来です。
これからのブログは、画像の会話形式が主流になってきそうなので、探ってみました。
スタイルシート(CSS)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
.baloon { position: relative; width: 255px; height: 255px; box-shadow: 1px 1px 1px #ccc; z-index: auto; } .baloon img { width: 100%; height: 100%; } .baloon .box { position:absolute; width: 300px; /* 吹き出しの幅 */ height: 60px; /* 吹き出しの高さ */ top: -76px; /* 吹き出しと三角形の高さをプラスした値 */ left: 0; border-radius: 10px 10px 10px 10px; background-color: #0f0; display: none; } .baloon .box:after { /* 三角形を作成 */ position: absolute; content: ""; width: 0; height: 0; top: 60px; /* 吹き出しの高さと同じ値 */ left: 32px; border: 16px solid transparent; border-top: 16px solid #0f0; } .baloon .text { font-size: 16px; position: absolute; top: 8px; left: 4px; color: #000; } .baloon:hover .box { z-index: 2; display: block; } |
HTML
1 2 3 4 5 6 |
<div class="baloon"> <img src="./gazou.jpg" /> <div class="box"> <p class="text">はじめまして、未来です。</p> </div> </div> |
画像会話形式によるブログが主流になりそうな予感。
参考にさせていただいたのが、こちらのブログ。
非常に、勉強になりました。
これからのブログの1つの主流として、
「画像による会話形式」
「LINE風の会話形式」
こんな感じのブログが増えてきそうな予感がしています。
今後、さらに、進化していくであろう『ブログ』の最新動向をお伝えして行きます。
(*^-^*) よろしくね~
↑ マウスを乗せてみてください。( *´艸`)
補足説明
ちなみに、画像の大きさの設定は、ここです。
逆に、言うとですね・・・
あなたのアップした画像の大きさを、ここに指定してあげないと
「あなたのアップした画像の大きさ」は、崩れてしまいます。
以上で~~す。