【超図解】ブログの会話形式を導入してみた！

f:id:otherhalf22:20191025104633p:plain

こんにちは、じんのんです。

おっちゃん「いやぁ～、無知って怖いですね。」

部下ちゃん「そうですね～。」

おっちゃん「まさか、これも初めから実装されてたなんてね。。。」

部下ちゃん「なにが？」

おっちゃん「これですよ、これ ↓」

初めまして、じんのんで～す。
今日からブログに登場しま～す！

部下ちゃん「おぉっ！マジか？」

おっちゃん「まさかね、最初から実装されていたなんて。。。」

と言うことで、今日は会話形式の導入方法を説明します。

あっ！おっちゃんの使っているデザインテーマ限定ですからね。

ご注意くださいね。

おっちゃんの使っているデザインテーマは、これ、

blog.hatena.ne.jp

ブログの会話形式のやり方
任意キャラクターの設定手順
まとめ
参考にさせて頂いたサイト

ブログの会話形式のやり方

会話形式について

ついに記事の中にキャラクターを登場させることに成功しました。

「パチ、パチ、パチ」

じんのん：
呼ばれて飛び出て
ジャジャジャジャーン！

はいはい、ちょっと引っ込んでおいて下さいね。

皆様のおかげで、ブログのメインキャラクターが決まったことですし、これからは、キャラクターたちにあんなことや、こんなこと、ムフフなことを思いっきりしゃべらせてやりますよ。

覚悟してくださいよ～。

じんのん君：
ただし、注意も必要やで！

おっ、さっそく助言を有難う。

（ちょっと登場し過ぎちゃうか？）

なぜ注意が必要なのか？

会話形式を使う際の注意点

「ブログ会話形式」で検索すると、なぜか上位当たりの関連キーワードに

「ブログ会話形式うざい」

と出てきますね。

みなさんも、検索バーでやってみてください。

で、「ブログ会話形式うざい」で出てくる記事を辿っていくと、こんな記事が出てきます。

文章途中にたまにアクセントとして管理人からの一言みたいな感じで入ってるのは全然苦にならないんです。
嫌なのは最初から最後までこの調子で意味のよくわからない創作キャラに会話させてる。

確かに使いすぎると、読者様にウザがられるかもしれませんね。

他にも、

そもそも会話形式になっていない。

会話内の文章と通常テキストの文章がほとんど変わらない。

なるほど、これではせっかくの会話形式なのに台無しになるかもしれませんね。

今回ご紹介したコメントは、それぞれの個人的な見解かもしれませんが、ブログを見て下さる方に不快感を与えないような使い方が必要なのかもしれないですね。

「ピンポーン、用量、用法は正しくお使いくださいね！」

注意点を理解したところで、会話形式の導入手順について解説していきましょう。

会話形式の導入手順

それでは、やり方について解説していきます。

といいますか、おっちゃんが使っているデザインテーマには、初めからこの機能が組み込まれていますので、今からご説明するHTMLコードをコピーして、現在、書き掛けているブログ記事の任意の位置に貼り付けるだけで会話形式になります。

① 編集モード変更

記事を書く時の編集モードをHTML編集モードにしておく。

② HTMLコードのコピー

下記のHTMLコードをコピーします。

HTMLコードには、自分のキャラクター用と、相手のキャラクター用の2種類があります。

相手のキャラクターとは、

部下ちゃん：
ぼくのことだよっ！。

なるほど、理解しました。

じんのん君：
えっ！、君が部下ちゃんになったの？

部下ちゃん：
どさくさに紛れてそうなったみたい。。。

なるほど、キャラクターの出過ぎは確かにうざいかもですね。

皆さんもご注意くださいね。

話を戻して、

それでは自分のキャラクターのコードから、

<div class="balloon">
<div class="balloon-icon-left"></div>
<div class="balloon-board-left">
<div class="balloon-serif-left">自分名前<br> ここに文章を入れる。</div>
</div>
</div>

③ HTMLコードの貼り付け

これをコピーして、ブログ記事の登場させたい位置の HTMLコードに貼り付け、青文字部と、赤文字部を任意の文字に変更します。

青文字部・・・名前など
赤文字部・・・言葉や文章

参考までに、おっちゃんの編集画面を貼り付けておきます。

f:id:otherhalf22:20191025215038p:plain

これで、ブログ内にキャラクターが登場し、会話形式で話しをすることが出来ているはずです。

ん、なっていない？

編集モードをプレビューにして確認してみてください。

ただし、このままだとこのデザインテーマのデフォルトキャラが登場しているはずです。

任意のキャラクターを登場させる方法は、のちほどご説明します。

次に相手キャラクターのHTMLコードです。

<div class="balloon">
<div class="balloon-icon-right"></div>
<div class="balloon-board-right">
<div class="balloon-serif-right">相手名前<br>ここに文章を入れる。</div>
</div>
</div>

これをコピーして、ブログ記事の登場させたい位置の HTMLコードに貼り付け、青文字部と、赤文字部を任意の文字に変更します。

青文字部・・・名前など
赤文字部・・・言葉や文章

要領は自分のキャラクターと全く同じです。

💡ポイント

会話の吹き出し内で改行したい場合は、見たままモードに変更し、改行したいところで「Shift＋Enter」してください。

注意

Shiftを押さずにEnterすると、吹き出しが二つに分かれてしまいます。

常にプレビューで確認されることをお勧めします。

以上で会話形式の導入手順は終了です。

次は任意のキャラクターを登場させる方法です。

任意キャラクターの設定手順

はてなフォトライフを使った方法を解説します。

① 画像の準備

先ずはご自身で、好きなキャラクターの画像を準備してください。

準備するアイコンについては、下記記事をお読みください。

アイコン画像は縦横１００PXで表示されています。画像が大きくても縮小されるようになっていますが（デモで使用しているのは縦横３００px）、読み込みの時に画像が重くなってしまいますので、大きすぎない方が良いと思います。比率異なる画像も使用出来ますが、使用されるのは画像の中心部分となります。
多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 - DREAMARK

② ①で準備した画像をはてなフォトライフに保存する。

注意

ここでは、はてなフォトライフの使い方は説明致しませんので、ヘルプなどをご参照ください。

③ CSSコードのコピー

/* 自分用CSS */
.balloon-icon-left {
width: 100px;
height: 100px;
float:left;
background: url("ここに画像のURLを記入する") no-repeat;
background-position:center center;
-moz-background-size:cover;
background-size:cover;
border-radius: 50px;
text-align: center;
}

/* 相手用CSS */
.balloon-icon-right {
width: 100px;
height: 100px;
float:right;
background: url("ここに画像のURLを記入する") no-repeat;
background-position:center center;
-moz-background-size:cover;
background-size:cover;
border-radius: 50px;
}