編集方法。

参考サイト:ハカセの研究室

実際の記述は以下。

00_201406221250158cf.jpg
<div>~</div>で全体の範囲
1_20140622125016883.jpg
<p>~</p>で吹出し
2_20140622125018a70.jpg

CSS(※原文ママ)

.gin {
  padding-left:100px;
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/1.png) no-repeat left top; /*銀行アイコン位置*/
}

.van {
  background:url(http://blog-imgs-66-origin.fc2.com/x/w/a/xwancox/0.png) no-repeat right top; /*ヴァンアイコン位置*/
}
.gin , .van { width:auto; margin-bottom:5px;}

.gin p , .van p {
  position: relative;
  background: #fff;
  display: table-cell;
  vertical-align: middle;
  height: 50px; /*吹出し高さ*/
  /****文字を上下中心に置きたかったため"min"設定無し****/
  border: 1px solid #404040;
  padding:10px;
  width:285px; /*吹出し幅、auto不明*/
  border-radius: 5px; /*吹出し丸み*/
}
.gin p:after, .gin p:before {
  right: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.van p:after, .van p:before {
  left: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.gin p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-right-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.gin p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-right-color: #404040;
  border-width: 11px; /*太さ*/
  top: 20px;
  margin-top: -11px; /*太さ*/
}
.van p:after {
  border-color: rgba(255, 255, 255, 0); /*吹出□*/
  border-left-color: #fff;
  border-width: 10px;
  top: 20px;
  margin-top: -10px;
}
.van p:before {
  border-color: rgba(64, 64, 64, 0); /*吹出▽*/
  border-left-color: #404040;
  border-width: 11px;
  top: 20px;
  margin-top: -11px;
}


実際いじるとしたら赤文字部分くらい。
もし全てのアイコンを右・吹出しを左にしたい場合は以下。

00_20140622214212817.jpg


.gin {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/1.png) no-repeat left top;
}
.van {
padding-left:100px;
background:url(http://blog-imgs-66.fc2.com/x/w/a/xwancox/0.png) no-repeat left top;
}
.gin , .van { width:auto; margin-bottom:5px;}
.gin p , .van p {
position: relative;
  background: #fff;
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid #404040;
padding:10px;
width:285px;
border-radius: 5px;
}

.gin p:after, .gin p:before, .van p:after, .van p:before{
right: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}

.gin p:after, .van p:after {
border-color: rgba(255, 255, 255, 0);
border-right-color: #fff;
border-width: 10px;
top: 20px;
margin-top: -10px;
}
.gin p:before , .van p:before{
border-color: rgba(64, 64, 64, 0);
border-right-color: #404040;
border-width: 11px;
top: 20px;
margin-top: -11px;
}

アイコン以外は全て共用で使えるためこれで。
pで割り振らずとも"a"でも"b"でも被らないものであればお好きなもので。


コメント

    コメントの投稿

    (コメントの編集・削除時に必要)



    最新記事