試行錯誤ページ150(+マルチセンテンス検証1)





☆試行錯誤ページ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 など)
 

 
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”でワク線も変えてみた。

文法の まとめ

 
 
 

lesson2 のポイント①

一番外側の枠を太線にして、木製ホワイトボード風にする

 

 

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


 
You are ~ . の文は『あなたは~です。』と訳します。

 

 

 
※ 短縮形は you’re


 
you are の短縮形は you’re [発音:ユ(ー)ア] という形になります。

※[ユア]という発音は、your「あなたの~」の発音と同じです。

you と re のあいだにある ‘(アポストロフィ)は 短縮形を作るときなどに使われます。
 

 

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

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

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

 

 

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


 
主語が I のときの『~です』には am 、

主語が you のときの『~です』には are を使います。
 

I am
you are

 

 

 
↓スマホだとこうなる

 

  
 

 

ダントツで木製ホワイトボードに

ダントツで木製ホワイトボードにしたがスマホだと画面からオーバーしてしまう

 

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


 
You are ~ . の文は『あなたは~です。』と訳します。

 

 

 
※ 短縮形は you’re


 
you are の短縮形は you’re [発音:ユ(ー)ア] という形になります。

※[ユア]という発音は、your「あなたの~」の発音と同じです。

you と re のあいだにある ‘(アポストロフィ)は 短縮形を作るときなどに使われます。
 

 

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

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

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

 

 

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


 
主語が I のときの『~です』には am 、

主語が you のときの『~です』には are を使います。
 

I am
you are

 

 

↓スマホだとこうなる


 

 

  
 

 

ダントツで黒板にしようとしたが

ダントツで黒板にしようとしたが、もっとくわしくの中身が白背景なのでおかしいし、スマホだと画面から飛び出す

 

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


 
You are ~ . の文は『あなたは~です。』と訳します。

 

 

 
※ 短縮形は you’re


 
you are の短縮形は you’re [発音:ユ(ー)ア] という形になります。

※[ユア]という発音は、your「あなたの~」の発音と同じです。

you と re のあいだにある ‘(アポストロフィ)は 短縮形を作るときなどに使われます。
 

 

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

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

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

 

 

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


 
主語が I のときの『~です』には am 、

主語が you のときの『~です』には are を使います。
 

I am
you are

 

 

 

 

  
 

 

 
 

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
進研ゼミは とても有名な 通信教育プログラムだよね。
3行目を書くと、このような配置になってしまう。

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

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

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

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

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

これは white →(ソースには shiro )

これは beige →(ソースには rakuda )

これは khaki →(ソースには khaki )

 
 

 
 
 

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

