ちゃーちゃん@中国瀋陽

オンライン中国語講師|中国語ネイティブの発音と、より楽しく学べる方法を模索中|漫才や“脱口秀”など、面白い事(言葉遊び)が大好きな関西人

◆スポンサーリンク◆


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

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

 

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

f:id:chachan-china:20190412153400p:plain

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

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

 

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

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

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

 

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

ご説明したいと思う。

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

 

パソコン、iPad画面 表示編

1.CSSをメモ帳にコピーペーストする

 

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

f:id:chachan-china:20190412155513p:plain

 

2)下記の点線枠にある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);}

 

3)メモ帳にペーストする。

f:id:chachan-china:20190412160136p:plain

 

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

 

 

2.吹き出しの人物写真のURLを取得する

 

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

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

f:id:chachan-china:20190412160759p:plain

 

3)「HTML編集」の画面に切り替える。

f:id:chachan-china:20190412162830p:plain


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

f:id:chachan-china:20190412162921p:plain


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

f:id:chachan-china:20190412162737p:plain

 

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

f:id:chachan-china:20190412163653p:plain

 

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

f:id:chachan-china:20190412164910p:plain

 

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

f:id:chachan-china:20190412172630p:plain

 

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

 

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

 

 

3.CSSを画面に入力

 

1)「デザイン」の画面を呼び出す。

f:id:chachan-china:20190412170752p:plain

 

2)赤矢印の「カスタマイズ(工具のアイコン)」の中の「{}デザインCSS」をクリック。

f:id:chachan-china:20190412171632p:plain  

 

 3)「{}デザインCSS」の部分に、先ほどメモ帳に保存したCSSをペースト。

f:id:chachan-china:20190412171943p:plain

 

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

f:id:chachan-china:20190412172106p:plain

 

 

4.記事を書く

 

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

f:id:chachan-china:20190412191020p:plain

 

2)「HTML編集」画面に切り替える。

f:id:chachan-china:20190412191231p:plain

 

3)吹き出しのHMLTを入力する。

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

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

 

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

f:id:chachan-china:20190412153400p:plain

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

 

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

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

 

つまり画面上では

f:id:chachan-china:20190412194019p:plain

 

文頭部分を拡大すると

f:id:chachan-china:20190412194245p:plain


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

f:id:chachan-china:20190412215755p:plain


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

 

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

f:id:chachan-china:20190412200005p:plain

 

7)プレビューURLをコピー

f:id:chachan-china:20190412200239p:plain


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

f:id:chachan-china:20190412200534p:plain

 

9)出来上がり! おめでとうございます!!!

 


 

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

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

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

 

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

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

 

携帯画面 表示編

1.CSSを携帯用の画面に入力

 

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

 

2)「デザイン」の画面を呼び出す。

f:id:chachan-china:20190412203112p:plain

 

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

f:id:chachan-china:20190412203724p:plain

 

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

f:id:chachan-china:20190412203901p:plain

 

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

f:id:chachan-china:20190412204620p:plain

 

6)画面が入力画面に変わる

f:id:chachan-china:20190412204730p:plain

 

7)CSSである事を命令する、HTMLを入力する。  

<style type="text/css">

</style>

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

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

 

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

f:id:chachan-china:20190412210020p:plain

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

f:id:chachan-china:20190412211255p:plain

 

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

f:id:chachan-china:20190412210325p:plain

 

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

f:id:chachan-china:20190412210545p:plain

 

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

f:id:chachan-china:20190412210943j:plain

 


 

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

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

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

 

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

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

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

www.allchinainfo.com