LINE風吹き出しで記事を書いてみた! atはてなブログ

2019年8月20日

こんにちは!今日は設定講座です。

LINE風吹き出し実装方法をメモしたので見て行ってね!

アイコン準備

まずは吹き出しに使うアイコンを作成します。

今は自分でアイコンを手軽に作成できるアイコンメーカーアプリもたくさんあるので

自分の好みで作成するのが良いかと思います◎

アイコンメーカー

私のオススメアイコンメーカーはコレ↓

こんな感じでスヌーピー風のアイコンが簡単に作れます🐶

↓画像クリックで飛びます🛫

f:id:poohsuke1108:20190708173707j:plain

写真を丸く切抜き

僕は実写なんだけど??

モコちゃんのアイコンは画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNSのプロフィール写真などにどうぞを使いました!

画像をアップロードするだけで丸く切り取ってくれるので、簡単ですよ😃

イラストオーダーメイドサービス

私のアイコンイラストは以前、某動画配信サービスで放送を行っていた時に

仲良くなった方に書いていただいた似顔絵です😊💕

その時からSNS等では基本的にこのアイコンをずっと愛用させて頂いています。

アイコンメーカーじゃなくて似顔絵書いて欲しい!という方はイラストレータさんが

似顔絵を描いてくれるサービスがあるので、そちらを利用するのが一番です🎊

サービス紹介

📷ココナラ 

イラストレーターさんにブログアイコンやSNSアイコンを描いてもらえます👌

 📷【SKIMA】 

個人間 のイラストオーダーメイドサービスです🙌SNSアイコン、似顔絵お気軽に! 

アイコン準備OK?

おっけー!やっと登録だね◎

アイコンをはてなブログに登録

アイコンが作成出来たら、これからの設定に必要不可欠な画像URLを取得します。 

そのためにアイコン画像をはてなブログ自体に登録(アップロード)をしていきます。

手順通りにやれば全然難しくないよ!いってみよー♪

1.はてなフォトライフのページへ行きます。

f:id:poohsuke1108:20190709132341p:plain

f:id:poohsuke1108:20190709132343p:plain

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

f:id:poohsuke1108:20190709132351p:plain

3.アイコン素材をドラッグアンドドロップで持ってきます。

 *枠内クリックでフォルダから選択も可能です。

f:id:poohsuke1108:20190709132354j:plain

4.アップロードが完了すると、枠の下にアイコン素材が表示されます。

5.マイフォトをクリックします。

f:id:poohsuke1108:20190709132714p:plain

6.アップロードしたアイコン素材を右クリックします。

7.「画像アドレスをコピー」をクリックします。

f:id:poohsuke1108:20190709132825j:plain

8.コピーしたアドレスをメモ帳に貼り付けておきます。

 *この時、アイコンの名前も一緒にメモしておくと

  どのアドレスがどのアイコンだっけ・・・💦とならずに済みますよ♪

これでアイコンのアップロード完了だよ!簡単でしょ?

はてなブログへ実装

ここから少し専門的になるけどコピペで乗り切れるから頑張って!

1.参考サイト様のリンクからCSSコードをコピーします。

はてなブログでLINE風の会話形式の吹き出しを使ってみた! – ヨリミチ

2.コピーしたCSSコードは一旦メモ帳に貼り付けます。

3.CSSコードの最下部を変更します。

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

 「クラス名」→アイコン素材の名前

 「画像のURL」→はてなブログに登録した際にメモ帳へ貼り付けたURL

4.はてなブログのデザインタブを開きます。

f:id:poohsuke1108:20190709162257p:plain

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

f:id:poohsuke1108:20190709162550p:plain

 *既にカスタマイズをしている人はここにCSSコードが記載されています。

  せっかくのカスタマイズを台無しにしてしまわないよう、一旦ここで全ての

  コードをコピーしてメモ帳に残しておきましょう。

f:id:poohsuke1108:20190709162552p:plain

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

これではてなブログで吹き出しを使う準備完了だよ◎

ひたすらコピペしてたら出来たみたい! 

実際の使い方

ここからは実際に記事を書く際、どうやってアイコンを出すかを教えるね。

1.ブログ編集画面で、HTML編集タブを開きます。

2.吹き出しを入れたい場所にタグを追加します。

f:id:poohsuke1108:20190709163049p:plain

 <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風 #チャット風 #吹き出し #会話 #やり方 #方法

参考サイト様

www.yorimichiblog.com