/*セリフ吹き出し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 )

 
 

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

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

 
ビー動詞は 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
その通りです。

 
 

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

.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;
}

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

スマホ(アンドロイドフォン)だと幅が狭いので、text-alignは何にしても同じようになるが、
PCだとleft, centerだと明らかにおかしい。


このように表示される

be動詞ってなんですか?
 
それと、関係代名詞って接続詞と代名詞の働きをするって聞いたことがあるんですが、どういう働きをするのか具体的に教えてもらえますか。 
text-align: rightだと長い文章の場合、へんな改行になってしまう。
 
chart-chat-fukidashiright
be動詞ってなんですか?
 
それと、関係代名詞って接続詞と代名詞の働きをするって聞いたことがあるんですが、どういう働きをするのか具体的に教えてもらえますか。 
これはtext-align: centerの設定にしてある。
 
chart-chat-fukidashiright
be動詞ってなんですか?
 
それと、関係代名詞って接続詞と代名詞の働きをするって聞いたことがあるんですが、どういう働きをするのか具体的に教えてもらえますか。 
これはtext-align: leftの設定にしてある。
 
chart-chat-fukidashiright
be動詞には am, are, is, was, were があります。
 
原形(もともとの形)が be なので be動詞といいます。
 
chart-chat-fukidashileft
mizu be動詞ってなんですか?
 
これはtext-align: rightの設定にしてある。
 
chart-chat-fukidashiright
midori be動詞ってなんですか?
 
これはtext-align: centerの設定にしてある。
 
chart-chat-fukidashiright
daidai be動詞ってなんですか?
 
これはtext-align: leftの設定にしてある。
 
chart-chat-fukidashiright
momo be動詞ってなんですか?
 
chart-chat-fukidashiright
komugi be動詞ってなんですか?
 
chart-chat-fukidashiright
shiro be動詞ってなんですか?
 
chart-chat-fukidashiright
rakuda be動詞ってなんですか?
 
chart-chat-fukidashiright
khaki be動詞ってなんですか?
 
chart-chat-fukidashiright

 
 
  
 
↓3mの初期バージョンを利用してversion2を作ろうとしたが、うまくいかなかった。
『【編集用】3Mイラスト吹き出し』にソースあり

red
イラスト付き吹き出し本文

 

red
イラスト付き吹き出し本文

 
 
 
 

吹き出し見出し
イラスト付き吹き出し本文
吹き出し見出し
イラスト付き吹き出し本文
吹き出し見出し
イラスト付き吹き出し本文
吹き出し見出し
イラスト付き吹き出し本文
吹き出し見出し
イラスト付き吹き出し本文
吹き出し見出し
イラスト付き吹き出し本文

色(color=)
•green
•blue
•gray
•purple
•red
•yellow
追加 white black (functions-shortcode.phpの560行目ぐらいと3586行目ぐらい(コード指定),
shortcode.phpの2910行目・・・背景色と周りの枠線色、と10968行目ぐらい・・・左右の△の色)
※ 背景色には、カラー背景を利用しているので、カラー背景のbg-〇〇-ltにも追記しなくてはいけない。

white
イラスト付き吹き出し本文
black
イラスト付き吹き出し本文
gold
イラスト付き吹き出し本文
silver
イラスト付き吹き出し本文
limegreen
イラスト付き吹き出し本文
skyblue
イラスト付き吹き出し本文
pink
イラスト付き吹き出し本文
darkorange
イラスト付き吹き出し本文

 

white
イラスト付き吹き出し本文
black
イラスト付き吹き出し本文
gold
イラスト付き吹き出し本文
silver
イラスト付き吹き出し本文
limegreen
イラスト付き吹き出し本文
skyblue
イラスト付き吹き出し本文
pink
イラスト付き吹き出し本文
darkorange
イラスト付き吹き出し本文

 
 

英単語帳ページが、PCで文字サイズ小さいので変更したいが、いろいろ試したがムリ。
(スマホでは2つ目、3つ目で、ページを開いたとき大きくなるが、肝心のPCではIE, Chromeともにダメ)

結局、#hpb-main の font-size を変更した。
 
#hpb-main
padding-top: 75px;
width: 630px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
text-align: left;
font-size: 130%; /* 英単語帳へのリンク文字をおおきくするために120%から変更 */

 
 
 
IEでは下線、矢印の位置がうまくいかないので、クローム推奨。
 
 
modoruyajirushi2使用。下線、もどる矢印はtable id=”myTBL90″ class=”eisakubuncellwidth80px(moji16px)”をに合うように作っている

modoruyajirushi2使用
『modoruyajirushi2使用』

A
small
dog
you
are
talking
to
now
is
mine
.
   
文法の解説に戻る

 
 
 
modoruyajirushi3使用。下線、もどる矢印はtable id=”myTBL100″ class=”eisakubuncellwidth90px(moji16px)”をに合うように作っている

modoruyajirushi3使用
『modoruyajirushi3使用』

A
small
dog
you
are
talking
to
now
is
mine
.
   
文法の解説に戻る

 
 
TBL100までしか作っていない。
そのため、大きいセルサイズでは以下のようになる。

table id=”myTBL110″ class=”eisakubuncellwidth100pxmoji16px”だと下線がずれる

modoruyajirushi2使用
『modoruyajirushi2使用』

A
small
dog
you
are
talking
to
now
is
mine
.
   
文法の解説に戻る

 
 
 
 
 
modoruyajirushi0,border-bottom:6px solid yellowgreen使用
border-radiusは下部のほうだけしか丸くならない
あの 泳いでいる 女の子
 
 
 
