はてなブログで吹き出しを使った会話形式を作るカスタマイズ

みなさん、こんばんは。

いろんなブログを巡回していると、たまに見かけるのが吹き出しを使った会話風の文章です。

ちょっとしたアクセントになって非常に訴求力があるテクニックですよね。

今日はその吹き出しを使用した会話形式のカスタマイズをやっていきたいと思います。

吹き出しを使用した会話形式のカスタマイズ
- 吹き出しとは？
- 参考にしたブログ
吹き出し設置の作業の流れ
吹き出しアイコン画像のURLを取得する
貼り付けるCSSコード
コード貼付け後の使い方
吹き出しを使用した会話形式のカスタマイズまとめ

吹き出しを使用した会話形式のカスタマイズ

吹き出しとは？

漫画の吹き出しならみなさんよくご存知ですよね。

はてなブログでつくる吹き出しは左からアイコンが話す場合と、右からアイコンが吹き出しで話す場合の2通りで会話表現を作っています。

実際にどうなるか以下を参考にしてもらったほうが早いです↓

吹き出しでの会話形式はこんな感じ！

なるほど！なかなか見やすいですね！

参考にしたブログ

www.notitle-weblog.com

吹き出し設置の作業の流れ

f:id:samada:20190508201917p:plain

まず、はてなブログの設定画面の左メニューの【デザイン】をクリック

f:id:samada:20190508201625p:plain

スパナマークの【カスタマイズ】をクリック

f:id:samada:20190508201649p:plain

一番下にある【デザインCSS】を開き、

f:id:samada:20190518172411p:plain

CSSコードを貼り付けます。

以上が設置の大まかな流れです。

今回は貼付け前にやることが2点あります。

　●吹き出しアイコン(2個)の画像のURLの取得

　●CSSコードにクラス名とURLの記述

吹き出しアイコン画像のURLを取得する

会話表現に用いる画像(2つ)のURLを入手しておきます。

これは後でCSSコードに記述する時につかいます。

URLははてなフォトライフから取得します。

f:id:samada:20190518172439p:plain

はてなブログの設定画面の右上にあるタイル状のボタンを押すと

メニューが出てきますのでそこからはてな【フォトライフ】をクリック

f:id:samada:20190518172504p:plain

画面が切り替わって画面右上に【アップロード】とあるのでそちらをクリック

f:id:samada:20190518172525p:plain

アップロード画面になり、ファイルを選択して画像をアップロードします

アップロードした画像は画面右のメニュー欄の【トップフォルダ】内にあるのでそちらをクリック

f:id:samada:20190518172547p:plain

アップロードした画像をクリックし、画像を右クリック

イメージのアドレスをコピーで画像のURLが取得できます(Windowsの場合)。

※Macの場合はイメージを新規タブで開くをクリックし、アドレスバーのURLをコピー。

ここで取得したURLを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(画像のURL);}

.クラス名::after {background-image:url(画像のURL);}