人生RPG

一児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

CSSだけで吹き出しの会話形式を取り入れる方法

SPONSORED LINK

f:id:boukenshaLv1:20180519132230j:plain

こんにちは!冒険者Lv.1(@boukenshaLv1)です!!


ブログを始めてから色んな方のブログを拝見して楽しんでいます。


拝見したブログの中には「吹き出し」を使った会話をしているような表現を使っている方も度々みます。


ブログや記事のジャンルによっては見やすかったり、共感できたりするので一つの武器としてすごい役に立ちそう!!


そう思った私は色々吹き出しの取り入れ方について調べました。
正直に言うとやり方はすぐ理解しました。


しかし!実践しようにも会話相手がいないことに気づきました。


自分の吹き出しはアイコンのキャラを使えますが、相手は?
フリー素材でテキトーに相手を探すのが簡単ですが、どうせ今後使っていくなら親しみやすいオリジナルキャラを使いたい!


変なところで無駄にこだわり屋さんな私は、相手をちゃんと準備してから実践しようと今日までコツコツとキャラ作成に励んでいました。


イラストに関しては素人なので苦戦しましたが、ついに完成しました。
イラスト紹介は後述吹き出しにて紹介します。


ということで、やっと会話相手が出来たので、本題の会話形式を取り入れる方法を説明していきますね。

吹き出しの完成デザイン

主食は主にじいちゃんのスネ毛です

初めまして冒険者の妻です


どうですか!会話してるようでしょ?


最初の会話相手は妻にしました。
イラストも「着ぐるみ」にして、このブログデザインのイメージを統一してみました。


この吹き出しデザインに興味を持ってもらえたら読み進めて下さいね。


参考にした記事

シロマ (id:shiromatakumi) さんが紹介している方法を使わせてもらいました。
www.notitle-weblog.com

吹き出しにも色々デザインや、導入方法があります。
その中からシロマさんのカスタマイズを選んだ理由は「簡単な設定」と「拡張機能を使わなくてもできる」というところです。


理由1:簡単な設定

カスタマイズはコードを使って適切な場所に記述しないと反映されません。
場合によっては、紹介しているコードを自分用に自分で変更して使う場合も多々あります。


今回の吹き出しカスタマイズも一応自分用に変更しないといけない箇所はありますが、変更するコードが分かりやすく、CSSデザインだけで反映されるので初心者でも簡単に吹き出しを取り入れられることが出来るという点で選びました。

理由2:拡張機能を使わない

私はブログを書くのは家と会社のパソコンです。
特に会社で作業をするときは、Chromeのブラウザでシークレットモードを使っています。


シークレットモードを使っている場合Chromeの拡張機能はダウンロードが出来ないんですね。
なので少し手間になっても記事内の記述だけで吹き出しにできるところが一番魅力を感じました。


その方が今後拡張機能に不具合が出た場合も影響なく使っていけますしね。


吹き出しのカスタマイズ方法

参考にしたシロマさんは、Chromeの拡張機能を開発して拡張機能でも同じように吹き出しを使える様にしていますが、今回は拡張機能を使わないで吹き出しを使う方法を紹介します。

Chromeの拡張機能の方が作業は早いかもしれないので、Chromeの拡張機能を使いたい方は上記のリンクからサイトへ行ってみてください。

CSSコードを記述

ダッシュボード(管理画面)
  ↓
デザイン
  ↓
カスタマイズ(スパナマーク)
  ↓
一番下の項目【デザインCSS】に以下のコードをコピペします。

/* ▼吹き出しの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(☆☆☆);}
.△△△::after {background-image:url(◇◇◇);}
/* ▲吹き出しのCSS▲ */

コードを編集

次に上のコード内を自分用に書き換える必要があります。

書き換える場所は一番下のこの2行です。

.〇〇〇::after {background-image:url(☆☆☆);}
.△△△::after {background-image:url(◇◇◇);}


〇〇〇」と「△△△」の所は各クラス名になります。
記事中の吹き出し部分を記述して呼び出すための「画像の名前」と考えてください。
どの画像を使うか覚えやすいような名前を付けるのが良いです。


☆☆☆」と「◇◇◇」の所には各画像のURL(アドレス)が入ります。

画像URL(アドレス)の取得方法

画像のURLの取得方法が分からないって方は、私が普段している簡単な方法を紹介します。

[記事を作成]で使いたい画像を貼り付けます。
PCでもスマホでも同じです。


スマホの場合は、はてなのアプリで「下書きを書く」で画像を貼り付けて下書き保存します。


PCで画像を貼り付けた作成中の記事、もしくはスマホから画像のを貼っただけの下書き状態の記事を開きます。


