あさくまろん

CSSで「吹き出し機能」を実装すると、記事の見栄えが良くなる

f:id:asakumamasaru:20170630224557p:plain

CSSで「吹き出し機能」を実装すると、記事の見栄えが良くなるっていう話。

おばんどす。
メガダンサーのアサクママサルでありんす。

CSSで実装できる吹き出し機能使ってますか?

有名ブロガーの「ポジ熊」さんや、「やぎペー」さんの記事を見ていると、吹き出し機能を使われてますよね。「ユーザビリティー」を意識して導入されているのでしょう。

というわけで、CSSで「吹き出し機能」を実装する方法をご紹介します。

CSSで「吹き出し機能」を実装する方法

「シロマティ」さんの記事を見ていただくと、CSSのコピペで簡単に「吹き出し機能」を実装できます。

関連記事:
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 - NO TITLE

シロマティさんの記事にあるCSSを「デザインCSS」にコピペします。

スマホ版では、「スマホ」デザインの「ヘッダ」内にある「タイトル下」にCSSを記入します。HTML内に、CSSを直接記入する場合、styleタグで囲む必要がありますので、

<style>
この中にCSSを記入します
</style>

「この中にCSSを記入します」のところに、CSSをコピペしますよ。

「ブログ記事編集」画面で記事中の「吹き出しにしたい文章」を、

<p class="r-fuki クラス名">ここにテキストを入力</p>
<p class="l-fuki クラス名">ここにテキストを入力</p>

クラス指定したPタグで囲めば、完成。「クラス名」は、CSSやHTMLの言語と被らないものにしましょう。よくわからなければ、「ご自身の名前」をアルファベット表記で書けば問題ないかと。

「r-fuki」は、「吹き出し文章が右」に来て、画像が左に来ます。「l-fuki」は、「吹き出し文章が左」に来て、画像が右に来ますよ。



「吹き出し機能」を実装して、ブログ記事の見栄えを華やかにしてみては、いかがでしょうか。楽しいですよw

では、インターネットの世界でまた会いましょう。

トップへ戻る