vanillaice (Akira)

vanillaice (Akira)

モバイルチャット風の吹き出しの雛形ですー (´・ω・`)


チャット風吹き出し

やり方は色々あるのですが

① 吹き出しの横幅が常に100%に ならない ように
② レスポンシブ
③ テキスト内容の位置合わせが可能

こんなところに気をつけて組みました。
①に関しては、常に横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内容の移設をお忘れなく。
細かくコメントを付けたつもりですので、アイコン画像のサイズ変更や吹き出し背景色の変更等のカスタマイズは自力で ╭( ・ㅂ・)و
関連記事

Comments 37

There are no comments yet.
ぼっちん  
To Akiraちゃん

あの~ 
------------
① 吹き出しの横幅が常に100%に ならない ように
③ レスポンシブ
④ テキスト内容の位置合わせが可能
------------

② がないんですが、何か意図がありますでしょうか~?
もしかして一旦②を書いたけど、削除したとか?(笑) 

細かいツッコミですみません (^^ゞポリポリ

2017/04/16 (Sun) 08:33 | EDIT | REPLY |   
Akira  
To ぼっちんさん

あ。ホントだ((((笑)
特に意図はなく単純に間違えた!
ご指摘ありがとうございます(笑)

2017/04/16 (Sun) 08:50 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

あっ 修正早かったですね~(笑)
間違いの件了解です~。

吹き出し、前から使ってみたいとは思ってましたが、確かにテンプレ替えた時のHTML&CSSの移植が面倒 (^_^; アハハ…
まあ、移植し易いようにソースにコメント付けておけば良いのかもしれませんが(笑)

お返事は無用ですから(笑) ('◇')ゞラジャ


2017/04/16 (Sun) 10:57 | EDIT | REPLY |   
Akira  
To ぼっちんさん

吹き出しのことは置いといて ←

殿!事件ですぞ!
いやー。びっくりのコンコンチキ ( ̄∀ ̄;)
Amebaの新エディターが使いづらいということで炎上中なので、一体どんなもんやらと思い開設してみました。
そして気づいたんです。
エディターとかどうでもいい。
Amebloはhttps化したけれどリダイレクトをしていないってことに!(笑)
http:のブログとhttps:のブログとが共存(?)してるんですよ。
これホントにびっくりなんだけど(笑)
しかもそれ、ちゃんと告知・広報されてないんですよね。
どうなってんだAmeblo!!!(笑)

こんなことになっちゃうと、httpsの方はJSに制限がかけられててhttpの方にそれは無いので、みんなhttpから動かないですよね。
下手するとhttpsのアクセスをdisplay: none;で非表示にする人まで出てくるんじゃないかと思う。
そしてそれを誰かが広め、わけわかってない人たちが右へ倣え。
Ameblo帝国滅亡すんじゃないか。これ(笑)

-------- 追記

amp版URLまである!!!(((((笑)

httpの通常ブログ
httpsの通常ブログ
httpのampブログ
httpsのampブログ

4つもある!!!
えー。異常でしょ。これって… ( ̄∀ ̄;)
ダイナミックサービング導入したばっかじゃん…。無駄じゃん… ってゆーか差し引きゼロどころかマイナス…( ̄∀ ̄;)

2017/04/16 (Sun) 16:20 | EDIT | REPLY |   
ぼっちん  
To Akiraちゃん

あらららら(爆)
炎上に対するAmebaの逆襲か? (≧ω≦。)プププ
まぁ、どえりゃあことやりはりますな~ (^_^; アハハ…
>>>
覗いて来ました(爆)
やっぱりこりゃAmeba、追い込まれて運営もぶち切れちゃったみたいですね~(爆)
米国VS北朝鮮より殺気だって来てる~ (〃^▽^〃)oあはははっ♪
LIVE中継したい気分(笑)

■追記させて戴きますね~ (^^ゞポリポリ
「amebaオウンド」表示めちゃくちゃになってます (^_^; アハハ…
怒ってる人達が怖い(爆)

2017/04/16 (Sun) 16:48 | EDIT | REPLY |   
Akira  
To ぼっちんさん

どうなるんでしょうね。
なんだかおもしろいことになってきた。
とか言っても良いんだろうか ^^;
一番の問題はアメブロユーザーさんが全く気づいてなさそうなところなんだけど(笑)
FC2も同じことになったりして。
え。ちょっと!それはやめてよ?それはヤダよ!(笑)

2017/04/16 (Sun) 22:00 | EDIT | REPLY |   
Akira  
To 吹き出しの件 内緒さん(移動先)

今の状態が「落ち着いた」形でしょうか。
うーん…。うぅーん (´-ε-`;)
まず、全体像が左寄りになってますよね。
パソコンでブラウザ幅をゆっくり縮めてみてください。
途中ではみ出して右サイドメニューと重なります(横幅1100px付近)

