LINE風吹き出しで記事を書いてみた! atはてなブログ
こんにちは!今日は設定講座です。
LINE風吹き出し実装方法をメモしたので見て行ってね!
アイコン準備
まずは吹き出しに使うアイコンを作成します。
今は自分でアイコンを手軽に作成できるアイコンメーカーアプリもたくさんあるので
自分の好みで作成するのが良いかと思います◎
アイコンメーカー
私のオススメアイコンメーカーはコレ↓
こんな感じでスヌーピー風のアイコンが簡単に作れます🐶
↓画像クリックで飛びます🛫

写真を丸く切抜き
僕は実写なんだけど??
モコちゃんのアイコンは画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNSのプロフィール写真などにどうぞを使いました!
画像をアップロードするだけで丸く切り取ってくれるので、簡単ですよ😃
イラストオーダーメイドサービス
私のアイコンイラストは以前、某動画配信サービスで放送を行っていた時に
仲良くなった方に書いていただいた似顔絵です😊💕
その時からSNS等では基本的にこのアイコンをずっと愛用させて頂いています。
アイコンメーカーじゃなくて似顔絵書いて欲しい!という方はイラストレータさんが
似顔絵を描いてくれるサービスがあるので、そちらを利用するのが一番です🎊
サービス紹介
イラストレーターさんにブログアイコンやSNSアイコンを描いてもらえます👌
個人間 のイラストオーダーメイドサービスです🙌SNSアイコン、似顔絵お気軽に!
アイコン準備OK?
おっけー!やっと登録だね◎
アイコンをはてなブログに登録
アイコンが作成出来たら、これからの設定に必要不可欠な画像URLを取得します。
そのためにアイコン画像をはてなブログ自体に登録(アップロード)をしていきます。
手順通りにやれば全然難しくないよ!いってみよー♪
1.はてなフォトライフのページへ行きます。

↓

2.アップロードをクリックします。

3.アイコン素材をドラッグアンドドロップで持ってきます。
*枠内クリックでフォルダから選択も可能です。

4.アップロードが完了すると、枠の下にアイコン素材が表示されます。
5.マイフォトをクリックします。

6.アップロードしたアイコン素材を右クリックします。
7.「画像アドレスをコピー」をクリックします。

8.コピーしたアドレスをメモ帳に貼り付けておきます。
*この時、アイコンの名前も一緒にメモしておくと
どのアドレスがどのアイコンだっけ・・・💦とならずに済みますよ♪
これでアイコンのアップロード完了だよ!簡単でしょ?
はてなブログへ実装
ここから少し専門的になるけどコピペで乗り切れるから頑張って!
1.参考サイト様のリンクからCSSコードをコピーします。
はてなブログでLINE風の会話形式の吹き出しを使ってみた! – ヨリミチ
2.コピーしたCSSコードは一旦メモ帳に貼り付けます。
3.CSSコードの最下部を変更します。
.クラス名::after {background-image:url(画像のURL);}
「クラス名」→アイコン素材の名前
「画像のURL」→はてなブログに登録した際にメモ帳へ貼り付けたURL
4.はてなブログのデザインタブを開きます。

5.デザインCSSタブを開きます。

*既にカスタマイズをしている人はここにCSSコードが記載されています。
せっかくのカスタマイズを台無しにしてしまわないよう、一旦ここで全ての
コードをコピーしてメモ帳に残しておきましょう。

6.CSSコードを貼り付けます。
これではてなブログで吹き出しを使う準備完了だよ◎
ひたすらコピペしてたら出来たみたい!
実際の使い方
ここからは実際に記事を書く際、どうやってアイコンを出すかを教えるね。
1.ブログ編集画面で、HTML編集タブを開きます。
2.吹き出しを入れたい場所にタグを追加します。

<p class="me-line クラス名">文章</p>
<p class="you-line クラス名">文章</p>
クラス名→アイコン素材につけた名前です。
文章→吹き出しで入れたいコメントを入力します。
me-line→自分の吹き出し(背景がグリーン)↓
me-line
you-line→会話相手の吹き出し(背景がホワイト)↓
you-line
この2つに注意!
吹き出し内の改行はできる?
試しに改行してみたんだけどちゃんとできてるかな?
あれ・・・?なんか2つに分かれてる😲!
吹き出し内の改行は「Shift」+「Enter」でしないと!
「Enter」だけでは改行にならないので、注意してね。
編集見たままタブでは吹き出しがなくなってる!?
上の方法で吹き出しを設定しても、編集見たままタブには反映されないのです・・・😢
吹き出しの反映内容を見たい場合はプレビュータブから確認するようにしてください!
チャレンジしてみて・・・
調べものをしている時、よくこのような吹き出しを見ていました👀
自分も使ってみたいけど、CSSって何・・・?っていうレベルの超初心者なので
難しいかなと諦めていたのですが、手順通りに進めていけば
意外と簡単に実装出来ちゃうもんですね💕
これからはレビュー記事とかでもちょいちょい使っていこうと思います。
調べてみると他にも色んなやり方があるのですが、超初心者でも出来るような
簡単な方法はこれかな~と!ぜひ試してみてください°˖✧◝(⁰▿⁰)◜✧˖°
ではまた次回👋
🔑Key Word
#はてなブログ #LINE風 #チャット風 #吹き出し #会話 #やり方 #方法
ディスカッション
コメント一覧
まだ、コメントがありません