数あるサイトから当ブログにご訪問いただき誠にありがとうございます。
ある日のツイッターで出張買取センターが紹介されていました。
いつもありがとうございます
その時の画像がこちら
拭き出しを使ってみたい？
・・・という事で拭き出しを使ってみましょう！
それではまず準備編
ＣＳＳの編集をしましょう
ＣＳＳがわからない！ＣＳＳの事が知りたい！
という方はこちらのリンクをどうぞ
CSSの編集って？と思った方はこちらのリンクをどうぞ
CSSはページをデザインする役割だったんですね～
という事で進みます
ちなみに今回の拭き出しにする設定は
デザイン（スキン）が”CSS編集用デザイン”を
使用している方のみ出来るカスタマイズになっています。
マイページの右上にあるΞボタンを押してください
続きましてメニューの中から左下にあるデザインの変更を選びましょう
今度はCSSの編集をクリック
※テンプレートを変更すると今までのデザイン情報が破棄されます
保存をする前に現在の状態をメモっておくといいです。
画面が切り替わって・・・
スクロールしていくとCSS編集に辿り着きます
※ここの枠の中にある文字でデザインが決まっています
作業する前にメモ帳などに今の状態をコピペしておきましょう
(失敗した時に作業前のデザインに戻る為です)
ずず～っとスクロールした最後に・・・
枠の中にある魔法の言葉をコピペしてください
場所がわからない方はこちらのリンクが優しく教えてくれます
/* 吹き出し（左向きにツノ）*/
.fukidashi_l {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 15px 10px;
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #cccccc; /* 枠線の色 */
border-radius: 10px; /* 四隅の丸み */
background-color: #fffff0; /* 内側の背景色 */
box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
margin-left: 15px; /* ツノの突き出し量 */
}
.fukidashi_l:before {
position: absolute;
content: "";
width: 0;
height: 0;
right: 100%;
border-style: solid;
border-color: transparent;
border-right-color: #cccccc; /* 枠線の色 */
border-width: 15px; /* ツノの突き出し量 */
top: 10px; /* ツノの位置（上から） */
}
.fukidashi_l:after {
position: absolute;
content: "";
width: 0;
height: 0;
right: 100%;
border-style: solid;
border-color: transparent;
border-right-color: #fffff0; /* 内側の背景色 */
border-width: 14px; /* ツノの突き出し量－１ */
top: 11px; /* ツノの位置＋１（上から） */
}
/* 吹き出し（右向きにツノ）*/
.fukidashi_r {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 15px 10px;
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #cccccc; /* 枠線の色 */
border-radius: 10px; /* 四隅の丸み */
background-color: #f0ffff; /* 内側の背景色 */
box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
margin-right: 15px; /* ツノの突き出し量 */
}
.fukidashi_r:before {
position: absolute;
content: "";
width: 0;
height: 0;
left: 100%;
border-style: solid;
border-color: transparent;
border-left-color: #cccccc; /* 枠線の色 */
border-width: 15px; /* ツノの突き出し量 */
top: 10px; /* ツノの位置（上から） */
}
.fukidashi_r:after {
position: absolute;
content: "";
width: 0;
height: 0;
left: 100%;
border-style: solid;
border-color: transparent;
border-left-color: #f0ffff; /* 内側の背景色 */
border-width: 14px; /* ツノの突き出し量－１ */
top: 11px; /* ツノの位置＋１（上から） */
}
しっかり}までいれてくださいね。
これをコピペした後に保存して準備編は完了です。
準備編まででは変化はわかりません(驚)
それでは記事編に移ります
拭き出しにしたい場所をHTML表示に切替えて入力します。
それぞれ★の部分を会話させたい文章に変えてみてくださいね！
ちなみに画像を使えば・・・
href="https://stat.ameba.jp/user_images/20160101/12/boeconos/ca/7c/p/o0640064013528628399.png"><img
id="1451619983871" ratio="1"
src="https://econos-bookoff.sakura.ne.jp/wp-content/uploads/image/t02200220_0640064013528628399.png"
style="width: 63px; height: 63px; border: medium
none;"></a><div
class="fukidashi_l">会話風にも変えれます</div><p>
そのままタグを作ると画像の下に
拭き出しが出来てしまうので・・・
最後の<p>前にタグを入れるのがコツです。
ちなみにこの拭き出し・・・
スマホの閲覧だと普通の文字だけですので
注意が必要です(爆)
参考にしたブログでは他のバージョンも紹介されています。
どうでしたかね？
会話っぽい雰囲気を出す時なんかにご活用ください。
桃さんのブログはCSS編集用デザインですよね？ね？ね？
出来なかったらスイマセン(爆)
最後までお読みいただきありがとうございます。
ご自宅にある傷のあるCD・DVDがありましたらご相談ください
研磨サービスのホーム ページはこちらから
—–
