ブログ記事を読みやすくするために、「囲み枠」「マーカー」「吹き出し」などの装飾を使っていますか？
装飾をうまく使うと、文章が整理されてぐっと読みやすくなります。
でも、やりすぎると逆に読みにくくなることもあるよね…
そうなんです。装飾は「見た目」よりも「読みやすさ」を優先することが大切です。
この記事では、HTMLをコピペするだけで使えるおすすめ装飾テンプレをまとめました。
装飾の基本ルール
装飾は「増やす」よりも「整える」ことが大切です。
- 1画面に装飾は1つまで
- 色は3色以内におさえる
- 本当に重要な部分だけを強調する
装飾の目的は「目立たせること」ではなく、情報を整理することです。
すぐ使える囲み枠テンプレ
① シンプルまとめ枠
<div style="border:2px solid #6bbf8f;padding:15px;border-radius:6px;">
ここにまとめ文章
</div>
ここにまとめ文章
▶ 記事の要点整理におすすめです。
② 注意枠
<div style="background:#e9f7ef;padding:15px;border-left:5px solid #28a745;">
ここに注意点
</div>
ここに注意点
▶ 補足や注意事項を目立たせたいときに使います。
③ タイトル付き囲み枠
<div style="height:10px; margin-left:10px;">
<span style="background:#6bbf8f;color:#ffffff;padding:5px 10px;border-radius:5px;display:inline-block;">
■ポイント■
</span>
</div>
<div style="border:2px solid #6bbf8f;padding:25px 15px 15px;border-radius:6px;">
ここに本文
</div>
■ポイント■
ここに本文
▶ 手順説明やチェックポイント整理に便利です。
マーカーの使い方
黄色マーカー
<span style="background:linear-gradient(transparent 60%, #ffeb3b 60%);">
強調したい文章
</span>
強調したい文章
グリーンマーカー
<span style="background:linear-gradient(transparent 60%, #b7e4c7 60%);">
補足的な強調
</span>
補足的な強調
※1段落に何度も使わないようにしましょう。
吹き出しの使い方
会話形式にすると、やわらかい印象になるよ。
<p class="l-fuki poyara1">テキスト</p>
※吹き出しは事前にCSSと定型文の設定が必要です。
装飾しすぎると読みにくくなる理由
装飾は便利ですが、使い方を間違えると逆効果になります。
- 視線が散ってしまう
- 重要な部分がわからなくなる
- スマホで見づらくなる
「全部目立たせる」と、結局どこも目立たなくなってしまうよ。
囲み枠・マーカー・吹き出しの3つがあれば十分です。
まとめ
ブログ装飾は、読みやすくするための道具です。
- 囲み枠で整理する
- マーカーで強調する
- 吹き出しでやわらげる
まずはこの記事のテンプレを使って、シンプルな装飾から始めてみましょう。
きれいで読みやすい記事を一緒に作っていこう！
はてなブログで収益化したい方へ
初心者向けに、収益化までの手順をまとめています。