modoruyajirushi1,border-bottom:6px solid yellowgreen使用
border-radiusは下部のほうだけしか丸くならない
a cat liked by Tom
 
 
 
 
 
↓ text-decoration:underline wavyを使用 → 下に飛び出した文字 y の部分は消えてしまう。後半も長さが足りていない。
→ margin-top, padding-top, line-heightでも調整できない。

a cat liked by Tom
 
 
 
 
↓ wave-redの画像をrepeatしている。background-size: 20px →数字を小さくすると波線が細くなる。数字を大きくし過ぎると波線の一部しか表示されない。このコードを入れないときちんと波線が表示されない。

a cat liked by Tom

↑ 画像(2019/10/modoruyajirushi-150×101.png” alt=”” width=”15″ height=”10″)

※この下でも、いろいろ試したがスマホでは見づらくなってしまう。paddingやmarginを使っても調整不可
 
 
 
画像をbackground-size:20pxで使用している。
PCでは大丈夫だが、スマホでは文字と画像が重なり見づらくなってしまう。
 
class=”modoruyajirushi1、wave-orange使用(オレンジはPCで見づらい)
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red1使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red2使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red3(縦サイズ長く、波線位置下へ移動)使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red4(縦サイズ長く、波線位置下へ移動)使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red5(縦サイズ長く、波線位置下へ移動)使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red6(縦サイズ短く)使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red7(縦サイズ短く)使用
a cat liked by Tom
 
 
 
class=”modoruyajirushi1、wave-red8(縦サイズ最短)使用
a cat liked by Tom
 
 
 
 

2019/10/modoruyajirushi3画像使用。
left bottom 
a cat liked by Tom
 
2019/10/modoruyajirushi3 right bottom 
a cat liked by Tom
 
2019/10/modoruyajirushi3 left top 
a cat liked by Tom
 
2019/10/modoruyajirushi3 right top
a cat liked by Tom
 
 
 
2019/10/modoruyajirushi4画像使用
left bottom
a cat liked by Tom
 
2019/10/modoruyajirushi4 right bottom
a cat liked by Tom
 
2019/10/modoruyajirushi4 left top
a cat liked by Tom
 
2019/10/modoruyajirushi4 right top
a cat liked by Tom
 
 
 
 

 
 
 


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カス』ぐらいまでしか表示されず、わかりづらい
前もって文字を入れておくことができないようだ・・・。
 
 
 
_________________________
 
 

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

 

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

_______________________________________________________________
 
 
 

↓ウェブ全体検索(日本語)




↓ウェブ全体検索(英語)




↓自サイト内検索





 
 
 

 

 
青っぽい色はrgb(119, 195, 223) #00bfff

1. トマト

10. トマト

1. トマト

10. トマト

2~9は使わない

念のためソースはここから

