吹き出しCSSの活用 〜サイトオリジナリティを高める〜

装飾

吹き出しCSSを使うシーン

 

がんちゃん
がんちゃん

吹き出しの効果や使い方を説明します。

吹き出しの効果

  • ポイントを一言で伝えられる
  • 読者の目に留まる
  • 分かりやすい印象を与える

 

どんなときに使う?

  • ユーザーの口コミを表現
  • キャラクター同士の対話
  • ブログ筆者がポイントを伝える

 

サイトの世界観を作る(おすすめ)

対話形式の吹き出しを使ってオリジナルキャラクターを登場させると、先生、生徒役の対話が実現できます。

 

よしお
よしお

先生、おはようございます!

ホー先生
ホー先生

よしおくん、来るの遅いですよ。今何時だと思っているんだい。

 

 

先生、生徒役の対話は 先生=筆者 生徒=読者 というターゲットイメージをそのまま映し出したものですので「初心者向けコンテンツ」に有効です。

 

キャラクターアイコンの制作費用は1,000〜5,000円程度。この予算でサイトの世界観が創れて全ページに活用できるので非常に対費用効果が高い手法です。

 

おすすめアイコンは、擬人化・被り物・ミニキャラ・デフォルメ。

可愛らしいアイコンでサイトの親しみやすさをアップしましょう。

 

▼ おすすめ擬人化アイコン

猫擬人化アイコン

 

動物アイコン

 

▼ 被り物アイコン

頭乗せアイコン

 

▼ おすすめミニキャラアイコン

ミニキャラアイコン

 

ミニキャラアイコンおすすめ

 

吹き出しが標準装備されているWordPressテーマ

最近では、WordPressテーマに標準装備されていることが多く吹き出しCSSを準備する必要がなくなりました。

 

Cocoon(無料テーマ)

 

がんちゃん
がんちゃん

当サイトはCocoonを使用しています。

吹き出し管理画面も用意されているのでいくつもオリジナル吹き出しを作成できて便利です。他テーマでは画像を準備してショートコードを新たに作る必要があるのでCocoonは一手間なくなった印象です。

公式サイト https://wp-cocoon.com/

 

SANGO(有料テーマ)

吹き出し(SANGO)

引用 https://saruwakakun.com/sango/shortcode-list#9

 

JIN(有料テーマ)

吹き出し JIN

引用 https://jin-theme.com/manual/atlas-editor03/

 

吹き出しの効果的な使い方

余白を空ける

吹き出しを使うおすすめな方法は、【余白を空ける】ことです。

がんちゃん
がんちゃん

吹き出しを上手に使うには上下の余白を空けましょう。

吹き出しの上下の余白が詰まっていると読み飛ばしたり窮屈な印象を受けます。

 

上の例では余白を無くしています。では今度は余白を空けてみましょう。

 

がんちゃん
がんちゃん

余白を空けた場合はこちらです。

 

いかがでしょうか。吹き出しの周りがスッキリして見やすくなっていませんか?

ちょっとした気遣いで読者の方のストレスをなくすことができるので、吹き出し以外でも余白を空ける癖をつけてみましょう。

 

文章の余白 〜息継ぎライティング〜
息継ぎライティング 今回は、文章に息継ぎをきちんと入れましょうというお話です。 ▼ さっそく、次の文章例をご覧ください。 息継ぎのない文章 この春から、運動不足解消とお小遣い稼ぎのため、チラシ配りのアルバイトを始めた私。...

 

 

▼ キャラクターアイコン作成の体験談

ココナラのアイコン作成「男前アイコン」で好印象をゲットできるのか
Twitterとブログの吹き出し用にアイコン作成を初依頼してみました。Lineにアイコンを使う人も多いのだそう。 アイコン作成をしようと思った理由 有名ブロガー クロネさんのこの発言。 クロネさんは、擬人アイコンによって成...
この記事を書いた人
がんちゃん

がんちゃんブログ運営者。ネットショップ運営・ウェブ制作との兼業アフィリエーターです。アフィリエイトにランチェスター戦略を取り入れた経営を目指しています。

がんちゃんをフォローする
装飾
がんちゃんをフォローする
がんちゃんブログ

コメント