YOLOCOBI BLOG

一度きりの人生、好きなことをして楽しく生きるためのブログ

<はてなブログを楽しく>吹き出し会話風のデザインのカスタマイズ【簡単コピペ】

f:id:YOLO-co-bi:20200308200634p:plain


はてなブログでも「吹き出し会話」風デザインをしたいと思っている方へ、

今回は「吹き出し会話」風デザインのカスタマイズのやり方について書きたいと思います。

Wordpressではよく見かけますが、はてなブログでも実はできるんですね。

 

ブログで吹き出し会話ができると、オリジナル感が出て親近感がわくブログ記事にすることができますので、ぜひ読んで実践してみてください。

 

ちなみに今回の「吹き出し会話」カスタマイズのやり方は、ちゃんこめBLOGのKOMEさんのやり方から学ばせてもらいました!(ありがとうございます) 

 

 吹き出し会話風のデザインの完成見本

 

 

f:id:YOLO-co-bi:20200307161447j:plain

YOLOCOBI

やったー!ついに吹き出しデビューしました!

f:id:YOLO-co-bi:20200307220616p:plain

YOLO太くん

やっとできたね〜♪楽しいはてなブログ作りには必要だね

f:id:YOLO-co-bi:20200307220459j:plain

YOLOCOBI

次はどんな楽しいブログを書こうかな〜

f:id:YOLO-co-bi:20200307214901p:plain

イケYOLO

吹き出し、もうオワコンでしょ。遊んでる暇あったらちゃんと記事書いたら?

 

こんな感じでできます。

今までのブログ記事よりも、だいぶ親近感がわく感じになりますね。 

 

スマホ画面での見え方はこうです。

スマホ画面に合わせて、ちゃんとレスポンシブ対応になってます)

 

スマホ画面での見え方

f:id:YOLO-co-bi:20200308153713p:plain

それでは、早速作ってみましょう。

 

吹き出し会話風のデザインのカスタマイズの作成手順

<<作成手順>>

1)アイコン画像の作成・アップロード

2)はてなブログでのアイコン画像のアップロード

3)吹き出しカラーの決定

4)CSSタグの埋め込み(カラーのカスタマイズ)

5)HTMLタグの貼り付け&アイコン画像+文章作成

 

1)アイコン画像の作成・アップロード

まず最初にアイコン画像の作成とはてなフォトへのアップロードを行います。

Myアイコン画像があると、ブログの作成者の顔が見えて親近感が湧きますし、オリジナル感が出ると思いますので是非作成してみるといいです。

 

詳しいアイコン画像の作成方法は、以前のブログ記事で紹介しましたので、そちらの記事をご覧ください。

www.yolocobi.jp

 

もし、自分以外の似顔絵アイコンを使用したい方は、

ありさちゃんがいく!フリーイラスト素材

いらすとや かわいいフリー素材集 

から似顔絵アイコンを入手することができます。

 

 2)はてなブログでのアイコン画像のアップロード

はてなブログで、吹き出し画像を使用したりする場合は、事前にはてなフォトライフ へアイコン画像をアップロードする必要があります。

アップロードの方法の手順を説明したいと思います。

 

イコン画像のアップロードはドラッグ&ドロップでできますので、非常に簡単です。

 

イコン画像アップロード はてなフォトライフトップページ

→ 右上の「マイフォト」

→サイドバーから新規フォルダを作成

(「アイコン」とフォルダ名をつけるとわかりやすいです)

 

注意事項

新規フォルダを作成する時は「クリエイティブコモンズ設定なし」で作成すること

f:id:YOLO-co-bi:20200307175705p:plain

 

ここまでできればアップロードはOKです。

 

 3)吹き出しカラーの決定

それでは、4種類ある吹き出しのカラー を決めてゆきましょう。

ブログ記事ごとに色を変更することができないので、事前に吹き出しカラーを決めてゆきましょう。下の見本カラーで問題がなければ、そのままでもOKです。

 

f:id:YOLO-co-bi:20200307161447j:plain

YOLOCOBI

吹き出し背景色は#faf0c6、ふきだし枠線の色は#f0dc8eです!

f:id:YOLO-co-bi:20200307220616p:plain