.kakunintestmidashi2 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi2:before {
position: absolute;
content: ‘◆’;
font-size:21px;
bottom: 18px;
left: -10px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi2:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}
.kakunintestmidashi3 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi3:before {
position: absolute;
content: ‘◎’;
font-size:20px;
bottom: 17px;
left: -10px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi3:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi4 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi4:before {
position: absolute;
content: ‘●’;
font-size:20px;
bottom: 17px;
left: -10px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi4:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi5 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi5:before {
position: absolute;
content: ‘■’;
font-size:20px;
bottom: 17px;
left: -10px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi5:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi6 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi6:before {
position: absolute;
content: ‘★’;
font-size:20px;
bottom: 18px;
left: -10px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi6:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi7 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi7:before {
position: absolute;
content: ‘□’;
font-size:20px;
font-weight: bold;
bottom: 22px;
left: -11px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi7:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi8 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi8:before {
position: absolute;
content: ‘□’;
font-size:20px;
bottom: 16px;
left: -11px;
width: 0;
height: 0;
border: none;
}

.kakunintestmidashi8:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}

.kakunintestmidashi9 {
position: relative;
padding-left: 15px;
}

.kakunintestmidashi9:before {
position: absolute;
content: ”;
bottom: -3px;
left: -10px;
width: 0;
height: 0;
border: none;
border-left: solid 15px;
border-bottom: solid 15px;
}

.kakunintestmidashi9:after {
position: absolute;
content: ”;
bottom: -3px;
left: 5px;
width: 100%;
border-bottom: solid 3px;
}
ここまで

2. トマト

3. トマト

PC画面でレスポンシブだとすべてうまくいくが、Iphoneでは上の1,2,3しかきちんと表示されない。
(3は少し横にずれる)

4. トマト

5. トマト

6. トマト

7. トマト

8. トマト

9. トマト

10. トマト

11. トマト

 
 
 

 
 

 
ショートコード使用(試行錯誤ページ151は画像を使ったもの)
[] deco_bg image=”” width=””
[] /deco_bg
 
mini2holesfilebeigecover

1234567890
 
abcdefghijkl
 
mnopqrstuv
 
 

mini2holesfilebluecover

1234567890
 
abcdefghijkl
 
mnopqrstuv
 
 

mini2holesfilegoldcover

1234567890
 
abcdefghijkl
 
mnopqrstuv
 
 

4line1

1234567890abcdefghij
1234567890abcdefghij
 
あいうえおかきくけこさ

4line2

1234567890abcdefghij
1234567890abcdefghij
 
あいうえおかきくけこさ

4line3

1234567890abcdefghij
1234567890abcdefghij
 
あいうえおかきくけこさ

mini2holesfilegoldyoko

1234567890
abcdefghijkl
あいうえおか
 

mini2holesfilebeigeyoko

1234567890
abcdefghijkl
あいうえおか
 

mini2holesfileblueyoko

1234567890
abcdefghijkl
あいうえおか
 

mini2holesfilegold

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

mini2holesfilebeige

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

mini2holesfileblue

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

2holesfilegold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2holesfilebeige

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2holesfileblue

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

clipboard

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

clipboardsilverframe

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

clipboardgoldframe

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

miniclipboard

1234567890
abcdefghijklmno
あいうえおかきく
 

miniclipboardsilverframe

1234567890
abcdefghijklmno
あいうえおかきく
 

miniclipboardgoldframe

1234567890
abcdefghijklmno
あいうえおかきく
 

simpleline

1234567890abcdefghij
 
あいうえおかきくけこさ

simpleredline

1234567890abcdefghij
 
あいうえおかきくけこさ

simpleorangeline

1234567890abcdefghij
 
あいうえおかきくけこさ

simplegoldline

1234567890abcdefghij
 
あいうえおかきくけこさ

simplelightblueline

1234567890abcdefghij
 
あいうえおかきくけこさ

simpleyellowgreenline

1234567890abcdefghij
 
あいうえおかきくけこさ

notebookbluecover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyz

notebookorangecover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyz

notebookgoldcover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyz

mininotebookbluecover

1234567890abc
defghijklmnopqr
あいうえおかきく
けこさしすせそた
ちつてとなにぬね

mininotebookorangecover

1234567890abc
defghijklmnopqr
あいうえおかきく
けこさしすせそた
ちつてとなにぬね

mininotebookgoldcover

1234567890abc
defghijklmnopqr
あいうえおかきく
けこさしすせそた
ちつてとなにぬね

↓改良版の単語帳(css)は試行錯誤155にあり
tangocho

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tangocholightpink

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tangochogold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tangochowide

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tangochowidelightpink

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tangochowidegold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

↑改良版の単語帳(css)は試行錯誤155にあり

minitangocho

あいうえおか
 

minitangocholightpink

あいうえおか
 

minitangochogold

あいうえおか
 

 
div class=”tangochomidashiwhite1linewidth170

he is

div class=”tangochomidashiwhite2linewidth170

he is
a boy
you are tall

 
 
 
div class=”tangochomidashiwhite1linewidth190

he is

※div class=”tangochomidashiwhite2linewidth190 は無い
 
 
div class=”tangochomidashiwhite1linewidth200

 
div class=”tangochomidashiwhite2linewidth200

 
 
minitangochowide

あいうえおか
あいうえおか
あいうえおか
 

minitangochowidelightpink

1234567890
abcdefghijklm
あいうえおか
 

minitangochowidegold

1234567890
abcdefghijklm
あいうえおか
 

minitangochowidekadomaru

1234567890
abcdefghijklm
あいうえおか
 

corkframewhiteboard

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

woodroundframewhiteboard

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

tatekanban

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

minicorkframewhiteboard

1234567890abc
あいうえおかきく
 

miniwoodroundframewhiteboard

1234567890abc
あいうえおかきく
 

minitatekanban

1234567890abc
あいうえおかきく
 

whiteboard #c2c2c2

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardredframe #ed1c24

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardpinkframe #ffaec9

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardorangeframe #ff700e 

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardyellowframe #fff200

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardyellowgreenframe #b5e61d

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardbrownframe #b97a57

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardgoldframe #ffc90e

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardgreenframe #22b14c

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardlavenderframe #c8bfe7

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

whiteboardlightturquoiseframe #99e9ea

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

woodframeblackboard

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

woodframewhiteboard

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

miniwhiteboardredframe

1234567890abc
あいうえおかきく
 

miniwhiteboardpinkframe

第888問

 

miniwhiteboardorangeframe

1234567890abc
あいうえおかきく
 

miniwhiteboardyellowframe

1234567890abc
あいうえおかきく
 

miniwhiteboardyellowgreenframe

1234567890abc
あいうえおかきく
 

miniwhiteboardbrownframe

1234567890abc
あいうえおかきく
 

miniwhiteboardgoldframe

1234567890abc
あいうえおかきく
 

miniwhiteboardgreenframe

1234567890abc
あいうえおかきく
 

miniwhiteboardlavenderframe

1234567890abc
あいうえおかきく
 

miniwhiteboardlightturquoiseframe

1234567890abc
あいうえおかきく
 

minicorkboard

1234567890abc
あいうえおかきく
 

miniwoodframeblackboard

1234567890abc
あいうえおかきく
 

miniwoodframewhiteboard

1234567890abc
あいうえおかきく
 

miniwhiteboard

1234567890abc
あいうえおかきく
 

minigreenboard

1234567890abc
あいうえおかきく
 

widefilelightblue

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

widefilecraftzai

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

widefilegold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

miniwidefilelightblue

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

miniwidefilecraftzai

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

miniwidefilegold

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
すせそたちつ
 

2holesnotebook

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mini2holesnotebook

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
きくけこさし
すせそたちつ
 

mini2holesnotebookyoko

1234567890
abcdefghijklmn
 

noholesnotebook

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mininoholesnotebook

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
きくけこさし
すせそたちつ
 

mininoholesnotebookyoko

1234567890
abcdefghijklmn
 

6holesnotebook

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mini6holesnotebook

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
きくけこさし
すせそたちつ
 

mini6holesnotebookyoko

1234567890
abcdefghijklmn
 

2holespocketbook

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2holespocketbookgoldcover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2holespocketbookpinkcover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mini2holespocketbook

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

mini2holespocketbookgoldcover

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

mini2holespocketbookpinkcover

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

6holespocketbook

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

6holespocketbookgoldcover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

6holespocketbookorangecover

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mini6holespocketbook

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

mini6holespocketbookgoldcover

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

mini6holespocketbookorangecover

1234567890
abcdefghijkl
mnopqrstuv
あいうえおか
きくけこさし
 

shikishi

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

shikishigold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

shikishisaiseishi

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

minishikishi

1234567890
abcdefghijkl
mnopqrstuvwxyz
あいうえおか
きくけこさし
 

minishikishigold

1234567890
abcdefghijkl
mnopqrstuvwxyz
あいうえおか
きくけこさし
 

minishikishisaiseishi

1234567890
abcdefghijkl
mnopqrstuvwxyz
あいうえおか
きくけこさし
 

pictureframewhite

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

pictureframegold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

pictureframebrown

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

minipictureframewhite

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
 

minipictureframegold

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
 

minipictureframebrown

1234567890
abcdefghijkl
mnopqrstuvw
あいうえおか
 

noclippaper

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mininoclippaper

1234567890
abcdefghijkl
mnopqrstuvwx
あいうえおかき
 

clippaper

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

clippapergold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

clippaperlightblue

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

miniclippaper

1234567890
abcdefghijkl
mnopqrstuvwx
あいうえおかき
 

miniclippapergold

1234567890
abcdefghijkl
mnopqrstuvwx
あいうえおかき
 

miniclippaperlightblue

1234567890
abcdefghijkl
mnopqrstuvwx
あいうえおかき
 

trial

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

2colorsfileblue

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2colorsfilegold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

2colorsfileorange

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

widefileheadcovercraftzai

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

widefileheadcovergold

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

widefileheadcoverlightblue

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

mini2colorsfileblue

1234567890
abcdefghijkl
あいうえおか
さしすけそた
なにぬねのは
まみむめもや
 

mini2colorsfilegold

1234567890
abcdefghijkl
あいうえおか
さしすけそた
なにぬねのは
まみむめもや
 

mini2colorsfileorange

1234567890
abcdefghijkl
あいうえおか
さしすけそた
なにぬねのは
まみむめもや
 

minicanvas

1234567890abc
あいうえおかきく
さしすけそたちつ
なにぬねのはひふ
まみむめもやゆよ
 

minicanvasbeige

1234567890abc
あいうえおかきく
さしすけそたちつ
なにぬねのはひふ
まみむめもやゆよ
 

minicanvasgold

1234567890abc
あいうえおかきく
さしすけそたちつ
なにぬねのはひふ
まみむめもやゆよ
 

miniwidefileheadcovercraftzai

1234567890a
あいうえおかき
さしすけそたち
なにぬねのはひ
まみむめもやゆ
 

miniwidefileheadcovergold

1234567890a
あいうえおかき
さしすけそたち
なにぬねのはひ
まみむめもやゆ
 

miniwidefileheadcoverlightblue

1234567890a
あいうえおかき
さしすけそたち
なにぬねのはひ
まみむめもやゆ
 

↓この方法だと端末によって文字の表示位置が違うので、試行錯誤151(161にもある)を利用
mini2colorsfilebluemihiraki

メ モ
 

mini2colorsfilegoldmihiraki

メ モ
 

mini2colorsfileorangemihiraki

メ モ
 

mini2holespocketbookmihiraki

復 習
 

mini2holespocketbookgoldcovermihiraki

復 習
 

mini2holespocketbookpinkcovermihiraki

復 習
 

mini6holespocketbookmihiraki

確 認
 

mini6holespocketbookgoldcovermihiraki

確 認
 

mini6holespocketbookorangecovermihiraki

確 認
 

↑この方法だと端末によって文字の表示位置が違うので、試行錯誤151(161にもある)を利用
 

ココが良い・悪いかざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハかざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景かざりかざり背景かざりハイケイ飾り背景、かざり背景かざりハイケイ飾り背景イケイ飾り背景、かざり背景かざりハイケイ飾り背景.

↓iphone se の画面サイズ検証用
tangocho

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの(この部分までは枠内に入る)
 
 

↑ 『なにぬねの(この部分までは』までが枠内に入るように狭めるとiphone seのサイズ

tangochowide

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの(この部分は下の枠内に重なる)
 
 

↑ 『なにぬねの(この部分は下の』が下の枠線に重なるように狭めるとiphone seのサイズ

 
  
  
 
↓レスポンシブ対応せず↓

1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの


1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの1234567890abcdefghijklmnopqrstuvwxyzあいうえおかきくけこさしすせそたちつてとなにぬねの

↑レスポンシブ対応せず↑

/* サルワカ吹き出し レスポンシブ対応せず */
.balloon5 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}

.balloon5 .chatfaceicon5 {
float: left;
margin-right: -90px;
width: 80px;
}

.balloon5 .chatfaceicon5 img {
width: 100%;
height: auto;
border: solid 3px #FFE4B5;
border-radius: 50%;
}

.balloon5 .chatting5 {
width: 100%;
}

.says5 {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 23px;
border-radius: 12px;
background: #fff0c6;
}

.says5:after {
content: “”;
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #fff0c6;
}

.says5 p {
margin: 0;
padding: 0;
}

/* サルワカ吹き出し追記 ここから */
.balloon6 {
width: 100%;
margin: 1.5em 0;
overflow: hidden;
}

.balloon6 .chatfaceicon6 {
float: left;
margin-right: -90px;
width: 80px;
}

.balloon6 .chatfaceicon6 img {
width: 100%;
height: auto;
border: solid 3px #00FF00;
border-radius: 50%;
}

.balloon6 .chatting6 {
width: 100%;
}

.says6 {
display: inline-block;
position: relative;
margin: 5px 0 0 105px;
padding: 17px 23px;
border-radius: 12px;
background: #90EE90;
}

.says6:after {
content: “”;
display: inline-block;
position: absolute;
top: 18px;
left: -24px;
border: 12px solid transparent;
border-right: 12px solid #90EE90;
}

.says6 p {
margin: 0;
padding: 0;
}

ボタン 大(横幅いっぱい)

色(color=)
red
green
blue
orange(もともと#CF7616 ゴールドっぽいだったが、#FF8C00 ダークオレンジに変更した。)
black
functions-shortcode.php(120行目ごろ)、shortcode.php(3021行目ごろ)
 
 
↓追加版(btn_mとする、矢印は非表示とする、文字色を黒)

 
 
ボタン 小(文字数の幅に合わせる)

色(color=)
red
green
blue
orange(もともと#CF7616 ゴールドっぽいだったが、#FF8C00 ダークオレンジに変更した。)
black
↓追加(btn_s_plusとする、文字色を黒)

 
 

Refine Snow2: shortcode.phpで編集可能

囲みタイトル

lightpink

囲みタイトル

lightyellow

囲みタイトル

darkorange

囲みタイトル

wheat

囲みタイトル

lime

囲みタイトル

lightblue

囲みタイトル

blue

囲みタイトル

green

囲みタイトル

gray

囲みタイトル

ivory

囲みタイトル

mintcream

囲みタイトル

seashell

囲みタイトル

red

 1. lavenderblush ラベンダーブラシ

 2. lightyellow ライトイエロー

 3. aliceblue アリスブルー

 4. oldlace オールドレース

 5. cornsilk コーン・シルク

 6. lightcyan ライトシアン

 7. papayawhip パパイヤホイップ

 8. lemonchiffon レモンシフォン

 9. honeydew ハニーデュー

 10. antiquewhite アンティークホワイト

 

 1. seashell シーシェル

 1. floralwhite フローラルホワイト

 1. mintcream ミントクリーム

 1. ghostwhite ゴースト・ホワイト

 1. ivory アイボリー

 1. azure アザー

 1. aliceblue アリスブルー

 1. whitesmoke ホワイトスモーク

 1. beige ベージュ

 
↓3px

 1. lavenderblush ラベンダーブラシ

 2. lightyellow ライトイエロー

 3. aliceblue アリスブルー

 4. oldlace オールドレース

 5. cornsilk コーン・シルク

 6. lightcyan ライトシアン

 7. papayawhip パパイヤホイップ

 8. lemonchiffon レモンシフォン

 9. honeydew ハニーデュー

 10. antiquewhite アンティークホワイト

 ↓5px

 1. seashell シーシェル

 1. floralwhite フローラルホワイト

 1. mintcream ミントクリーム

 1. ghostwhite ゴースト・ホワイト

 1. ivory アイボリー

 1. azure アザー

 1. aliceblue アリスブルー

 1. whitesmoke ホワイトスモーク

 1. beige ベージュ

 

文字装飾いろいろ → http://eigoblock.net/shikousakugo161/
もともとのアドレスがhttp

https://eigoblock.net/shikousakugo161/
リンクのアドレスがhttp

https://eigoblock.net/shikousakugo161/
どちらもhttps

http://eigoblock.net/shikousakugo161/
どちらもhttp