コピペで楽々！はてなブログで吹き出し会話文を作る方法、簡単5ステップ
ブログを運営していると「ブログ運営記事」「ブログのカスタム方法」「PVを挙げる方法やSEO関連の話」というブログに関する事柄を調べる機会があると思います。
そこでよく使われている文の書き方として『吹き出しを使った会話形式』を見た事がありませんか？
私もこれをよく見ますし、やってみたいと思っていました。
という事で今回はそんな吹き出し会話方式の記述方法が結構簡単に行えるという事でそれを紹介していきます。
ブログ初心者の味方、すばるです。
今日は先生のぱんさんに吹き出しの作り方を教わります。
どもどもー！すばるくんの先生のぱんさんです。
という事でね
今回は吹き出し会話形式のやり方を説明していきます。
やったぁ！ずっと気になってたんだよね。
▲今回の方法を使ってもらうと上記の吹き出し会話の様な文を作る事が出来ます。
コピペで簡単に出来るので、気になっていた方は
文中に吹き出しを付ける準備
吹き出しをつけるにはCSSを追加する必要があります。
でた、あのわけわかんないヤツだ…
大丈夫。僕もcssが何かなんてわかってないよｗ
CSSやHTMLは英数字や記号の羅列というイメージが強く、これらについて知識の無い人はかなり抵抗感があると思います。
ただ今回の方法では紹介するCSSをそのままコピーして貼り付けてくれたら吹き出し会話が使えるようになるので、あまり考えすぎずに実行してみると良いですよ。
コピペするだけと言っても、少しは働いてもらう必要がありますからね？
という事でステップを踏みながら準備と実行へと向かってみましょう。
ステップ１、吹き出しの登場人物（画像）を用意しよう
会話をする人物がいないと吹き出し会話の雰囲気が出ません。
その為、誰かしらの準備をすると良いでしょう。
私が準備したのは
▲パンダ先生の「ぱんさん」
▲私に見立てた「すばるくん」を用意しました。
正直言って画像は著作権違反にならなければ何でも問題はありません。
ただ、今回紹介する方法では中心から丸形に画像が切られてしまうので長方形などのバランスの悪い画像は思った通りの場所が残らない場合があります。
今回導入している「すばるくん」はIconponというサイトで作りました。
上のIconponの文字を押すとサイトに飛ぶよ！
パンダ先生の「ぱんさん」はフリー素材です。
好きな画像を用意したら、はてなブログにアップロードしましょう。
ステップ２、画像をはてなブログにアップロードしよう
アップロードを行うのはちょっとめんどくさいです。
ただ、このアップロード作業が終われば後は簡単な作業なので頑張りましょう！
まずダッシュボード右上のHatenaを押してね。
次は左の方にある、フォトライフを押してね。
次は右上のアップロードを押してね。
上の赤枠の所をトップから
Hatena Blogへ変更する。
「オリジナルサイズの画像を保存」にチェックを入れておこう。
これで会話をする登場人物の用意は完了です。
次にこの画像のアドレスをコピーします。
ステップ3、画像アドレスのコピー
このステップでは「アップロードした画像のアドレス」を控えておくという事をするだけです。
アップロードした画面からの方が流れ的に楽なので画像アップロードの後すぐに行うのをおすすめします。
▲アップロード直後の画面はこの様な画面になると思います。
先程アップロードした画像を右クリックし「画像アドレスをコピー」しましょう。
ここでコピーしたアドレスはすぐに使わないので「メモ」か何かに移しておくと良いよ。
すぐに使わないなら、どこかにメモしておくとコピー状態が解除されても安心だね。
ステップ4、CSSを追加しよう
CSSの追加はこれから紹介するコードをダッシュボード内の『デザイン→カスタマイズ→デザインCSS』の中にコピペしたらOKです。
▲デザイン→カスタマイズ（工具アイコン）→デザイン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% !important;
}
.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);}
▲このコードをデザインCSS内へとコピペしましょう。
コピペした後に少し編集を加えます。
- クラス名を任意の名前へと変更
- 画像のURLの場所に、ステップ３で控えておいた画像URLを入れる
クラス名は文中に吹き出しを追加する際に必要になるので、覚えやすい名前がおすすめ。
スマホでのCSS追加方法
PC表示とスマホ表示を分けているブログの場合はスマホ表示側にもCSSを追加する必要があります。
デザイン→スマホ→ヘッダー→タイトル下のHTMLにCSSを追加します。
<style>
この中にPC表示側に追加したCSS
</style>
レスポンシブにしている場合は、スマホ表示側への追加は不要です。
ステップ5、文中に吹き出しを入れよう！
お疲れ様。
ここまで来たら後は吹き出し文を実行するだけだよ！
ステップは短いのに、長かった…汗
HTML編集画面内で、下記コードを入れていきます。
<p class="r-fuki クラス名">テキスト</p>
<p class="l-fuki クラス名">テキスト</p>
クラス名の所をステップ4で変更した覚えやすい名前を入れ、テキストの中には吹き出しで喋らせたい文字を入れましょう。
「r-fuki」と「l-fuki」とありますが…
” r ”は右側に吹き出しで人物は左側にいます。
" l "は左側に吹き出しで人物は右側にいます。
PCで見ている人はこのページの吹き出しが左右に分かれていないのに気付くでしょう。
これはテーマに合っていないCSSを使用している為であり、今後修正方法を探していく予定です。
ちなみにPC表示に「マテリアルぽっぷ」テーマが適用されていて、スマホ表示は違うからスマホで見ている人は吹き出しが左右に分かれているよ。
※id:mamegoroさんがコメントで改善の助力をしてくれましたので、上記打消し線内容の事は起こらなくなりPC表示でも左右に分かれた吹き出しになりました！
という事で、吹き出し表記の書き方講座は終了！
今回の吹き出し表記の注意点
今回紹介した吹き出し表記の仕方には２つ注意点があります。
【1つ目】
吹き出しで喋らせる言葉を改行したい場合「Enter」だけの改行はしない様にしましょう。
改行したい場合は「Shift + Enter」で行ってください。
Enterだけで改行したらどうなるの？
やってみてプレビューで確認すると良いよｗ
【2つ目】
吹き出し表記を行ったら絶対にプレビューで確認しましょう。
このページを書いている時に私もよくなりましたが、行の微調整などを行っていると吹き出しが消え、文字だけ残っている状態になる時がありました。
それに気づかずに投稿してしまうと、読みにくい事になったり、片方の登場人物が喋っているだけの状態になる可能性があるので確認をしっかりとしましょう。
おわりに（まとめ）
吹き出し表記というのは「読者」にも「ブログ運営者」にもメリットがある表記です。
- 視覚的に面白い
- 無事ばかりのコンテンツより飽きにくく、読みやすい
- ハウツー記事などの作成に便利
- 疑問解決系の記事作成などに便利
などのようにメリットがある表記方法です。
読者からすれば、ちょっと楽しみながら読む事が出来て、文字ばかりのコンテンツより自然な空白が出来て読みやすいです。
運営者からすれば「コンテンツ構成の幅が広がる」「魅力のあるコンテンツに出来る」という様に、両者に良い事があるので適度に使えていけたら楽しいブログになるでしょう。
分からない事とかあったら
問い合わせから聞いてね。
++++このブログはシェアフリーです++++
↓よかったらポチっとお願いします( *´艸｀)