YOLO太くん

こちら、吹き出し背景色は#faf0c6、ふきだし枠線の色は#f0dc8eです!

f:id:YOLO-co-bi:20200307220459j:plain

YOLOCOBI

吹き出し背景色は#fceeeb、ふきだし枠線の色は#f9e1dcですよー

f:id:YOLO-co-bi:20200307214901p:plain

イケYOLO

吹き出し背景色は#B0E0E6、ふきだし枠線の色は#9fd8dfなんだよね〜

 

 もし、色を変えたい場合は、こちらのパレットを用意しましたので、気に入った色があったらこちらの色をメモしてください。

f:id:YOLO-co-bi:20200308222014j:plain

もし「ここにもない!」という方は、color-sample.comで色を探すと自分だけの色が見つかります。

色が決まったら、次はCSSへの色カスタマイズとCSSタグ埋め込みです。

 

4)CSSタグの埋め込み(カラーのカスタマイズ)

それでは、CSSタグのカスタマイズに入ります。下のCSSタグをコピーして色の部分のカスタマイズを行いましょう。

カスタマイズ作業は、どこかにコピペして該当部分を書き換えるとやりやすいです。

CSSタグはものすごく長いですが、色をカスタマイズしてコピペするだけですから、作業自体は簡単ですのでご安心を。

 

変更する箇所

#f0f0f0(赤字)→ふきだし背景色

#aaa(紫字)  →枠線色

 

CSSタグ ※一度メモ帳に貼り付けてから使用してください!

 /*---------------
◆ ふきだし ◆
---------------*/

/*=== 共通設定 ===*/

/*全体の上下左右の余白*/
.fuki {margin: 20px 0 ;}
/*テキスト回り込み解除*/
.fuki:after,.fuki:before {clear: both; content: ""; display: block;}

/*アイコン画像の設定*/
.fuki figure {margin: 0; display: block;}
.fuki figure img {
width: 100%;
height: 100%;
border-radius: 50%;
margin: 0;
vertical-align: middle;
border: 1px solid #fff; /*★アイコン画像の枠線の太さと色の調整*/
}
/*アイコン画像の設定*/
.fuki-img-left {margin-left: 10px; margin-top: 1px; float: left;}
.fuki-img-right {margin-right: 10px margin-top: 1px; float: right;}
.fuki-img-left,.fuki-img-right {width: 90px; height: 90px;}

/*アイコン画像の名前*/
.fuki-img-name {padding: 0; margin-top: 3px; font-size: 10px; line-height: 1.2em; font-weight: 400; text-align: center; display: block;}


/*=== 会話風ふきだし ===*/
.chat-text-left,.chat-text-right {
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★ふきだしの影*/
border-radius: 10px; /*★ふきだしの丸さ調整*/
}
.chat-text-left p,.chat-text-right p {
margin:0 !important;
font-size: 16px;
color: #; /*★ふきだし内テキスト文字色*/
}

/*左からのふきだし*/
.chat-text-left {
background-color: #f0f0f0; /*★①左ふきだし背景色*/
border: 1px solid #aaa; /*★②左ふきだし枠線の色*/
}
/*左からのふきだしの三角部分*/
.chat-text-left:after {
position: absolute;
top: 16px; left: -22px; content: '';
border: 12px solid transparent;
border-right: 12px solid #f0f0f0; /*★①ふきだし背景色*/
}
.chat-text-left:before {
position: absolute;
top: 16px; left: -24px; content: '';
border: 12px solid transparent ;
border-right: 12px solid #aaa; /*★②左ふきだし枠線の色*/
}

/*右からのふきだし*/
.chat-text-right {
background-color: #faf0c6; /*★③右ふきだし背景色*/
border: 1px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}
/*右からのふきだしの三角部分*/
.chat-text-right:after {
position: absolute;
top: 16px; right: -22px; content: '';
border: 12px solid transparent;
border-left: 12px solid #faf0c6; /*③右ふきだし背景色*/
}
.chat-text-right:before {
position: absolute;
top: 16px; right: -24px; content: '';
border: 12px solid transparent;
border-left: 12px solid #f0dc8e; /*★④右ふきだし枠線の色*/
}

