試行錯誤ページ150 | 英語を無料で学べる『英語ブロック』

参考：so-zou.jp/web-app/tech/search-engine/google/site-search/custom-searchより
cofの値によって、下表のように広告が表示される位置が決定されます。
広告を表示する場所
FORID:9 右
FORID:10 上と右
FORID:11 上と下（これを使っている）
→開いた別ページがスクロールバーなしのページ（これは使わない）

↓使うならこれ（だが、編集しているのでアドセンスに絡めてると良くないかも）

『Googleカスタム検索のダサダサな検索Boxを好きなデザインにする方法』を参考に
（name=”cx” value=”partner-pub-861846138～:347193～”を使用）
検索窓の文字を変えて検索もできる。（が、fromで検索したら、of,to,aboutとかが出てくる）
人名で検索したらきちんと出てきた

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

↓アドセンスのページから作ったものも、結局同じもの
「検索向けAdSense」から作成したカスタム検索エンジンには、「partner-pub-」から始まるカスタム検索エンジンIDが付けられる

レイアウト『コンパクト』
※オーバーレイだと、スマホ画面いっぱいに出て、右上にバツ印がある。

スマホで検索窓が狭くなる（ショートコードの枠などに入っている）と、『Googleカス』ぐらいまでしか表示されず、わかりづらい
前もって文字を入れておくことができないようだ・・・。

検索窓の下に出る枠は、ワードプレスのテーマに依る？

↑使うならこれ

↓アドセンスではないページから作ったもの

↑ 検索結果が、この下（別ページに飛ばず）に表示される。
アドセンスと紐づけられる設定してある「partner-pub-」はついていない
スマホで検索窓が狭くなる（ショートコードの枠などに入っている）と、『Googleカス』ぐらいまでしか表示されず、わかりづらい
前もって文字を入れておくことができないようだ・・・。

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

↓ウェブ全体検索（英単語の意味使い方検索用）
検索すると、別ページに飛んで表示される。
アドセンスと紐づけられていない。
（このクエリの検索パフォーマンスというのが表示されていたが、なぜか表示されなくなった）

↑前もって文字を入れておくタイプを使うなら、これ

_______________________________________________________________

↓ウェブ全体検索（日本語）

↓ウェブ全体検索（英語）

↓自サイト（value=”eigoblock.net”）内検索

参考：https://www.web-officer.com/the-other/site-search-window-is-installed-or-to-a-search-of-the-entire-web.html
↓ウェブ全体検索（https://eigoblock.com/wordbook-をあらかじめ入れておいて、そのあとに調べたい英単語を入れる方式）

ある程度はうまくいくが、killではtroubleなどのPDFが検索結果の最初に来て、
eigoblock.com/word698(kill)には辿り着けない

↓自サイト(eigoblock.com)内での英単語検索・・・それなりにうまくいく

→これをホームページビルダーword1133を利用して入れてみた

フローティングメニュー（グーグル検索）を下部に固定(うまくできた)
https://eigoblock.com/word1133wordsearchbox1.html

閉じるボタンありのポップアップウィンドウをつけたいが失敗
（ビルダー内のプレビューだと表示されるがネットでは表示されない）
https://eigoblock.com/word1133wordsearchbox2.html

アイフレームでウェブ英単語帳を表示させる
（pcとスマホで画像幅を変えないと視覚的にイマイチになるので、width=”100%” height=”125″にした。）

→ iframewordsearch という下部ウィンドウ用のページを新しく作って対応

https://eigoblock.com/word1133wordsearchbox3.html

必要に応じて、下部ウィンドウを上に広げられるようにしたいが、
PCではマウスで広げられるが、スマホタップでは広げられないよう。
参考：https://www.nishishi.com/css/element-resize.html
参考：https://developer.mozilla.org/ja/docs/Web/CSS/resize

そのため、フレームを上下２分割にした。
☆フレーム内に表示　で作成
上フレーム：word1133wordsearchbox4.html
下フレーム：https://eigoblock.net/iframeword-search/#webtangochotop
を
https://eigoblock.com/jougeframepage1.htmlで表示させるシステム。rowの%を70%（上）,30%（下）にしてみた
↑フレームセットで作成になるが、によるフレーム分割は HTML5 で廃止された。

