【図説】吹き出しで会話形式にチャレンジ（携帯画面表示の説明付き）

先日発表した新企画の「情熱中国」。栄えある1回目のゲストは「axin＠上海」さん。

その中でインタビュー形式のカラーを前面に出そうと、htmlで吹き出しに挑戦。

「私も会話形式の吹き出しをやりたい！」と思ってくださった方が、いらっしゃるかも

という“妄想”を膨らませ、復習も兼ねて少し記載しておきたいと思う。

参考HP

• 吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】
• はてなブログで使える会話風吹き出し導入と簡単なカスタム方法を記載するよ

確かにいろんな方がブログでご説明されていらっしゃるが、専門的な言葉を使われたり

あるいは「知っているだろう」という前提で話されているものも多かったため、

「見ただけでできる！」というような記事を、書いてみようと思う。

そこで「はてなブログ」の場合と言うことになるが、手順をできるだけ挿絵を使い

ご説明したいと思う。

またパソコン表示編の後に、携帯表示編も記載しているので、ご参考になれば幸いである。

パソコン、iPad画面　表示編

１．CSSをメモ帳にコピーペーストする

１）スタート画面　⇒　アクセサリ　⇒　メモ帳。

２）下記の点線枠にあるCCSをコピー。（CSSの説明はこちら）

