アメブロ 見出し枠CSS 21選

この記事を読むのに必要な時間は約 12 分です。

[アイキャッチモデル: 茜さやさん]

この記事で伝えたいこと
  • ブログを書くときは見出しを入れて段落を分けよう
  • 使える見出し配色21選

このブログは基本的に、メンタルセラピストやスピリチュアル系を仕事にしたい方で、ブログを書いている方でITが苦手な方を対象にしています。

ブログを見だし分けして要点をまとめよう

あまり読まれていないブログによくあるのが、だらだと文章が続いて段落分けされていないというのがあります。

そして無駄な改行。

どちらにも共通して言えるのが、読みづらいということ。

見出しを入れる時に使えるCSSを今回はお伝えしていきます。


大見出し・中見出し・小見出しのデザインを統一する

ブログ記事の見出しタグの使い方で解説しているようにアメブロの場合は大見出し(h2タグ)中見出し(h3タグ)小見出し(h4タグ)を使い分けたほうがSEO対策にもなり読みやすくもなります。

この時、デザインを統一しておくことは重要です。

デザインに統一性を持たせると見た目だけでなく読みやすさも向上します。

見出し枠を使うにはCSS編集用デザインをお使いください

今回お伝えするデザインはブログ画面に直接貼り付ける方法ではなくCSS編集用デザインを使用してCSSを一か所にまとめる方法を採用しています。

理由は以下の通りです。

CSS編集用デザインを使う理由
  • 毎回見出しの色を変えたりするのはブログとしては統一感がないのであまりいいとは言えない
  • HTMLが長くなって文章が書けなくなるというような問題が出ない可能性が0ではない
  • 毎回コピペするのが面倒

今回の内容が難しいように思えるかもしれませんが、設定は一度だけなので一度設定してしまえばあとは自動で枠線がつくようになります。

各見出しの下にコピペでも使える用のコードも掲載しています。


見出しのデザイン

ここからは見出しのデザインのCSSをご紹介していきます。

大見出し

中見出し

小見出し

CSS編集用デザイン用


朱色

大見出し

中見出し

小見出し

CSS編集用デザイン用

ピンク

大見出し

中見出し

小見出し

CSS編集用デザイン用


大見出し

中見出し

小見出し

CSS編集用デザイン用

青2

大見出し

中見出し

小見出し

CSS編集用デザイン用

ライトブルー

大見出し

中見出し

小見出し

CSS編集用デザイン用

ライトブルー2

大見出し

中見出し

小見出し

CSS編集用デザイン用

浅葱

大見出し

中見出し

小見出し

CSS編集用デザイン用

大見出し

中見出し

小見出し

CSS編集用デザイン用

大見出し

中見出し

小見出し

CSS編集用デザイン用

黄緑

大見出し

中見出し

小見出し

CSS編集用デザイン用

ペパーミントグリーン

大見出し

中見出し

小見出し

CSS編集用デザイン用

大見出し

中見出し

小見出し

CSS編集用デザイン用

紫(少し暗め)

大見出し

中見出し

小見出し

CSS編集用デザイン用

薄紫

大見出し

中見出し

小見出し

CSS編集用デザイン用

オレンジ/橙色

大見出し

中見出し

小見出し

CSS編集用デザイン用

薄オレンジ/薄橙色

大見出し

中見出し

小見出し

CSS編集用デザイン用

黄色

大見出し

中見出し

小見出し

CSS編集用デザイン用

ちょっとオシャレなくすみカラー1

色名がわからない色合いですが、ちょっと大人かわいい色味です。

大見出し

中見出し

小見出し

CSS編集用デザイン用

ちょっとオシャレなくすみカラー2

これも色名がわからない色合いですが、ちょっと大人かわいい色味です。

大見出し

中見出し

小見出し

CSS編集用デザイン用

まとめ

いかがだったでしょうか?

今回はデザインよりも配色を重視したCSSの紹介になってます。

今後はこの記事に別の見出しデザインも追加していく予定です。

各見出しの配色はウェブ配色ツール Ver2.0を参考にしています。

 


最後までお読みいただきありがとうございます。

今回の記事があなたの役に立ったなら幸いです。

質問疑問ございましたらコメント欄へお願いします。

アメブロ関連記事

設定編

技術編

デザインCSS集

集客編

WordPress関連記事

設定・インストール

トラブルシューティング

動作環境・リリース情報