/*=== もくもくふきだし ===*/
.mkmk-text-left,.mkmk-text-right{
position: relative;
margin: 0 100px 16px;
padding: 16px;
box-shadow: 1px 1px 5px #aaaaaa90; /*★もくもくの影*/
border-radius: 30px; /*★もくもくの丸さ調整*/
}
.mkmk-text-left p,.mkmk-text-right p {
margin: 0 !important;
font-size: 16px;
color: #555; /*★もくもく内テキスト文字色*/
}
/*左からのもくもく*/
.mkmk-text-left {
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
/*左もくもくの丸い部分*/
.mkmk-text-left:before {
position: absolute;
content: ''; top: 16px; left: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}
.mkmk-text-left:after {
position: absolute;
content: ''; top: 26px; left: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #FCEEEB; /*★⑤左もくもく背景色*/
border: 1px solid #f9e1dc; /*★⑥左もくもく枠線の色*/
}

/*右からのもくもく*/
.mkmk-text-right {
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
/*右からのもくもくの丸い部分*/
.mkmk-text-right:before {
position: absolute;
content: ''; top: 16px; right: -16px;
border-radius: 50%; width: 12px; height: 12px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}
.mkmk-text-right:after {
position: absolute;
content: ''; top: 26px; right: -26px;
border-radius: 50%; width: 8px; height: 8px;
background-color: #B0E0E6; /*★⑦右もくもく背景色*/
border: 1px solid #9fd8df; /*★⑧右もくもく枠線の色*/
}

/*=== レスポンシブ設定 ===*/
@media (max-width: 767px){
/*スマホ表示の時は横幅いっぱいに広げる*/
.chat-text-left,.mkmk-text-left {margin-left: 90px; margin-right: 0;}
.chat-text-right,.mkmk-text-right {margin-left: 0; margin-right: 90px;}
/*スマホ表示の時はふきだし画像サイズを小さくする*/
.fuki-img-left,.fuki-img-right {width: 80px; height: 80px;}
}

/*-- ふきだしここまで --
------------------------*/

 

カスタマイズが終わったら、今度は完成したCSSタグを埋め込みます。 

 埋め込み場所は、

管理画面>デザイン>カスタマイズ>デザインCSS 

です。

f:id:YOLO-co-bi:20200307012451p:plain

さあ、これで準備が終わりました。

最後は、ブログ記事の中にHTMLタグを埋め込む作業に入ります。

 

5)HTMLタグの貼り付け&アイコン画像+文章作成 

まず、ブログ記事で埋め込みたい吹き出しのHTMLタグを埋め込みます。

作業手順としては、

<1>(HTML編集画面にて)     HTMLタグの埋め込み

<2>(編集見たまま画面にて)   アイコン画像の埋め込み

<3>(編集見たまま画面にて)  名前・文章の書き込み

<4>(プレビュー画面にて)  完成レイアウトの確認

<5>(HTML編集画面にて)  レイアウトの調整

になります。

慣れるまでは、色々な画面をいったりきたり調整が多くなりますが、すぐにできるようになりますので、辛抱強くやってみてください。

 

 <1>(HTML編集画面にて) HTMLタグの埋め込み

まず、記事の入れたい箇所にHTMLタグを埋め込みましょう。

※一度メモ帳に貼り付けてから使用してください!

 

A)左からの会話風ふきだしHTMLタグ

<!-- 左からの会話風ふきだし -->

<div class="fuki">

<figure class="fuki-img-left">

<!-- ふきだし画像 -->ここに画像

<figcaption class="fuki-img-name">

<!-- ふきだし画像の名前 -->なまえ

</figcaption></figure>

<div class="chat-text-left">

<p class="chat-text">

<!-- ふきだし内テキスト -->ここに文章を入れる

</p></div></div>

 

b)右からの会話風ふきだしHTMLタグ

<!-- 右からの会話風ふきだし -->

<div class="fuki">

<figure class="fuki-img-right">

<!-- ふきだし画像 -->ここに画像

<figcaption class="fuki-img-name">

<!-- ふきだし画像の名前 -->なまえ

</figcaption></figure>

<div class="chat-text-right">

<p class="chat-text">

<!-- ふきだし内テキスト -->ここに文章を入れる