内緒さんの方針をはっきりさせてもらえませんでしょうか。
一番に決めておかなければならないのは「横幅をどうするの?」ってところなんです。
常に横100%(あるいはそれ以下)にするの?それとも制限をかけるの?
という点が決まらなければソースの組みようがありません。

> ipad pro以外のサイズではキチンと吹き出しが中央に寄る
= 画面幅が縮小されたので左右の余幅が無くなっただけです。

元のソースコードの流用で左右marginとwidth: 100%;の同時指定は確実にはみ出します。
横幅100%を指定された吹き出しは記事幅と同等(100%)のままで左右に移動するからです。
元のソースをどうしても使いたいのであれば元通り、そのままで使うのが一番だと思います。

=======

当記事内のソースはお試し頂いたんでしょうか。
動作確認など済ませてからお尋ねくださいね。
利用する・しないは自由ですが、元の簡素なソースにこだわりをお持ちであればこちらのソースは不要なはず。
お尋ねの件に回答するにはこれまた結構な長文説明になります。
現在の調子ではその全てが無駄になりかねませんよね。
結局のところどうしたいの?というのをまずはご自身でお決めください。
ちんぷんかんぷんと仰っておられますが、基本を理解せずに使いこなせるとは思いません。
最低でもご自身で基本形をお試しになってその次にカスタマイズ、という手順でお願いできませんでしょうか。
よろしくご理解ください。

2017/04/19 (Wed) 18:36 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 10:00 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 12:45 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 12:54 | EDIT | REPLY |   
Akira  
To 吹き出しカスタマイズの件 内緒さん

どなたにもお願いしていることですが、ご質問の際には質問対象を「表示状態」「設定状態」にしておいてください

> 「きちんと表示できている問題がない」と私が書いたので確認に来るだろう、という予測までした上で、元のテンプレに戻していました。

私が拝見した時は既に元のソースに戻っていたわけで、それでは私の方のソースで「どんなカスタマイズを行い」「なににつまずいているのか」が全くわかりません。
ですから私が推測したり仮定を立てたりという手間が生じるわけなんです。
私の製作したものについてお尋ねになるのならば、それをとにかく表示しておいてください

これは例外なくどちら様にもお願いしていることです。

2017/04/20 (Thu) 15:03 | EDIT | REPLY |   
Akira  
To 吹き出しカスタマイズの件 内緒さん②

① 左右を入れ替えたい件
② キャラを増やしたい件

上記2件についてはわかりました。
最後に説明しますが、
結局「横幅はどうしたいんですか?」というのがはっきりしません。
現在の状態は全体像を最大600pxにする
という縛りをかけるようカスタマイズされていますが、それがご希望ですか?
私のデフォルトソース内容は全体像への制限でなく、各吹き出しのサイズへの制限です。
見た目が全然違いますよね?

内緒さんの現在の状態
アウトラインのサイズ = 最大600px
アウトラインの中にアイコン+吹き出しが100%の状態で配置。
記事幅が600px以上の時も全体像は600px以上にはならず、中央に配置される。
左右アイコンの位置は記事幅が1000pxならば
左アイコン = 左から200pxの位置
右アイコン = 右から200pxの位置

デフォルト
アウトラインのサイズ = 100% = 記事幅が600px以上の時は記事幅いっぱいまで拡がる。
アウトラインの中のアイコン+吹き出しの最大幅が600px
記事幅が1000pxならば
左アイコン = 左隅を基準に配置, アイコン+吹き出し = 左辺を基準にそこから600px
右アイコン = 右隅を基準に配置, アイコン+吹き出し = 右辺を基準にそこから600px

まずデフォルトのスクショと内緒さんの現在の状態を見比べて、どちらにしたいのかお返事をお願いします。
要するに最終的な見た目はどうしたんでしょうか。
わざわざデフォルトの横幅を変更している点から、現状の内緒さんの形がご希望なんですか?

一旦投稿。

