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風 #チャット風 #吹き出し #会話 #やり方 #方法
参考サイト様
www.yorimichiblog.com