monozuku

PC、DIY、電子工作、時々ロードバイク等の情報を発信しています

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

f:id:charchang:20170610163428j:plain
こんにちは!
この記事では、この様な吹き出しをはてなブログで使うための方法を書いていきます。

吹き出しの作り方

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

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

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

CSSの設定方法

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

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

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

記事への追加方法

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

表示例:

f:id:charchang:20170610163428j:plain
内容1行目
内容2行目…

おわりに

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

ではまた!


  1. はてなブログではこのようにHTMLで記述もできますが、その場合は改行の際に<br/>が必要です。