ゆーんの徒然日記

3歳の甘えん坊主りーくんとの毎日。

【はてなブログ】左アイコンから吹き出しを出すCSSφ(..)家族分つくってみた。

こんにちは、ゆーんです。

お気付きの方いらっしゃいましたでしょうか。

最近、アイコンからお喋りする「吹き出し」を取り入れましたー!!

tmt_krkさん最初に気付いてコメントありがとうございました(〃▽〃)

苦戦した…!!

めちゃくちゃ苦戦したけれど、じっくりCSSとにらめっこして自分の使いたい吹き出しCSSにすることができました~(;O;)

  • 左アイコンからのみ吹き出しを出したい
  • 枠の色を自分好みに変えたい
  • 3人以上の人物を登場させたい
  • 吹き出しとか高度な技、絶対ムリ!!…でも気になる…

てな方の参考になるかと思います。

機械オンチなわたしでも一目見たらどこを変えたら良いか分かるよう色つきにしてφ(..)メモしました。

左アイコンから吹き出しのCSS

今回わたしが参考にさせて頂いたのはこちらのサイト。

www.blacklist-kirin.com

[はてなブログ 吹き出し]で調べると最初に出てくる会話吹き出しの大元となってそうなサイトのCSSにアレンジを加えて、枠に色が付いたLINE風の可愛い吹き出しにしてくれているサイトです。

左右のアイコンから吹き出しを出して「2人の会話形式」で使用したい方は、そのままこちらのサイトのCSSを使用されたら良いと思います。

わたしは家族3人分のアイコンをそれぞれ色別で全て左からお喋りさせたかった為、自分が分かりやすいよう上記サイトのCSSから必要な部分のみ抜粋して使用させていただきました。

デザインCSSに貼るコード