2017/04/20 (Thu) 15:16 | EDIT | REPLY |   
Akira  
To 吹き出しカスタマイズの件 内緒さん③

アイコンを増やす手順

まずデフォルトのCSSソース

.b-left:after.b-right:after
双方の background:〜省略〜;
の一行を削除してください。

そして以下を追加
(クラス名は任意ですのでご自身が覚えやすく、テンプレ内の他要素と被らない名称を付けてください)

.aaa:after {
background: url(アドレス) center center /cover no-repeat;
}

.bbb:after {
background: url(アドレス) center center /cover no-repeat;
}

.ccc:after {
background: url(アドレス) center center /cover no-repeat;
}

.ddd:after {
background: url(アドレス) center center /cover no-repeat;
}

くれぐれもクラス名は任意ですので、ここでのaaaやらbbbはテキトーにつけてるだけです。
増やしたいだけ同じ法則で追加してください。

------- ここまでがCSS修正。
ここから記事内でのhtmlの書き方。

左右の別は

<div class="b-left-wrapper">
<div class="b-left">
左テキスト内容
</div>
</div>

赤字部分で指定してください。
左なら上記の通りですし、右ならrightに書き換えてください。
アイコンの指定は

<div class="b-left">

この中に

<div class="b-left aaa">

と、こうしてクラス名追加で振り分けを行ってください。
左右指定用のクラス名の後ろに半角スペースを入れてからアイコン指定用のクラス名を書きます。

======

ご質問2件については以上です。

別件で注意。

他の方のソース内容と私のソース内容とを混ぜないでください。
entry-contentのアウトラインは不要です。
要素を無駄に増やせば無駄に混乱するだけです。
よろしくお願いします。

2017/04/20 (Thu) 15:32 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 16:50 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 17:59 | EDIT | REPLY |   
Akira  
To 吹き出しアイコンの件 内緒さん

ソース内説明とコメント欄での私の説明をよくよくお読みください。

● 「.b-left:after と .b-right:afterを消せ」とは言っていません。「双方に含まれる「background: 内容;」の一行を削除」と言っています。

.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-left:after {
left: -100px; /* 注意1と同じ数値をマイナスで指定 */
}

.b-right:after {
right: -100px; /* 注意2と同じ数値をマイナスで指定 */
}

● 注1と注2の参照は

/* 注意1と同じ数値をマイナスで指定 */
/* 注意2と同じ数値をマイナスで指定 */

この部分です。

2017/04/20 (Thu) 18:15 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 19:22 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 19:28 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/20 (Thu) 23:08 | EDIT | REPLY |   
Akira  
To 吹き出しアイコンの件 内緒さん②

横幅の件は了解です。
現在の状態でOKということですね。

で、ごめんなさい。
クラス追加は

.aaa:after
.bbb:after

のようにクラス名の後ろに
:after
をつけてください。
(コメント内容、赤字にしておきました)
よろしくお願いします。

2017/04/21 (Fri) 14:52 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/22 (Sat) 15:14 | EDIT | REPLY |   
Akira  
To 吹き出しカスタマイズ完了の件 内緒さん

お出来になったようで安心しました(笑)
お疲れ様でした

2017/04/22 (Sat) 15:25 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/22 (Sat) 20:38 | EDIT | REPLY |   
Akira  
To pタグの件 内緒さん

> 吹き出しはPで挟んだほうがいいんでしょうか〜

いえ。挟む必要はありません。
入れ子は無駄に増やさない方が良いです。管理が大変になるだけですし。
pは「段落 paragraph」の定義ですが、会話をパラグラフとして定義する必要は無いと思います。

pタグというのはCSS初期値に上下marginが付いてます。
私のテンプレートではリセットでmarginを0にしていますが、何も指定が無ければ上下に比較的大きめな空白ができます。
それがデフォルトです。
リセットCSSを入れていないテンプレートに変更された時点で吹き出しの見た目が変わってしまいます。
そういった意味でもpタグは安易に使うタグではありません。
あくまでも「段落 = 別の段落と区別し、英語のGrammarを遵守して上下空白を付ける」という場合には利用すれば良いと思いますが。

2017/04/23 (Sun) 00:23 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/23 (Sun) 10:18 | EDIT | REPLY |   
Akira  
To Pタグの件 内緒さん②

> 改行まで、みんな<p> </p>でやって?ますがそれも基本的にはやらないほうがいいんですかね〜

