きのうに引き続きNO TITLEさんのはてなブログ編集用のChrome拡張機能について触れていきます。
今日は吹き出しの作り方です。吹き出しの作り方も
難しそうで二の足を踏んでいたところくにっぽさん(id:kumato117)が
"吹き出しを作ってみました”という記事を書いていらっしゃって
もうリスペクト&私もやってみた～い！！
そこでNo Titleさんのはてなブログ編集用のChrome拡張機能を思い出し
くにっぽさんと同じ記事を参考にしてみました！！
編集は見たまま編集でやります。
アイコンの用意
まず吹き出しにしたいアイコンの用意をします。
mam
onee
半角ローマ字で簡単でわかりやすい名前をつけておきます。
CSSをコピペします
NO Titleさんの記事に載っているCSSをコピペします。
私は一回ドキュメントに貼り付けます。
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}
CSSの一番下のクラス名のところに先程つけた名前をいれます。
画像のURLのところは、私は記事を書く時、下書きになりますよね？
そこにいつものように"写真を投稿“で画像を貼り付けます。
赤丸のように名前を入れて下書きを残しておくと名前を忘れた時便利です。
右クリックすると画像アドレスをコピーできます。
それを先程の画像のURLのところに貼り付けます。
.mam::after {background-image:url(ttps://cdn-ak.f.st-hatena.com/images/fotolife/j/junpek/20180821/20180821154619.jpg);}
.onee::after {background-image:url(ttps://cdn-ak.f.st-hatena.com/images/fotolife/j/junpek/20180821/20180821154458.jpg);}
CSSをこのように書きかえます。こちら書き換えをしてある見本です。
後記…こんなまわりくどいことしなくても右クリックして画像アドレスをコピーすれば大丈夫です。記事を書いた当時はわかっていなくて回り道してやっていました(´;ω;｀)
書き換えたCSSを貼り付けます
書き換えたCSSをデザインCSSの一番下に貼り付けて、
いよいよ吹き出しを出してみます！！
夏休みの宿題やったの？←吹き出しにしたい文章をマウスでなぞる
こちらのアイコンをクリックしたら
ポップアップが出ます
夏休みの 宿題やったの？
このように右に吹き出しを作りたい時はr-fuki mama のようにうちこみます。
r-fukiと名前（クラス名）の間は半角スペースです。
ヤバい手伝ってよ~~
こちらのように左に吹き出しを作りたい時はl-fuki onee と打ち込みます。(l-fuki 名前）
最初の文字はiではなくてI（エル）の小文字です。
出来たよ！！うれし～♪
良かったじゃん！！それよりおやつちょうだい
私の 憧れの吹き出し！でしたが、このようにはてなブログ編集用のChrome拡張機能を使えば簡単に吹き出しを作ることができますよ～～！！便利なツールでブログを書く時間を短縮できればと思います。NO TITLEさんありがとうございます！
☆カスタマイズは自己責任でお願いします☆
