吹き出し枠を使わない会話形式
2019年10月18日
吹き出し枠を使って会話形式で記事を作ってみたいけど、CSS（スタイルシート）にするにはちょっと面倒だし分からないからあきらめたって方向けの会話形式での記事の作成方法です。
CSSは使いませんがそれでもHTMLは使います。コピペすればできるようにしますので、よろしかったらご利用ください。
HTMLでタグを使ってやりますので、そんなに細かくはできませんが、いろいろ対処方法も書いておきます。基本だけコピペして使えるようにしますので、会話数に応じて貼り付け回数を増やせばよいだけです。
◇◇◇◇◇
今回、久しぶりにぼくたちの出番がやってきましたね。ぼくちょっと興奮していますし緊張もしているんですよ。金鳥は蚊取り線香～っなんちゃって、あはははは・・・
あらら、ちょっとへじさん。この程度の端役の半端仕事なんかで喜び勇んで興奮するってちょっとおかしいんじゃいの。よっぽど売れないタレントみたいじゃないの？（パタパタ、ぬりぬり）
そんなことを言ってれい子さんこそ、久しぶりの出演でその厚化粧ちょっと凄すぎませんか。化粧そんなに強くしなくっても元々おきれいなんですから、化粧がれいこさんの地の美しさを邪魔している感じさえしますよ、本当に。ぼく、れいこさんのファンなんですからね。そこのところよろしくお願いします。
あらへじさん、まあかわいいこと言ってくれるじゃないの？
※ここでセリフが少ない時に行が上になるとちょっと不自然な感じがするかもしれませんね。この時は改行しましょう。
ここに改行を入れた
あらへじさん、まあかわいいこと言ってくれるじゃないの？
どうですか？
そう、ぼくは生まれつき可愛いのですよう♡
※セリフが短くて遠くに行っちゃってますね。この時はスペースで対応しましょう。最初に文字列を改行で下げ、それからスペースです。スペースは入れ過ぎるとプレビューで崩れますので注意です。
そう、ぼくは生まれつき可愛いのですよう♡
※スペースによる文字の右移動はブラウザ表示サイズやアクセス末端により表示面積が変わると表示が崩れることがありますので、プレビューで確認しつつ調整ください。この場合は右揃えにしておくといいです。
どうですかこんな形の会話形式。かえってセリフ枠がないのですっきりした感があっていいかもしれないですね。すみません、何でも自画自賛タイプなので、ここで褒めてねｗ
ぼくは、吹き出しを使わないで会話形式で記事を書くと吹き出し枠がないので、吹き出しがあるとどうしてもコミック的な感じがしてしまうけど、これなら大人っぽい雰囲気な記事になってぼくはとても良いと思うのですけど、この点でこの形式はれい子さんにとってはどう思いますか。良かったられい子さんお考えを聞かせてくれると嬉しいです。よろしくお願いしたいと思いますので、どうかよろしくお願いされてくださいとお願い申し上げます。
あらまあへじさんもちょっと見ない間にうんと大人びた感じの意見が言えるようになったみたいじゃないの。へじさんの成長ぶりったら目をみはるばかりだわね。
そうねえ、吹き出しがあると枠があるので見やすいってのもあるのだけど、確かにへじさんの言うようにコミックぽい感じは否めないかしれないわね。でも、枠ありも枠なしもどちらもその時の雰囲気で使い分けるとよろしいのじゃないかしらと思うのよ。
◇◇◇◇◇
CSSを使わないので一度HTML編集で会話形式を作っておけば、［編集見たまま］で記事の作成でHTML会話形式部分をコピペで使えるのが便利です。CSSはプレビュー表示しないと会話形式が表示されないので、［編集見たまま］で記事作成中にちょっと不安感があります。
それではこちらのHTMLソースをいかに記載しますのでコピペして使ってください。画像はこのここで使用したアイコンを使っても構いませんし、ご自分で用意したアイコンを使っても構いません。
画像左・セリフ右用
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/i-shizukichi/20190823/20190823175656.jpg" align="left" hspace="20" />あらら、ちょっとへじさん。この程度の端役の半端仕事なんかで喜び勇んで興奮するってちょっとおかしいんじゃいの。よっぽど売れないタレントみたいじゃないの？（パタパタ、ぬりぬり）</p>
画像右・セリフ左用
<p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/i-shizukichi/20190823/20190823175702.jpg" align="right" hspace="20" /></p>
<p>今回、久しぶりにぼくたちの出番がやってきましたね。ぼくちょっと興奮していますし緊張もしているんですよ。金鳥は蚊取り線香～っなんちゃって、あはははは・・・</p>
HITML会話形式簡単解説
ここの例では【<img src="https://】と[ img ］タブで Hatena fotolife から画像を呼び出していますが、記事編集時の右ペインにある画像の貼り付けから画像を貼り付けて使って構いません。
その場合は貼り付けた画像の記述で【＊＊＊＊.jpg”】の[. jpg”】 を見つけてその後ろに左用は【 align="left" hspace="20″】を、右用は【 align="right" hspace="20"】を貼り付けてください。以上が出来たらあとは［編集見たまま］での記事作成になります。
【 hspace="20"】の意味は画像と文字がくっつかないように画像の周りに20ピクセルの空間を作るためのものです。この数値を変えることによって、画像の周りの空間を広くなったり狭くなったりさせることが出来ます。
この画像配置方法は当然ですが、画像の表示位置に左（デフォルト）・中央・右揃えと変化をつけることが出来ます。【 align="center" 】で中央揃えです。
◇◇◇◇◇
画像を呼び出して使う場合
今回この記事はほおずきれいこさんに【Hatena Blogger 連携掲示板】で質問をいただいて作成していますので、画像の呼び出しを実際にやってみましょう。
【<img src="https://cdn-ak.f.st-hatena.com/images/fotolife/i/i-shizukichi/20190823/20190823175656.jpg" align="left" hspace="20" />】
上記HTMLタグの赤い部分を呼び出したURLに変えてみます。
【<img src="https://cdn.profile-image.st-hatena.com/users/hoozukireiko/profile.png?1552732954" align="left" hspace="20" />】呼び出した画像に変えました。さあこれをHTML編集で貼り付けてみましょう。
わあ、私がもへじさんのブログに出演している。
どうしちゃったんだろう？
きゃ、わたしがこっち側にも…
ほおずきれいこさんのアイコンを勝手に借用出演させちゃいましたけど、こういうことも出来ます。
これはほおずきれいこさんのアイコンはほおずきれいこさんのブログにあるアイコンをリンクで呼び出して表示しているだけで、私のブログの中にはこの画像はどこにも保存されていません。
で、こうやって他人の著作物の画像をIMGタグを使って呼び出して使うのって、本来はすすめられないことです。やって良いのは相手から許諾を受けた場合のみです。なのでほおずきれいこさん事後承諾でよろしくお願いします。注意を受けましたら、即削除いたしますのでご遠慮なくどうぞ。
余計なことかもしれないけど、タコスカさんもこの形式にしたら記事がより面白くなるかもしれないけど、いや、やっぱりそうでないかもしれない。ID召喚はしませんけど…
久しぶりの召喚出演だったけど、やっぱりブログに出演させてもらえるのってうれしいわねえへじさん。
れい子さんさっきからそのヘじさんって誰ですか？
ぼくは龍之介という名前ですよ。
あら、そうだったのじゃあ龍ちゃんね。
って、あなただって私のことれい子って、
私は瑠璃子っていうのよっ！
◇◇◇◇◇
CM