今後は、iframeで作る必要があるので、作ろうとしたが
https://eigoblock.com/jougeframepage2.html
ビルダーの仕様で、必ずframesetのコードが入ってしまう。

スマホタップではウィンドウ幅を変えられない。
jougeframepage1とほぼ同じで、rowの%を60%（上）,40%（下）にしてみた。
https://eigoblock.com/jougeframepage3.html

フレーム2分割を採用したが、スマホタップではサイズ変更できない。
word1133wordsearchbox4は２分割の上側用に作ったページ（ウェブ英単語帳へのリンクを無くした）
https://eigoblock.com/word1133wordsearchbox4.html

ボタンクリックで下部ウィンドウサイズを変更できるようにする。
https://eigoblock.com/word1133wordsearchbox5.html
ボタンクリックで下部ウィンドウ全体が上下させる。
→ウィンドウ幅を上下させるボタンと「↓英単語はここから探せます↓」の縦位置が揃わないので、
すべて画像で対応する
→その後、↓英単語はここから探せます↓の下の行に
1～5段階サイズ変更のボタンを入れることにした。

アイフォンでは、この下で見るのボタンを開いたとき、英単語のトップ部分になっていない。（狙った部分よりもかなり下の方になる）
pc（クローム、エッジ）、スマホ（アンドロイド）では狙い通りの位置になる。
↓ソースここから

単語帳ページ埋め込み　yard

単語帳ページ埋め込み　year

↑ソースここまで

※activeでボタン1px移動は
main_4Ab_2cwordsearchbox300.cssを編集しても
container_4Ab_2c_top.css 内を編集しても
user.css 内を編集してもできない。

ボタンホバー効果検証（５種類）
main_4Ab_2cwordsearchbox333.cssに各@media(max-width: )を入れてみたが、
1～5段階サイズ変更のボタンは3番目しか動かない（つまり111,222,のようにしなければならない）
https://eigoblock.com/word1133wordsearchbox6.html
↓6とほぼ同じ、1～5段階のボタンは3番目しか動かない
https://eigoblock.com/word1133wordsearchbox7.html

↓1～5段階ボタンで「英単語はこの下でも探せます」の文字を消す。
下部英単語帳ページを１カラム、１列の表にした。
lscとsscでは３列の表が右に飛び出してしまうため
https://eigoblock.com/word1133wordsearchbox8.html
※下部ページはhttps://eigoblock.net/iframeword-search/#webtangochotop”

ウェブ英単語帳のページを、コンテンツ幅で横３列と横１列の表示非表示を切り替える

yokohabaminwidth376 →PCで表示される

yokohabamaxwidth375 →スマホで表示される

classyokohabaminwidth376だと表の右に線が出る

lsc使用、スクリーン幅641px以上で表示

ssc使用、スクリーン幅640px以下で表示

width375pxで切り替わる lscver2, sscver2を作る

lscver2使用、スクリーン幅376px以上で表示

sscver2使用、スクリーン幅375px以下で表示

下部英単語帳ページをlscver2,sscver2を使って３列、１列のレスポンシヴの表にした。【ほぼ完成版】
https://eigoblock.com/word1133wordsearchbox9.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

上記９のソースを整理した完成版１だったが(下部ウィンドウをボタンをvertical-align:middleにすると、１にすると下に飛び出す)
https://eigoblock.com/word1133wordsearchbox10.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

上記９のソースを整理した完成版２(それぞれのcssにプラス25して、75/175/275/375/475)
https://eigoblock.com/word1133wordsearchbox11.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

上記９のソースを整理した完成版３(それぞれのcssにプラス75ずつにして、75/200/325/450/575)
https://eigoblock.com/word1133wordsearchbox12.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

上記12に文字サイズ変更ボタンを入れる
https://eigoblock.com/word1133wordsearchbox13.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

https://okumuralab.org/~okumura/javascript/changesize.html