/* アイコン左吹き出しCSS */
.entry-content .r-fuki {
position: relative;
width: 82%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 15px;
border-radius: 6px;
background-color: 吹き出し枠色コード;
z-index: 1;
}
.entry-content .r-fuki {
margin: 20px 0 40px 17%;
}
.entry-content .r-fuki::before {
position: absolute;
content: "";
top: 16px;
width: 13px;
height: 13px;
background-color: 吹き出し枠色コード;
z-index: 2;
}
.entry-content .r-fuki::before {
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .r-fuki::after {
position: absolute;
content: "";
width: 65px;
height: 65px;
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 アイコン枠色コード;
}
.entry-content .r-fuki::after {
left: -107px;
}
@media screen and (max-width: 620px) {
.entry-content .r-fuki {
width: 73%
}
.entry-content .r-fuki {
margin-left: 27%;
}
}
@media screen and (max-width: 478px) {
.entry-content .r-fuki::after {
width: 55px;
height: 55px;
border-radius: 30px;
}
.entry-content .r-fuki::after {
left: -84px;
}
}

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

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

色が付いているところが、変更箇所です。

メモ帳などに貼りつけて変更していきます。

“r”部分を変え登場人物を増やす

CSSの中で何度も登場する.entry-content .r-fuki

これはこのコード全体の名前部分です。

元となっているコード(はてなブログの吹き出し会話のCSSをLINE風にアレンジしてみた - ブラックリストのキリンです)を確認してもらえたら分かると思うのですが、

.entry-content .r-fuki

.entry-content .l-fuki

が順番に繰りかえし出てきます。

“r”の場合は吹き出しが右側(right)

“l”の場合は吹き出しが左側(left)のコードです。

わたしは左アイコン右吹き出しのみ使いたかったので、この“r”のコードのみ抜き出しました。(右アイコン左吹き出しのみ使いたい場合は“l”コードのみ抜き出せば良いということです)

そしてこの部分、right/leftで分かりやすく頭文字を取っているだけで、変更可能です。

複数人のアイコンでそれぞれコードを作りたい場合はこの“r”部分を変えてコードを作っていきます。

例えば、

わたしの場合はy-fuki

ぼくの場合はr-fuki

この部分を変更するだけで、何人分でもコードを作ることができるというわけですね♪

とりあえず1人分のアイコンのみでOKという方は(ブログのアイキャッチ画像を使用するなど)この部分はそのまま変更せずに“r”で使えば良しです。

わたしは家族3人ぶん作りたかったので、このコードを3つコピペして、それぞれ名前を変えました。

吹き出しの枠の色を変える

次に色の変更。これは簡単です。

コード内に書いている通り、吹き出しの枠の色のコードアイコンの周りの枠の色のコードをそれぞれ指定、変更することができます。

色コードはこちらを参考に。

www.colordic.org

#数字をコピペするだけでOKです。

わたしは吹き出しとアイコンの枠の色は同じで良いと思った為、3か所すべて同じ色コードを貼りつけました。

思ってるより吹き出しの色が主張してくるので、かなり薄めの色でいいと思いますよ(^^)

わたしはパステルの下の方の色を使いました♪

画像を指定し名前をつける

クラス名

クラス名は、吹き出しの名前のようなものです。

実際に吹き出しを使用する際にはHTMLにこのクラス名を書き込むことになるので(あとで説明します)、分かりやすいものにしておくと良いですね。

例えば、

ぼくのクラス名はri-

りーくんのri-です。とってもシンプル(笑)

画像のURL

画像のURLははてなフォトライフより取得できます

わたしははてなブログアプリからまとめて下書きに画像をアップし使用しました。

読者登録させて頂いているあやぞうさんがとても詳しく説明して下さっていますので、そちらを参考にしてください。

mamazakki.hatenablog.com

あやぞうさんのブログにオーガニック検索でたどり着くのはこれで2度目です。

1度目は息子の頭が臭すぎたときでした。毎度お世話になります(*^^*)

はてなフォトライフより取得した画像URLをコード内に貼りつけたら、吹き出しの準備完了です!

同じ色の吹き出しで違う画像を使う場合

ちなみに同じ色の吹き出しで違う画像を使いたい場合は、この

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

で色々なパターンを作ってコード下に追加するだけでOKです。

わたしの場合は、同じりーくんのお顔でも色々と表情を付けたかったので、何パターンか作りました。

使うのが楽しみ。

コードをデザインCSSに貼りつける

それでは、完成したコードを

ダッシュボード→デザイン→カスタマイズ→デザインCSS

の1番下に貼りつけましょう。

この時、他のコードや設定をいじってしまわないよう注意してくださいね。

わたしは1度やらかしています。

www.xoyu-nxo.work

記事内で吹き出しを使う(HTML記入)

コードを貼りつけたらいよいよ記事内で使ってみます。

記事内に吹き出しを貼りつける際はHTMLコードを使います。

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

変更するのは“r”部分クラス名です。

呼び出したいアイコンのコードの名前とクラス名に入れ替えてあげればOKです。

これを、HTML編集にコピーしてテキスト入力すれば…

ちゃんと吹き出しになったかな♪

ちなみにわたしはブログで良く使うコードはユーザー辞書で単語登録しています。

今回のだと、読み方「ふきだし」で単語「<p class="r-fuki クラス名">テキスト</p>」を登録しておくんですね。

同じ感じで「わく」や「まーかー」なんかも登録しています。

1つ1つコードを覚えてられないので便利です(ノ∀`)

まとめ

ずっと前からやってみたかった「吹き出し」でお喋り、CSSとのにらめっこはしんどかったけども(right/left部分を変えられることに気付くまでが長かった←)実際に導入してみると使うのはとっても簡単でテンションあがってます( ^)o(^ )

このアイコンのりーくんとわたし、ほぼ日での育児記録でずっと登場している落書きなのです。

(字の汚さと雑さよ;)

こんな感じで、ブログでもりーくん喋らせたいな~…と思いつつ、難しそうで手を出せていなかった吹き出し。

ようやっと取り入れられて嬉しい~(*^^*)

プロの方にちゃんと可愛いイラスト書いてもらおうか…なんてことも考えたけれど、どんだけ下手でも自分の書くりーくんが1番愛着があるから、りーくんがちっちゃいうちはとりあえずこれで良いかな(笑)

以上!吹き出し導入編でしたー!!

▽実はパパも一応作ったよ(笑)

このクオリティ。ふふふ

▼はてなブログ関連の記事はこちら

www.xoyu-nxo.work

www.xoyu-nxo.work

www.xoyu-nxo.work

www.xoyu-nxo.work

 ゆーんでした!