はてなブログで使える吹き出しをつくる

こんにちは！
この記事では、この様な吹き出しをはてなブログで使うための方法を書いていきます。

吹き出しの作り方

今回は、画像を使わずCSSで作れる吹き出しを使おうと思います。

CSSの"border"、"border-color"をうまく設定すると3角形が作れることを利用して、吹き出しがつくれます。以下のサイトで詳しく説明されていますので、気になる方はご覧になってはいかがでしょうか。

今回は、こちらで作られた左矢印をもつ吹き出しをベースとして使わせていただきました。

ブログ管理画面の、 デザイン > カスタマイズ > デザインCSS を開いて、コードをクリックして入力画面を出します。

そこで、次のようなコードを追加します。

(※ 追加です、もとあるコードを削除しないようご注意ください。)

記事を新規作成して、「Markdown」か「はてな記法」のモードで次のように書くと、吹き出しつきのアイコンを表示できます¹。

表示例:

内容１行目
内容２行目…

この記事でははてなブログに設定する場合を書きましたが、HTMLが記述できるほかのブログや Wordpress等でも使えると思います。

ではまた！