上記12に文字サイズ変更ボタン(larger,120%)を入れる
https://eigoblock.com/word1133wordsearchbox14.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

↓clampを入れたが、効いているのかよくわからない
https://techblog.raccoon.ne.jp/archives/1617239525.html

container_4Ab_2c_topfontsize200percent.cssでフォントサイズ200％にしても
ビルダーでは文字大きくなるのに、実際のサイトは文字が大きくならない。
→https://gotohayato.com/content/531/
container_4Ab_2c_topfontsize200percent.cssにして
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
text-size-adjust: none;
font-size: 200%;を入れた。hpbでは巨大文字になるが、ブラウザでは巨大にならない
→bodyではなくて#hpb-mainに追記。それでもブラウザでは巨大にならない
→fontsizeを指定しているものは結局変わらない

上記12にフォントサイズをlarge,normalにして、larger,smallerならうまくいくか？
https://eigoblock.com/word1133wordsearchbox15.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

various ways（font-size:large）は大きくならない。
さまざまな方法（font-size:normal）は大きくなる。

小さく、大きくボタンは反応するが、フォント〇〇％が反応しなくなった

フォントサイズ指定を無くす検証
https://eigoblock.com/word4fontsizehenkou.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

上記13にcontainer_4Ab_2c_topmsonormal200percentを入れる
(class=msonormalを使って文字サイズ変更ができるか調べる)
https://eigoblock.com/word1133wordsearchbox16.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

https://www.tohoho-web.com/css/value/unset.htm
initial,unsetなど試したがダメ

フォントサイズに関するコードをすべて消す検証。
フォントサイズ、font-familyをcssで指定してみる
ファビコンも設定。
https://eigoblock.com/word1133wordsearchbox17.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

https://wiki.suikawiki.org/n/mso-%2A#gsc.tab=0
（↑mso-についての説明）

…三点リーダについても調べる（Times New Romanの有る無しは関係なし）
https://eigoblock.com/word260santenleader1.html

…三点リーダについても調べる（spanとaの順番を変える）
https://eigoblock.com/word260santenleader2.html

結論：span と a の順番によって変わる
※word1では spanではなくfont タブを使っている

フォントサイズ（●●pt）をcssで指定して、文字拡大縮小をうまくいくようにする。
https://eigoblock.com/word1133wordsearchbox18.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

フォントサイズ（●●%）をcssで指定して、段階的な文字拡大縮小をうまくいくようにする。
https://eigoblock.com/word1133wordsearchbox19.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

フォントサイズ（●●%）をcssで指定して、段階的な文字拡大縮小をうまくいくようにする。
https://eigoblock.com/word1133wordsearchbox20.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

完成版
https://eigoblock.com/word1133wordsearchbox21.html
※下部ページはhttps://eigoblock.net/word-search/#webtangochotop”

☆試行錯誤ページ515でパステルカラー検証

shikou150,151,152,153で別バージョン検証

I likeの部分の縦の大きさを合わせるためにpadding-topとpadding-bottomを入れているが、PCとスマホではサイズが変わってしまう。
↓スマホだとこうなる

I like

（私は～が好き）

music

（音楽）

math

（数学）

English

（英語）

　　

太字の下線です。

背景色です。

ポイント

you で聞かれたら I を使って答える

tegakiwakubox1

プラスα（アルファ）

「～のもの」と言いたいときはアポストロフィを使って、～’s と表現します。

例： Ken’s pencil 『ケンのえんぴつ』

（関連ページ）→ lesson12 … 所有格（my, your など）

your　pencil

tegakiwakubox2

手書き風の枠線1

手書き風の枠線2

underlinewaveredで波線

underlinewaveskyblueで波線

underlinewaveで波線

underlinewaveorangeで波線

underlinewavepurpleで波線

underlinewavesilverで波線

上げ調子の矢印は（span class=”agechoshi”）

または

下げ調子の矢印は（span class=”sagechoshi”）

またはを使う。

≪ You are ～ . ≫
「あなたは～です。」

※ 短縮形は you’re
→

