【初心者も出来る!】はてなブログで吹き出し会話形式の記事を作る!

f:id:mk615ts13:20190219212733j:plain

 

みなさんこんにちは!こっは〜です!

 

やーん、嬉しい〜!

これがブログ人生初!吹き出しです♪(v^_^)v

 

ずっとやりたくてやりたくて、ついに今日!

せかせかやりましたよぉ。

 

 

吹き出しを作りたいっていうみんなの為に紹介しますね♪

 (乱用しちゃいそう......)

はてなブログで吹き出し会話形式を楽しもう!

作り方は簡単です!コピペだけで済みます!

(というか、もうなんでもコピペで作れちゃうのね。

先人様達ありがたや...) 

CSSのコピペで吹き出しを作ろう!

www.notitle-weblog.com

 

今回こちらのサイトを参考にさせていただきました。

 

こちらにアクセスすると、

CSSを作ってくださっていますのでまずはコピー。

 

はてなブログに戻り、

 【ブログ管理画面】→【デザイン】→【デザインCSS】

デザインCSSの中に先ほどコピーしたCSSをペーストします。

(場所はどこでも大丈夫です。)

 

吹き出しに使うアイコンを選ぶ

先にアイコンを選び、画像のURLを取っておきます!

(簡単だから大丈夫!)

はてなフォトライフ

使っているかたはそこから使う写真に右クリックで【画像のアドレスをコピー】で終わりです。

使ったことがない方は、

いつも記事を書く画面の右側を見てください。

 

【写真を投稿】を押すと、今までアップした画像が出てきますね。

新しくアイコンにする画像を読みこむ場合はここに画像をペーストしてきてね。

 

画像をクリックして上の

 

写真を投稿

+写真を投稿

今月のファイル利用量   ⚪︎%

HatenaBlog(Private) ◻️←ここ!!!ここ押すと飛べます!

 

それで画像のアドレスをコピーしてください。

 

 

わかったかな?

 

コピペしてきたCSSを簡単に変更する!

先ほどコピペしてデザインCSSに貼ったきた最後の行の

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

 こちらの部分を自分でカスタマイズすることになりますが、簡単!

まず変えるのは2箇所。

【クラス名】【画像のURL】のみです!

 

クラス名は吹き出しのアイコンの名前です。

半角英数字と「-ハイフン」「.ピリオド」のみ使えます。

 

簡単でわかりやすい名前をつけてみましょう!

(アイコンが犬だったら「dog」とかw)

 

そして、先ほどの画像URLを貼ります。

 

完成!!!

 

 

いよいよ吹き出し設置!記事投稿しよう! 

あとは、記事を書く時に、吹き出しを入れたい箇所を

HTML編集で入れます。

 

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

 これをHTML編集で入れて、

先ほどの【クラス名】(dogとか)

と、吹き出しにしたい文章を【テキスト】の所にいれます。

 

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

このlはlightです。吹き出しが右から出てきます。

左から出したい人はここを「r」にしてください。

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

 

さて、プレビューしてみてください!どうですか??

 

出来ましたか?

 

初心者でも簡単にデザインをカスタマイズできますね♪

 

自分仕様にしていけばしていくほど楽しくなるよブログ......

 

やぴー!

 

 

 

 

最後まで読んでいただきありがとうございます☆

 

 

こっは〜。