/* 吹き出しのCSS　*/
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 20px;
border-radius: 6px;
border: 2px solid #999;
box-shadow: 1px 1px 5px #aaa;
background-color: #fff;
z-index: 1;
}
.entry-content .l-fuki {
margin: 20px 20% 40px 0;
}
.entry-content .r-fuki {
margin: 20px 0 40px 19%;
}
.entry-content .l-fuki::before,
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 10px;
height: 10px;
border-right: 2px solid #999;
border-bottom: 2px solid #999;
background-color: #fff;
z-index: 2;
}
.entry-content .l-fuki::before {
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 80px;
height: 80px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
box-shadow: 1px 1px 5px #aaa;
}
.entry-content .l-fuki::after {
right: -110px;
}
.entry-content .r-fuki::after {
left: -110px;
}
@media screen and (max-width: 620px) {
.entry-content .l-fuki,
.entry-content .r-fuki {
width: 70%
}
.entry-content .l-fuki {
margin-right: 30%;
}
.entry-content .r-fuki {
margin-left: 30%;
}
}
@media screen and (max-width: 478px) {
.entry-content .l-fuki::after,
.entry-content .r-fuki::after {
width: 60px;
height: 60px;
border-radius: 30px;
}
.entry-content .l-fuki::after {
right: -84px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}
.名前::after {background-image:url(画像のURL);}
.名前::after {background-image:url(画像のURL);}

３）メモ帳にペーストする。

４）メモ帳はこの後も使うため、「名前を付けて保存」（※注意：万が一のために保存しておくと便利）。

２．吹き出しの人物写真のURLを取得する

１）吹き出しの人物写真で使いたい画像を選択。

２）「記事を書く」をクリックし、新規画面に張り付ける。

３）「HTML編集」の画面に切り替える。

４）画面内の赤線「https://cdn-ak.f.st…...62057.jpg」をコピーする。（※注意：必ずjpgまでコピー。“　”はコピーしないこと）

５）コピー後、先程のメモ帳の下から2番目の行「画像のURL」にペースト。（※注意：「画像のURL」の文字は消去する）

６）行の先頭にある「名前」を、画像名に変更する。今回はちゃーちゃんの「cha」。（※注意：使用できる文字は半角の英数字、ハイフン（ – ）、アンダーバー（ _ ）で、アルファベットで始めること。数字や記号での開始はNG）

７）最終行は会話相手の情報のため、相手の画像を選び、この第2章の作業を繰り返す。（※注意：画像によっては最後が「png」で終わるものもある）

８）最終行の先頭「名前」も、相手の名前など分かりやすいものに変更。今回は「axin＠上海」さんだったので、axin。

９）ちなみに人数はいくらでも増やすことが可能。

10）ここまでできたら、「保存」。

３．CSSを画面に入力

１）「デザイン」の画面を呼び出す。

２）赤矢印の「カスタマイズ（工具のアイコン）」の中の「｛｝デザインCSS」をクリック。

　　

 ３）「｛｝デザインCSS」の部分に、先ほどメモ帳に保存したCSSをペースト。

４）「変更を保存する」のボタンをクリックして、保存する。

４．記事を書く

１）「記事を書く」から画面を開き、ブログ記事を書く。

２）「HTML編集」画面に切り替える。

３）吹き出しのHMLTを入力する。

画像・左側、吹き出し・右側　⇒　<p class="r-fuki 名前">　

画像・右側、吹き出し・左側　⇒    <p class="l-fuki 名前">　

今回の私のブログの場合を例にしてみると、

• 私（ちゃーちゃん）   ⇒　画像・左側、吹き出し・右側
• 「axin＠上海」さん　⇒ 　画像・右側、吹き出し・左側

そのため、今回は私（ちゃーちゃん）が<p class="r-fuki cha">、「axin@上海」さんが

<p class="l-fuki axin">となる

つまり画面上では

文頭部分を拡大すると

４）「編集 見たまま」画面に戻る。（※注意：この画面では吹き出しはまだ見られない。先ほどの画面から変化がないよう見える）

 ５）「下書きを更新する」ボタンを押して、下書きを保存する。

６）「プレビュー」ボタンを押して、プレビューURLを取得する。

７）プレビューURLをコピー

８）取得したプレビューURLを入力して、会話形式になっているか確認する。

９）出来上がり！　おめでとうございます！！！

---

実は、パソコンやiPadのような画面の大きいものは、ここまでで完成だが、

携帯電話のような小さな画面のものは、表示スペースが小さいために

この会話形式が表示されず、文字だけが表示されてしまう。

これではせっかく作った会話形式も水の泡。

そのため今回はその解決法も、併せて記載しておきたいと思う。

携帯画面　表示編

１．CSSを携帯用の画面に入力

１）前提として「はてなブログPro」であること。そしてすでに先程パソコン画面表示編が完成していること。

２）「デザイン」の画面を呼び出す。

３）赤矢印の「スマートフォン（携帯のアイコン）」の中の「ヘッダ」をクリック。（※注意：「ヘッダ」を利用できるサービスは、はてなブログProへの申し込みが条件）

４）「ヘッダ」画面内の「スマートフォン用にHTMLを設定する」にチェックを入れる

５）<p>...</p>と書いてある欄にカーソルを持っていく

６）画面が入力画面に変わる

７）CSSである事を命令する、HTMLを入力する。  

<style type="text/css">

</style>

この欄はHTMLを入力する欄であるため、直接CSSを入力しても反応してはくれない。

そのためCSSであることを知らせる、HTMLを入力する。

８）７）のHTMLを入力後、<style type="text/css">と、</style>の間に「メモ帳」に保存したCSSコードを入力。

もし保存をされていない場合は、赤矢印の「カスタマイズ（工具のアイコン）」の中の「｛｝デザインCSS」で入力したデータをコピー。

９）最後が、</style>になっているか確認。

10）「変更を保存する」のボタンをクリックして、保存する。

11）出来上がり！　おめでとうございます！！！

---

 普段は中国、あるいは中国語に関する記事ばかりを書いているが、

以前自叙伝でも記載したように、パソコンのインストラクターをしていたこともあり

本来この手のことは非常に興味があり、また好きである。

しかしこのブログの開設の意図が、中国／中国語関連ということもあり、

最後はIT関連中国語の書籍とHPをご紹介して、今日の記事を閉じたいと思う。

（こじつけ感満載だが（笑）、ご容赦いただければ幸いである。）

中国語と英語でおぼえる・最新コンピューター用語集1183 (English Edition)

www.allchinainfo.com