</p></div></div>

 

c)左からのもくもくふきだしHTMLタグ

<!-- 左からのもくもくふきだし -->

<div class="fuki">

<figure class="fuki-img-left">

<!-- ふきだし画像 -->ここに画像

<figcaption class="fuki-img-name">

<!-- ふきだし画像の名前 -->なまえ

</figcaption></figure>

<div class="mkmk-text-left">

<p class="mkmk-text">

<!-- ふきだし内テキスト -->ここに文章を入れる

</p></div></div>

 

d)右からのもくもくふきだしHTMLタグ

<!-- 右からのもくもくふきだし -->

<div class="fuki">

<figure class="fuki-img-right">

<!-- ふきだし画像 -->ここに画像

<figcaption class="fuki-img-name">

<!-- ふきだし画像の名前 -->なまえ

</figcaption></figure>

<div class="mkmk-text-right">

<p class="mkmk-text">

<!-- ふきだし内テキスト -->ここに文章を入れる

</p></div></div>

 

必要な吹き出しをコピペしてみましょう。

 

右のもくもく吹き出しのHTMLを入れてみましたが、まだこんな風な見え方の状態です。

 

ここに画像
なまえ

ここに文章を入れる

 

<2>(編集見たまま画面にて)アイコン画像の埋め込み

 

次に、アイコン画像を埋め込みますが、画像の埋め込みは編集見たまま画面で行います。

前の章で埋め込んだアイコン画像の見つけ方は以下のように、写真投稿タブから見つけることができますので、実際にやってみてください。 

 

希望の画像が見つかったら、

ここに画像 部分(5文字)を選択して、その上に画像を投稿してください。

f:id:YOLO-co-bi:20200308205025p:plain

 

すると画像が埋め込まれました。

f:id:YOLO-co-bi:20200307161439j:plain



なまえ

ここに文章を入れる

 

 

「なまえ」 の文字が下の方にいってしまっていますね。

backspaceで余白を調整するようにしてください。(これは、文字を入れてから最後にまとめてやればいいです)

 

<3>(編集見たまま画面にて)  名前・文章の書き込み

 再びHTML編集画面にて、名前と文章の書き込みを行います。

 

編集見たまま画面では

下のようにしか見えませんが、プレビュー画面ではちゃんと吹き出しができていますので安心してください。

 

編集見たまま画面

f:id:YOLO-co-bi:20200309011817p:plain

なまえ

ここに文章を入れる

の場所に、入れたい名前と文章を書き込んでください。

 

なお、行変換するとレイアウトが崩れてしまって、あとでの最終調整が大変になりますので、気をつけるようにしてください。

また、名前が不要な場合は削除すれば非表示になります。

 

<4>(プレビュー画面にて)  完成レイアウトの確認

名前と文章を入れてみたら、最後に完成レイアウトを確認してみましょう。

おそらく、こんな風におかしくなっているかもしれません。

 

f:id:YOLO-co-bi:20200307161439j:plain


YOLOCOBI

うまくできましたか?

 

 

 

 

名前の位置がおかしくなっていますね。

最後にレイアウト調整してゆきましょう。

 

<5>(HTML編集画面にて)  レイアウトの調整

 HTMLで最終調整ですが、

 

正しく入っている場合はこのような見え方になっています。

 

<正しいHTML> 

f:id:YOLO-co-bi:20200309013303p:plain

 

<先ほどのHTML> おかしい

f:id:YOLO-co-bi:20200309013332p:plain

余計な改行がされていましたのでHTMLを削除しましょう。

(あるいは、編集見たまま画面で一行backspaceしても修正することができます)

 

修正後、もう一度プレビューで確認してみましょう。

 

f:id:YOLO-co-bi:20200307161439j:plain

YOLOCOBI

うまくできましたか?

 

これでやっとうまくできました!完成です。

 

 あとは何度か吹き出しの埋め込みをやっていくと、慣れてくると思います。

 

f:id:YOLO-co-bi:20200307220459j:plain

YOLOCOBI

いかがでしたか?吹き出しを使ったらブログが楽しくなりますよー♪ぜひやってみてくださいね

You Only Live Once...(人生は一度きり)