【プレビュー】ボタンをクリックしてプレビュー画面を開きます。


プレビュー画面の画像をクリックするとこのようにクリックした画像が表示されます。
f:id:boukenshaLv1:20180519154546j:plain

この画像の上で右クリックをするとメニューが表示されるので『画像アドレスをコピー』を選択するとその画像のURLを取得できます。

変更したコードの例

実際にコードを変更したらこんな感じになると思います。

.boukensha::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/boukenshaLv1/20180519/20180519151644.jpg);}
.tuma::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/b/boukenshaLv1/20180519/20180519151654.jpg);}

クラス名(画像の名前)は「boukensha(冒険者)」、「tuma(妻)」みたいな簡単で覚えやすいのにしてます。


今回は2人分しかコードを入れていませんが、同じようにクラス名を変えてコードを追加していけば無限に登録できます。

スマホでの表示

上のコードはPCレスポンシブデザイン用です。

スマホで適用する場合(レスポンシブに設定していない場合)は、デザイン→スマートフォン→ヘッダー→タイトル下のHTMLにCSSを記述します。
下記の様に「style」で囲ってその間にCSSを記述して下さい。

<style>
ここ中に上で紹介したCSSを貼り付ける
</style>

記事で吹き出しを使う方法

HTMLを直接記述する方法になります。

「見たままモード」の場合は[HTML編集]の画面で記述します。
「Markdown」や「はてな記法」も同じタグで吹き出しを使うことが出来ます。

※「l-fuki」「r-fuki」と「クラス名」の間は半角スペースを入れることを忘れずに。
 「l-fuki」「r-fuki」はレフトとライトの頭文字をとってるので「L」と「R」の小文字ね!!

吹き出しが左側

<p class="l-fuki クラス名">テキスト</p>

娘を携帯ストラップにして持ち歩きたい

吹き出しが右側

<p class="r-fuki クラス名">テキスト</p>

さっきからキモい


注意点

記事作成中はどのモードであっても文章を書いている画面では吹き出しになっているか確認できません。


きちんと吹き出しになっているか確認をするにはプレビュー画面で確認します。
「吹き出しの形は崩れていないか」「アイコン画像は正常に表示されているか」をしっかり確認しましょう。


また吹き出しの中で改行する場合、「Enter」キーをクリックして改行しないで下さい。吹き出し内で改行する際は、「Shift」+「Enter」で改行して下さい。


吹き出しを使うに当り気を付けたこと

吹き出し時につかうアイコン調整

意外と調整難しいです。
画像の中心を円で囲む感じに切り取られます。

イメージとしてはこんな感じです。

f:id:boukenshaLv1:20180519154843j:plain

赤丸の範囲でアイコンが生成されます。

私は「円で切り取られるのなら、あらかじめ正方形の画像にしたら調整もイメージもしやすい」と思い画像を加工して設定しました。


会話形式の配置方法

現在多くの方はスマホのやり取りなどで「LINE(ライン)」というアプリを利用していると思います。

LINEでのやり取り(チャット式会話)ページの表示は吹き出しの会話形式になっています。
1対1のルームでもグループのルームでも共通しているのは、「自分のコメントは右側」「自分以外の人のコメントは左側」です。


その方式に習って、このブログでも自分は右・相手は左にして慣れ親しんで読みやすいデザインを心がけてます。


アイコンキャラの向き

会話形式なので会話しているように向かい合うデザインにしました。

先ほども述べたように
私は右側配置なので、左向き。
私以外は左配置になるので、右向き。

になるようにキャラのデザインをしました。


吹き出しデザインのまとめ

念願の吹き出し会話を実現することが出来ました。

実際に今回の記事で使ってみた感想なのですが、私は普段記事を書くとき読者が読みやすいようになるべく丁寧な言葉や文章を書くようにしています。(実際にできているか分かりませんが…)


でも本当はもっとふざけたり、自分を全面に出してみたいっていうのもあります。


この吹き出しデザインのおかげで両方実現することが可能になったのは予想以上の収穫です。


記事は今まで通り丁寧に書いて、吹き出しはキャラを活かせるワンポイントアイテムになりました。



 私はカスタマイズのコードはバックアップも兼ねてエクセルで管理しています。


吹き出しにするために記事中に記述するコードもエクセルにあらかじめ保存しておくことでコピペで簡単に記事に張り付けれます。


感情とかをカッコで表現したり、文字色を変えたり、文字のサイズを変更したりもしましたが、吹き出しの方が圧倒的に分かりやすいのは確実です。


是非あなたも吹き出し会話を取り入れてみてください。


イラスト書いてくれる方いないかな~

色んなパターン使い分けたいね☆