… 主語が you のときの be動詞は are を使う。

→ミニ黒板を作った

文法のまとめ１

フセンのところを黒板風にした
（span class=”tape-minikokuban”）
div class=”tape8-box”でワク線も変えてみた。

文法のまとめ１

fukidashi

fukidashi mizu

fukidashi momo

fukidashi midori

fukidashi daidai

fukidashi shiro

fukidashi komugi

※20220904 カーキkhaki→うすきいろ#FFFFCCに変更した。（以下のバージョンも同様）

fukidashi usukiiro

fukidashi rakuda

人物は左側のみで

短いセリフは初期バージョン、長いセリフはversion2にしてみる

ビー動詞ってなんですか？

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

じゃあ　エイ（A）動詞とか、
シィー（C）動詞とかはないってことですね。

その通りです。

実際のパターンを想定した会話の特別バージョン
初期バージョンからversion4まで使う。
人物が右側にいるときの、version4で長いセリフにしてしまうとどうなるか
同様にversion3で短いセリフにしてしまうとどうなるか

本当は短いセリフを使うべきなのに、長いセリフを入れてしまうとどうなるか検証

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

わかりました。

その通りです。

実際のパターンを想定した会話
初期バージョンからversion4まで使う。
人物が右側にいるときは、短いセリフではversion4、
長いセリフではversion3(brか改行でひとかたまりを短くする)

ビー動詞ってなんですか？

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

じゃあ　エイ（A）動詞とか、
シィー（C）動詞とかはないってことですね。

その通りです。

最終(finalversion)バージョン

/*version4をfinalrightにする右側に人物、左側にセリフ、セリフ吹き出しvdeep*/
/* チャットレイアウト */
.chat-boxfinalright {
width: 100%;
height: auto;
overflow: hidden;
/*floatの解除*/
margin-bottom: 20px;
font-size:normal;
/*↑20210612追記した*/
}

.chat-facefinalright {
float: right;
margin-right: 0px;
}

.chat-facefinalright img {
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}

.chat-areafinalright {
width: auto;
float: right;
}

