モバイルチャット風の吹き出しの雛形ですー (´・ω・｀)
やり方は色々あるのですが
- 吹き出しの横幅が常に100%に ならない ように
- レスポンシブ
- テキスト内容の位置合わせが可能
こんなところに気をつけて組みました。
1 に関しては、常に横100%(あるいはそれに近い分量)取っていると記事幅が広い時、吹き出しの中身が少ない時なんかに見た目がちょっと鬱陶しいというか。
ですから①が主な目的になっているコード内容です。
横幅制限が不要な場合にはhtml内容を少し減らすことができますけれど。
で、これ私ごめんなさい。
当記事内のものはスクリーンショット掲載です。
一度使用したら 恒久的にCSSソース内容の管理が必要 だからです。
それがそのまま使用にあたっての注意点でもあるのですが。
テンプレートを変更したら該当部位のCSSを常に移設しないとスタイリングが失われます。
ちょっと私それ嫌なので、スクショで((((笑)
全てをhtmlのみ(style属性含む)で作成できれば良いのですが、今回のソース内容はCSSスタイルシートを利用しなければ使えないCSS内容が含まれます。
また、htmlだけでなんとかしようと思うとソース内容がかなり冗長になってしまいますので、今回はスタイルシートを利用する ことが前提です。
つまり 独自クラス です。
旧投稿画面をご利用で
① 改行の扱い「自動」の場合 --- ソース内の改行及びインデントを取り除いてお使いください
② 改行の扱い「htmlタグのみ」の場合 --- ソースはそのままコピペでOKですが、文章内の任意改行は文末に <br> を記してください。
新投稿画面をご利用の方はHTML編集モードでそのままコピペし、文章編集は通常モードに戻して行ってください。
(HTML編集モードのままの場合は文末に <br> が必要です)
html内容
(記事を書く際に編集画面にコピペして使用します。記事作成時毎回記述します。)
<div class="b-left-wrapper">
<div class="b-left">
左テキスト内容
</div>
</div>
<div class="b-right-wrapper">
<div class="b-right">
右テキスト内容
</div>
</div>
CSS内容
(管理画面「下段」のソースの末尾に追加します。一度きりの作業です。)
/* 左右 */
.b-left-wrapper,
.b-right-wrapper {
margin: 0 auto 10px; /* 後続要素との距離は10px */
width: 100%;
min-height: 80px; /* アイコン画像の高さと同じ数値を入れます */
}
/* 左 */
.b-left-wrapper {
padding-left: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意1 */
}
/* 右 */
.b-right-wrapper {
padding-right: 100px; /* アイコン画像の横幅+吹き出しまでの距離 注意2 */
text-align: right;
}
/* 左右吹き出し共通 */
.b-left,
.b-right {
display: inline-block;
width: 100%;
max-width: 500px; /* 吹き出しの横幅最大値指定 */
background-color: white; /* 吹き出し背景色 */
border: 2px solid rgb(240,240,240); /* 吹き出しボーダー色 */
border-radius: 6px;
padding: 10px 15px;
position: relative;
}
/* 左右吹き出し角部分共通 */
.b-left:before,
.b-right:before {
content: "";
width: 10px;
height: 10px;
background-color: white; /* 吹き出し背景色と同じ色を指定 */
border-bottom: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
position: absolute;
top: 15px; /* 角の位置 吹き出し上辺から15px下 */
}
/* 左吹き出し角部分 */
.b-left:before {
border-left: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
left: -8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
/* 右吹き出し角部分 */
.b-right:before {
border-right: 2px solid rgb(240,240,240); /* 吹き出しボーダー色と同じ色を指定 */
right: -8px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* 左右アイコン共通 */
.b-left:after,
.b-right:after {
content: "";
width: 80px; /* アイコン横幅 */
height: 80px; /* アイコン縦幅 */
border-radius: 50%; /* アイコン円形指定 */
position: absolute;
top: 0;
}
.b-left:after {
background: url(左側アイコン画像URL) center center /cover no-repeat;
left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}
.b-right:after {
background: url(右側アイコン画像URL) center center /cover no-repeat;
right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}● 注意点
① 右側吹き出しのテキスト位置合わせを「右」にしてあります。
左寄せに変更したい場合には
.b-right {
text-align: left;
}
を追加してください。
くれぐれも 独自クラスである ことを念頭にお使いください。
テンプレートを変更したらスタイルは失われます。
継続してスタイルを適用したい場合にはCSS内容の移設をお忘れなく。
細かくコメントを付けたつもりですので、アイコン画像のサイズ変更や吹き出し背景色の変更等のカスタマイズは自力で ╭( ･ㅂ･)و
There are no comments yet.