会話形式で楽しくブログを書こう！はてなブログで吹き出し導入カスタマイズについて

こーんさん！ちょっと聴いてください！

おやどうした？ちびどん何だね？

ブログのなかで会話形式で書けるようになったんですよ。

おお、ほんとだね。いいじゃない？これからはこのノリでいくのかい？

いえ、そこまでは考えてないです。ただ新しい機能を披露したかったんです

そういうことか。では読者の皆さんに向けて今回の導入方法の解説お願いするよ

今回はCSSをうまく使ってこんな感じで吹き出し付きで会話形式で記事が書けるようにカスタマイズします。

あたかも誰かが話しているように見えるだけでただの文章が劇みたいで面白いですね。

CSSの記述についてはこちらのサイトを参考にさせていただきました。

完璧な解説でとても助かりました。
ありがとうございます。

www.uenoyou.net

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;
	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;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.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内の「クラス名」のところは吹き出しで喋らせるキャラクターの名前などを入れます。

わたしの場合は、

こーん → .corne
ちびどん → .chibidon

といった感じ。

クラス名の前にドットを忘れずに。

画像のURLはブログ記事などに載せた画像から画像URLを取得してセットしてあげます。

取得は画像を右クリックから「画像アドレスをコピー」でオッケー。

使いかたについて

さて文中でどのように呼び出して使うのかですがタグを書く必要があります。

タグと聴くと面倒くさそうですがユーザー辞書などにあらかじめ登録してあげるなどしておけば楽チンです。

使い方としては「l-fuki」は左向きの吹き出し「r-fuki」は右向きの吹き出しになります。

そしてその次に喋らせるキャクターに設定したキャラクターのクラス名を書くだけです。

たとえば、

ここにセリフを書きます

であれば以下のように書きます。

<p class="l-fuki chibidon">ここにセリフを書きます</p>

キャクターはいくらでも設定できるので表情ごとに増やしてみたりするのも良い方法です。

いかがでしたか？

CSSを設定するだけでほぼ作業完了です。
簡単ですね。

こーんさん！いかがでしたか？分かりました？

よく分かったよ CSSだけ設定すればカンタンに使えるね

そーなんですよ分かってもらえてうれしいです。

こんな感じで遊べそうなのでいろいろ試してみようと思います。

ご参考までに。