こんにちは、じんのんです。
おっちゃん「いやぁ~、無知って怖いですね。」
部下ちゃん「そうですね~。」
おっちゃん「まさか、これも初めから実装されてたなんてね。。。」
部下ちゃん「なにが?」
おっちゃん「これですよ、これ ↓」
今日からブログに登場しま~す!
部下ちゃん「おぉっ!マジか?」
おっちゃん「まさかね、最初から実装されていたなんて。。。」
と言うことで、今日は会話形式の導入方法を説明します。
あっ!おっちゃんの使っているデザインテーマ限定ですからね。
ご注意くださいね。
おっちゃんの使っているデザインテーマは、これ、
ブログの会話形式のやり方
会話形式について
ついに記事の中にキャラクターを登場させることに成功しました。
「パチ、パチ、パチ」
呼ばれて飛び出て
ジャジャジャジャーン!
はいはい、ちょっと引っ込んでおいて下さいね。
皆様のおかげで、ブログのメインキャラクターが決まったことですし、これからは、キャラクターたちにあんなことや、こんなこと、ムフフなことを思いっきりしゃべらせてやりますよ。
覚悟してくださいよ~。
ただし、注意も必要やで!
おっ、さっそく助言を有難う。
(ちょっと登場し過ぎちゃうか?)
なぜ注意が必要なのか?
会話形式を使う際の注意点
「ブログ 会話形式」で検索すると、なぜか上位当たりの関連キーワードに
「ブログ 会話形式 うざい」
と出てきますね。
みなさんも、検索バーでやってみてください。
で、「ブログ 会話形式 うざい」で出てくる記事を辿っていくと、こんな記事が出てきます。
文章途中にたまにアクセントとして管理人からの一言みたいな感じで入ってるのは全然苦にならないんです。
嫌なのは 最初から最後までこの調子で意味のよくわからない創作キャラに会話させてる。
確かに使いすぎると、読者様にウザがられるかもしれませんね。
他にも、
そもそも会話形式になっていない。
会話内の文章と通常テキストの文章がほとんど変わらない。
なるほど、これではせっかくの会話形式なのに台無しになるかもしれませんね。
今回ご紹介したコメントは、それぞれの個人的な見解かもしれませんが、ブログを見て下さる方に不快感を与えないような使い方が必要なのかもしれないですね。
「ピンポーン、用量、用法は正しくお使いくださいね!」
注意点を理解したところで、会話形式の導入手順について解説していきましょう。
会話形式の導入手順
それでは、やり方について解説していきます。
といいますか、おっちゃんが使っているデザインテーマには、初めからこの機能が組み込まれていますので、今からご説明する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コードに貼り付け、青文字部と、赤文字部を任意の文字に変更します。
- 青文字部・・・名前など
- 赤文字部・・・言葉や文章
<!-- 相手用-->
<div class="balloon">
<div class="balloon-icon-right"></div>
<div class="balloon-board-right">
<div class="balloon-serif-right">相手名前<br>ここに文章を入れる。</div>
</div>
</div>
これをコピーして、ブログ記事の登場させたい位置の HTMLコードに貼り付け、青文字部と、赤文字部を任意の文字に変更します。
- 青文字部・・・名前など
- 赤文字部・・・言葉や文章
任意キャラクターの設定手順
アイコン画像は縦横100PXで表示されています。画像が大きくても縮小されるようになっていますが(デモで使用しているのは縦横300px)、読み込みの時に画像が重くなってしまいますので、大きすぎない方が良いと思います。比率異なる画像も使用出来ますが、使用されるのは画像の中心部分となります。
多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 - DREAMARK
② ①で準備した画像をはてなフォトライフに保存する。
注意
ここでは、はてなフォトライフの使い方は説明致しませんので、ヘルプなどをご参照ください。
/* 自分用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;
}
④ CSSコードの貼り付け
CSSコードをデザインCSSに貼り付け、青文字部と赤文字部を画像のURLに編集する。
設定が完了したら、「変更を保存する」で保存しておいて下さいね。
💡ポイント
画像のURLは、はてなフォトライフの画像を右クリックし、「画像アドレスをコピー」するのが早いです。
まとめ
デザインテーマ製作者様のお陰で、とても簡単に会話形式のブログが出来上がりました。
本当にありがとうございました。
同じテーマを使われている皆様も、是非、参考のうえ、チャレンジしてみて下さいね。
やり方が分からない場合は、コメント欄にご記入ください。
参考にさせて頂いたサイト
JOE (id:dreamark)様、参考にさせて頂き、ありがとうございました。
以上、バックアップなどの事前準備を十分に行い、チャレンジしてみてください。