.chat-fukidashifinalright {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-right: 30px;
margin-top: 10px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chat-fukidashifinalright:after {
content: “”;
position: absolute;
top: 50%;
/* ↑もともとはtop: 50%; */
right: -10px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0px 10px 10px;
border-color: transparent transparent transparent #f2f2f2;
}

.chat-fukidashifinalright.mizu {
background-color: #D9F0FF;
}

.chat-fukidashifinalright.mizu:after {
border-color: transparent transparent transparent #D9F0FF;
}

.chat-fukidashifinalright.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chat-fukidashifinalright.midori:after {
border-color: transparent transparent transparent #bcffbc;
}

.chat-fukidashifinalright.daidai {
background-color: #fff0c6;
}

.chat-fukidashifinalright.daidai:after {
border-color: transparent transparent transparent #fff0c6;
}

.chat-fukidashifinalright.momo {
background-color: #FFE4E1;
}

.chat-fukidashifinalright.momo:after {
border-color: transparent transparent transparent #FFE4E1;
}

.chat-fukidashifinalright.shiro {
background-color: white;
}

.chat-fukidashifinalright.shiro:after {
border-color: transparent transparent transparent white;
}

.chat-fukidashifinalright.komugi {
background-color: wheat;
}

.chat-fukidashifinalright.komugi:after {
border-color: transparent transparent transparent wheat;
}

.chat-fukidashifinalright.rakuda {
background-color: beige;
}

.chat-fukidashifinalright.rakuda:after {
border-color: transparent transparent transparent beige;
}

.chat-fukidashifinalright.khaki {
background-color: khaki;
}

.chat-fukidashifinalright.khaki:after {
border-color: transparent transparent transparent khaki;
}

/* ↑追記ここまで↑ */

/*セリフ吹き出しvdeep 最終バージョン*/
/* チャットレイアウト */
.chat-boxfinalleft {
width: 100%;
height: auto;
overflow: hidden;
/*floatの解除*/
margin-bottom: 20px;
font-size:normal;
/*↑20210612追記した*/
}

.chat-facefinalleft {
float: left;
margin-right: -120px;
}

.chat-facefinalleft img {
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}

.chat-areafinalleft {
width: 100%;
float: right;
}

.chat-fukidashifinalleft {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 120px;
margin-top: 8px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chat-fukidashifinalleft:after {
content: “”;
position: absolute;
top: 50%;
/* ↑もともとはtop: 50%; */
left: -10px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #f2f2f2 transparent transparent;
}

.chat-fukidashifinalleft.mizu {
background-color: #D9F0FF;
}

.chat-fukidashifinalleft.mizu:after {
border-color: transparent #D9F0FF transparent transparent;
}

.chat-fukidashifinalleft.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chat-fukidashifinalleft.midori:after {
border-color: transparent #bcffbc transparent transparent;
}

.chat-fukidashifinalleft.daidai {
background-color: #fff0c6;
}

.chat-fukidashifinalleft.daidai:after {
border-color: transparent #fff0c6 transparent transparent;
}

.chat-fukidashifinalleft.momo {
background-color: #FFE4E1;
}

.chat-fukidashifinalleft.momo:after {
border-color: transparent #FFE4E1 transparent transparent;
}

.chat-fukidashifinalleft.shiro {
background-color: white;
}

.chat-fukidashifinalleft.shiro:after {
border-color: transparent white transparent transparent;
}

.chat-fukidashifinalleft.komugi {
background-color: wheat;
}

.chat-fukidashifinalleft.komugi:after {
border-color: transparent wheat transparent transparent;
}

.chat-fukidashifinalleft.rakuda {
background-color: beige;
}

.chat-fukidashifinalleft.rakuda:after {
border-color: transparent beige transparent transparent;
}

.chat-fukidashifinalleft.khaki {
background-color: khaki;
}

.chat-fukidashifinalleft.khaki:after {
border-color: transparent khaki transparent transparent;
}

/* ↑追記ここまで↑ */

finalleft（人物左側）と finalright（人物右側）を使う。

finalleft は、PCサイズでは人物は左側、右側にセリフ【初期バージョン】、スマホサイズでは人物の下にセリフ【version2】）

finalright はPCサイズでは人物は右側、左側にセリフ【version4】、スマホサイズでは人物の下にセリフ【version3】）

ビー動詞ってなんですか？

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

じゃあ　エイ（A）動詞とか、シィー（C）動詞とかはないってことですね。

その通りです。

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワンという実績もあるし。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワンという実績もあるし。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

version4（人物は左側、右側にセリフ）

/*version4 右側に人物、左側にセリフ、セリフ吹き出しvdeep*/
/* チャットレイアウト */
.chat-boxversion4 {
width: 100%;
height: auto;
overflow: hidden;
/*floatの解除*/
margin-bottom: 20px;
font-size:normal;
/*↑20210612追記した*/
}

.chat-faceversion4 {
float: right;
margin-right: 0px;
}

.chat-faceversion4 img {
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}

.chat-areaversion4 {
width: auto;
float: right;
}

.chat-fukidashiversion4 {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-right: 30px;
margin-top: 10px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chat-fukidashiversion4:after {
content: “”;
position: absolute;
top: 50%;
/* ↑もともとはtop: 50%; */
right: -10px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0px 10px 10px;
border-color: transparent transparent transparent #f2f2f2;
}

.chat-fukidashiversion4.mizu {
background-color: #D9F0FF;
}

.chat-fukidashiversion4.mizu:after {
border-color: transparent transparent transparent #D9F0FF;
}

.chat-fukidashiversion4.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chat-fukidashiversion4.midori:after {
border-color: transparent transparent transparent #bcffbc;
}

.chat-fukidashiversion4.daidai {
background-color: #fff0c6;
}

.chat-fukidashiversion4.daidai:after {
border-color: transparent transparent transparent #fff0c6;
}

.chat-fukidashiversion4.momo {
background-color: #FFE4E1;
}

.chat-fukidashiversion4.momo:after {
border-color: transparent transparent transparent #FFE4E1;
}

.chat-fukidashiversion4.shiro {
background-color: white;
}

.chat-fukidashiversion4.shiro:after {
border-color: transparent transparent transparent white;
}

.chat-fukidashiversion4.komugi {
background-color: wheat;
}

.chat-fukidashiversion4.komugi:after {
border-color: transparent transparent transparent wheat;
}

.chat-fukidashiversion4.rakuda {
background-color: beige;
}

.chat-fukidashiversion4.rakuda:after {
border-color: transparent transparent transparent beige;
}

.chat-fukidashiversion4.khaki {
background-color: khaki;
}

.chat-fukidashiversion4.khaki:after {
border-color: transparent transparent transparent khaki;
}

/* ↑追記ここまで↑ */

枠が狭いとセリフが縦長になってしまう

ひとかたまりが長いセリフだと、人物の下に吹き出しが移動してしまう。

ブランクbrを入れたり、改行したりすればOK

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
３行目を書くと、このような配置になってしまう。

midori
進研ゼミはとても有名な
通信教育プログラムだよね。
ブランクbrを入れてある。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）
悩んでいるんですが

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

バージョン３（スマホで見やすくするためセリフを人物の下にして、右側の人物ありにした。）

/*セリフ吹き出しversion3（右寄り） vdeep*/
/* チャットレイアウト */
.chat-boxversion3 {
width: 100%;
height: auto;
overflow: hidden;
/*floatの解除*/
margin-bottom: 20px;
font-size:normal;
/*↑20210612追記した*/
}

.chat-faceversion3 {
float: right;
margin-right: 0px;
}

.chat-faceversion3 img {
border-radius: 30px;
border: 1px solid #ccc;
box-shadow: 0 0 4px #ddd;
}

.chat-areaversion3 {
width:auto;
/*↑100%だと左寄り、0%だと右寄り、30%などだと右の方に寄るが、うまくいかない。autoだと長いセリフの右側が飛び出してしまう。100%でも長いセリフが右側に飛び出す。60%から10%の間の数値では飛び出さない。ひとかたまりの語が長いと色のついた大枠の右側が直線になる*/
float: right;
}

.chat-fukidashiversion3 {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
/*↑セリフの右寄り位置調整*/
margin-top: 108px;
margin-right:-90px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
/*↓ margin:0 0 20px;を入れると長いセリフが右に飛び出さなくなる（上　左右　下　の順）が、短いセリフの位置がおかしくなる*/
}

/* ↓追記↓ */
.chat-fukidashiversion3:after {
content: “”;
position: absolute;
top: 65px;
/* ↑もともとはtop: 50%; */
right: 33px;
/* ↑セリフ上部の三角位置調整 */
margin-top: -85px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent #f2f2f2 transparent;
}

.chat-fukidashiversion3.mizu {
background-color: #D9F0FF;
}

.chat-fukidashiversion3.mizu:after {
border-color: transparent transparent #D9F0FF transparent;
top:65px;
}

.chat-fukidashiversion3.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chat-fukidashiversion3.midori:after {
border-color: transparent transparent #bcffbc transparent;
top:65px;
}

.chat-fukidashiversion3.daidai {
background-color: #fff0c6;
}

.chat-fukidashiversion3.daidai:after {
border-color: transparent transparent #fff0c6 transparent;
top:65px;
}

.chat-fukidashiversion3.momo {
background-color: #FFE4E1;
}

.chat-fukidashiversion3.momo:after {
border-color: transparent transparent #FFE4E1 transparent;
top:65px;
}

.chat-fukidashiversion3.shiro {
background-color: white;
}

.chat-fukidashiversion3.shiro:after {
border-color: transparent white transparent transparent;
top:65px;
}

.chat-fukidashiversion3.komugi {
background-color: wheat;
}

.chat-fukidashiversion3.komugi:after {
border-color: transparent transparent wheat transparent;
top:65px;
}

.chat-fukidashiversion3.rakuda {
background-color: beige;
}

.chat-fukidashiversion3.rakuda:after {
border-color: transparent transparent beige transparent;
top:65px;
}

.chat-fukidashiversion3.khaki {
background-color: khaki;
}

.chat-fukidashiversion3.khaki:after {
border-color: transparent transparent khaki transparent;
top:65px;
}
/* ↑追記ここまで↑ */

→セリフの長い灰色と緑色の右側が飛び出してしまう
→ margin:0 0 20pxを入れると、長いセリフが右に飛び出さなくなる（上　左右　下　の順）が、短いセリフの位置がおかしくなる。

be動詞ってなんですか？

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワンという実績もあるし。

midori
進研ゼミはとても有名な
通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワン
という実績もあるし。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

バージョン２（スマホで見やすくするためセリフを人物の下にして、左側の人物だけ。）

ビー動詞ってなんですか？

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

じゃあ　エイ（A）動詞とか、
シィー（C）動詞とかはないってことですね。

その通りです。

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワンという実績もあるし。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

初期バージョン（人物は左側、右側にセリフ）

枠が狭いとセリフが縦長になってしまう

ビー動詞ってなんですか？

ビー動詞は be動詞と書きます。

be動詞には am, are, is, was, were があります。

原形（もともとの形）が be なので be動詞といいます。

じゃあ　エイ（A）動詞とか、
シィー（C）動詞とかはないってことですね。

その通りです。

色なしだと灰色（f2f2f2）悩んでいるんですが

mizu 悩んでいるんですが

midori
進研ゼミはとても有名な通信教育プログラムだよね。
なんといっても、中学生の利用者数ナンバーワンという実績もあるし。

daidai その通り。
ぼくもおすすめします。

momo その通り。
わしもおすすめします。

これは wheat →（ソースには komugi ）悩んでいるんですが

これは white →（ソースには shiro ）

これは beige →（ソースには rakuda ）

これは khaki →（ソースには khaki ）

↓ 特殊な形の表に入っている（ソースもこの下に）

結論としては、右側の人物が短いセリフのときはtext-align: rightで良い。
長い文章のときは、text-align: leftにしないと、変な改行の仕方になってしまう。

実際のパターンを想定した会話
表に入っている
人物右側の短いセリフ（text-align:right）と、長いセリフ（text-align:left）で表示位置が変わってしまう。
→cssで長いセリフの位置調整（例 margin-left:22px;）もできるが、今度はスマホでおかしくなる。

be動詞ってなんですか？ chart-chat-fukidashiright
	be動詞には am, are, is, was, were があります。原形（もともとの形）が be なので be動詞といいます。 chart-chat-fukidashileft text-align: left
じゃあ　エイ（A）動詞とか、シィー（C）動詞とかはないってことですね。 chart-chat-fukidashiright text-align:left
	その通りです。

/* 会話を表に入れる、左側に人物 */

.chart-chat-fukidashileft {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 0px;
margin-top: 0px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chart-chat-fukidashileft:after {
content: “”;
position: absolute;
top: 50%;
/* ↑もともとはtop: 50%; */
left: -10px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 0;
border-color: transparent #f2f2f2 transparent transparent;
}

.chart-chat-fukidashileft.mizu {
background-color: #D9F0FF;
}

.chart-chat-fukidashileft.mizu:after {
border-color: transparent #D9F0FF transparent transparent;
}

.chart-chat-fukidashileft.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chart-chat-fukidashileft.midori:after {
border-color: transparent #bcffbc transparent transparent;
}

.chart-chat-fukidashileft.daidai {
background-color: #fff0c6;
}

.chart-chat-fukidashileft.daidai:after {
border-color: transparent #fff0c6 transparent transparent;
}

.chart-chat-fukidashileft.momo {
background-color: #FFE4E1;
}

.chart-chat-fukidashileft.momo:after {
border-color: transparent #FFE4E1 transparent transparent;
}

.chart-chat-fukidashileft.shiro {
background-color: white;
}

.chart-chat-fukidashileft.shiro:after {
border-color: transparent white transparent transparent;
}

.chart-chat-fukidashileft.komugi {
background-color: wheat;
}

.chart-chat-fukidashileft.komugi:after {
border-color: transparent wheat transparent transparent;
}

.chart-chat-fukidashileft.rakuda {
background-color: beige;
}

.chart-chat-fukidashileft.rakuda:after {
border-color: transparent beige transparent transparent;
}

.chart-chat-fukidashileft.khaki {
background-color: khaki;
}

.chart-chat-fukidashileft.khaki:after {
border-color: transparent khaki transparent transparent;
}

/* ↑追記ここまで↑ */

/* 会話を表に入れる、右側に人物 */

.chart-chat-fukidashiright {
display: inline-block;
/*コメントの文字数に合わせて可変*/
padding: 15px 20px;
margin-left: 0px;
margin-top: 0px;
/* border: 1px solid gray; ←削除 */
border-radius: 10px;
position: relative;
/*追記*/
background-color: #f2f2f2;
}

/* ↓追記↓ */
.chart-chat-fukidashiright:after {
content: “”;
position: absolute;
top: 50%;
/* ↑もともとはtop: 50%; */
right: -20px;
margin-top: -10px;
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #f2f2f2;
}

.chart-chat-fukidashiright.mizu {
background-color: #D9F0FF;
}

.chart-chat-fukidashiright.mizu:after {
border-color: transparent transparent transparent #D9F0FF;
}

.chart-chat-fukidashiright.midori {
background-color: #bcffbc;
/*↑もともと #BCF5A9だったが、やや濃いので変更した。その後に薄めの#bcffbcにした。（ラインで使われている#00B900は濃すぎ）*/
}

.chart-chat-fukidashiright.midori:after {
border-color: transparent transparent transparent #bcffbc;
}

.chart-chat-fukidashiright.daidai {
background-color: #fff0c6;
}

.chart-chat-fukidashiright.daidai:after {
border-color: transparent transparent transparent #fff0c6;
}

.chart-chat-fukidashiright.momo {
background-color: #FFE4E1;
}

.chart-chat-fukidashiright.momo:after {
border-color: transparent transparent transparent #FFE4E1;
}

.chart-chat-fukidashiright.shiro {
background-color: white;
}

.chart-chat-fukidashiright.shiro:after {
border-color: transparent transparent transparent white;
}

.chart-chat-fukidashiright.komugi {
background-color: wheat;
}

.chart-chat-fukidashiright.komugi:after {
border-color: transparent transparent transparent wheat;
}

.chart-chat-fukidashiright.rakuda {
background-color: beige;
}

.chart-chat-fukidashiright.rakuda:after {
border-color: transparent transparent transparent beige;
}

.chart-chat-fukidashiright.khaki {
background-color: khaki;
}

.chart-chat-fukidashiright.khaki:after {
border-color: transparent transparent transparent khaki;
}

/* ↑追記ここまで↑ */

表内に入っている

画像のalignをright, center, leftにしているが、変化なし。

人物右側の短いセリフ（text-align:right）と、長いセリフ（text-align:left）で表示位置が変わってしまう。

be動詞ってなんですか？ chart-chat-fukidashiright
be動詞ってなんですか？ chart-chat-fukidashiright text-align: center
be動詞ってなんですか？ chart-chat-fukidashiright text-align:left
	be動詞には am, are, is, was, were があります。原形（もともとの形）が be なので be動詞といいます。 chart-chat-fukidashileft text-align: left
	be動詞には am, are, is, was, were があります。原形（もともとの形）が be なので be動詞といいます。 chart-chat-fukidashileft text-align: left
	be動詞には am, are, is, was, were があります。原形（もともとの形）が be なので be動詞といいます。 chart-chat-fukidashileft text-align: left
じゃあ　エイ（A）動詞とか、シィー（C）動詞とかはないってことですね。 chart-chat-fukidashiright
じゃあ　エイ（A）動詞とか、シィー（C）動詞とかはないってことですね。 chart-chat-fukidashiright text-align: center
じゃあ　エイ（A）動詞とか、シィー（C）動詞とかはないってことですね。 chart-chat-fukidashiright text-align:left
	その通りです。