いえ。pのmarginの用途はまさしくそのためです。
日本語はちょっとわかりませんが、英文というのはパラグラフ間に空白を設けるのがルールです。
英語で論文を書いたことがある方はご存知かと思います。
なのでパラグラフを意味するpタグには空白がデフォルトで付いてるわけです。

吹き出しを「段落」と定義したいという意図があるならば、内側の<div>を<p>に変更しても良いと思いますが、
吹き出しはそれそのものが定義よりもスタイリング重視ですよね。
なのでpタグに変更するのならば margin のリセットもそのpに対してダイレクトに記しておいた方が後々安心ですね (´・ω・`)
んー。でも、吹き出しにしている時点でpタグにこだわる必要はないと思います。
検索エンジン的には<p>になっていれば「段落なのね。ああそう。」
<div>になっていれば「一定のまとまりなのね。」
と解釈するだけです。
ただ、交互の会話がそのまま段落になることの方が稀じゃないかと思います。
言ってみれば

「おはよう」
「おはよう」
「よく眠れた?」
「うん」

これが全部で4段落とかちょっとおかしいと思う(笑)

2017/04/23 (Sun) 13:12 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/23 (Sun) 15:09 | EDIT | REPLY |   
Akira  
To brの件 内緒さん

ひとつ記事を書きました。
お暇な時にでも。

http://vanillaice000.blog.fc2.com/blog-entry-518.html

2017/04/23 (Sun) 18:14 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/25 (Tue) 16:24 | EDIT | REPLY |   
Akira  
To h2見出しの件 内緒さん

> なぜかh2見出しの三角の所に線が入ったりするんですがこれは何かテンプレが関係していますか〜

関係ありません (´・ω・`)
独自でカスタマイズをされていますので、そのCSS内容に起因しています。
テンプレートのデフォルトでは要素に直接スタイルを定義をするようなことは避けています。

例)
X
<h1>見出し</h1>

h1 {
text-align: center;
}

--- 私のテンプレでの定義はこちら
<h1 id="midashi">見出し</h1>

#midashi {
text-align: center;
}

角の部分に「線が入る」とはどういった意味でしょうか。
背景にしている斜線のことでしょうか。
ちょっとよくわかりませんが (´・ω・`)

2017/04/25 (Tue) 17:03 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/25 (Tue) 17:51 | EDIT | REPLY |   
Akira  
To h2見出しの件 内緒さん②

Google Chromeをお使いではないですか?
一言で言うと「Chromeのグリッチ」です。
absoluteで配置されている要素が画面幅が奇数だか偶数だか(忘れた。たぶん奇数)の時に1pxズレます。
結構長く続いてますがいまだ修正されず。

> 以前は線など入ったりはしなかった〜

たぶん気づいていなかっただけじゃないかと。
もう5年ぐらい継続中なので(笑)
私の方にもサンプルありますのでどうぞ ↓

http://blog-imgs-102.fc2.com/v/a/n/vanillaice000/2948r9weth.jpg

2017/04/25 (Tue) 17:56 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/25 (Tue) 17:58 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/25 (Tue) 18:01 | EDIT | REPLY |   
Akira  
To h2見出しの件 内緒さん③

> てことは1pxぐらいずらせば直る〜

いえ。直りません。
文字の高さは関係ありません。
その要素がabsoluteであるのかどうかです。問題は。
吹き出しボディの下辺と角の上辺が同じ位置だとこの症状が出ますので(1pxずれるからボディ下辺のボーダーが見えてしまう)、角の部分をtop: -15px;とか多めに重なるようにしておいて(z-indexはボディよりも下位に)するなどの処置するぐらいですかね。
でもそれやると吹き出しボディの下辺のボーダーがどのみち消せませんし。
ボーダー色を取り除くなどしないと。
この手のグリッチはユーザーの妥協でしか解決しません。

2017/04/25 (Tue) 18:11 | EDIT | REPLY |   
-  
管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2017/04/25 (Tue) 18:33 | EDIT | REPLY |   
Akira  
To h2見出しの件 内緒さん④

そうなんです。
地味にウザいんでいい加減直して欲しい(笑)

2017/04/25 (Tue) 23:42 | EDIT | REPLY |   

Leave a reply

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に必ずお読みください ↓
FC2テンプレート ご利用時のお願い
2017.8.8 本日より10日ほど留守にしますのでお返事遅れます。すみません