みなさんこんにちは!こっは〜です!
やーん、嬉しい〜!
これがブログ人生初!吹き出しです♪(v^_^)v
ずっとやりたくてやりたくて、ついに今日!
せかせかやりましたよぉ。
吹き出しを作りたいっていうみんなの為に紹介しますね♪
(乱用しちゃいそう......)
はてなブログで吹き出し会話形式を楽しもう!
作り方は簡単です!コピペだけで済みます!
(というか、もうなんでもコピペで作れちゃうのね。
先人様達ありがたや...)
CSSのコピペで吹き出しを作ろう!
今回こちらのサイトを参考にさせていただきました。
こちらにアクセスすると、
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>
さて、プレビューしてみてください!どうですか??
出来ましたか?
初心者でも簡単にデザインをカスタマイズできますね♪
自分仕様にしていけばしていくほど楽しくなるよブログ......
やぴー!
最後まで読んでいただきありがとうございます☆
こっは〜。