おしゃれ｜はてなブログをカスタマイズ｜見出しタグをデザインCSS
数ある中から当ブログを訪問していただきありがとうございます
この記事では
hタグ（見出し文字）をおしゃれにカスタマイズする方法について
CSSに追加するコードを分り易く解説しています
こんな方におすすめ
- ブログをおしゃれにカスタマイズしたい
- はてなブログのカスタマイズ方法が知りたい
- コピペで手軽に変えたい
見出し（ｈ１～ｈ６タグ）をおしゃれにカスタマイズしていきましょう
見出しタグ（ｈタグ）とは
そのままですが記事の見出しとして使います
見出しタグは（ｈ1～ｈ6）まであり、数字が少ないほど大きな見出しであることを表しています
適切に使うことでユーザビリティの向上を目指しましょう
見出しタグは２つの重要な役割を持っています
POINT
- 読者に対する役割
- 検索エンジンに対する役割（SEO対策）
読者に対する役割
各文章に見出しを付けることで記事全体にまとまりができます。読者はより読みやすく理解しやすくなることでユーザビリティが向上します
検索エンジンに対する役割（SEO対策）
Google検索エンジンもユーザビリティが向上する見出しタグを重要視しています。見出しタグがある記事はユーザーにとって重要な情報である可能性があると判断するからです
見出しタグを適切に使うことで検索結果の順位に影響がでてきます
見出しタグの使い方
気を付けるポイントは5つ
POINT
- <h1>はタイトルのみ（１個だけ）
- 記事には<h2>～<h6>を使う
- <h2>大 ～<h6>小
数字が小さいほうが見出しの強調が強い役割がある - 同じ文節中に小見出しを使った後に大見出しを使わない
- 見出しタグで本文を書かない
見出しのタイトルのつけ方
おすすめするタイトルのつけ方は『キーワードを入れる』『なるべく短くする』ことでSEOとしての効果があると言われています
CSSコードでオシャレにデザイン
見出しタグはCSSにコードを追加する形でデザインしていきます
CSSコード
CSS
- h〇にデザインしたい見出しタグの数字を入れます
- ｛｝の間にデザインコードを入れていきます
個々のデザインコードの組み合わせで一つのデザインを作るイメージになります - 【color: #〇〇〇〇〇〇;】は文字色を指定するコードです
他にもこんなコードがあります
基本的なコードの一部になります
伝えたいことはコードの組み合わせによってデザインされるということです。コードの種類・意味を把握するとより細かく調整ができるようになります
カラーコードに関してはこちらを参考にされてください
おすすめデザイン
CSSのデザインコードはサルワカさんのサイトが
非常に分かり易くまとめられていますのでおすすめです！！
はてなブログのカスタマイズの仕方
はてなブログの注意点
- はてなブログの見出しタグの指定は<h3>～<h5>までになります
- <h1>はブログタイトルで使用しています
- <h2>はブログ説明文で使用しています
- 指定方法は【.entry-content h〇 {}】｛｝の間にコードを入れていきます
指定できるのは<h3>～<h5>
カスタマイズ方法
例えば<h3>のデザインを指定したい時
下記のコードをCSSに追加します
カスタマイズの仕方
- 【デザイン】⇒【カスタマイズ】
- ｛｝デザインCSSをクリックします
- コードを追加します
- 変更を保存するをクリックして完了です
まとめ
いかがでしょうか
見出しタグを目立つようにするだけで記事の構成を読者に伝えることができるようになったはずです
CSSコードも基本的なところだけでも意味と書き方を覚えておけば、自分で応用が利くデザインが出来るようになります
最初は難しいかもしれませんが少しずつチャレンジしていきましょう
おすすめ書籍
当ブログでは
アフィリエイトで収入を目指したい！
しかし
ブログ運営は未経験で初心者である
そんな方に向けて
ブログ運営の仕方からアフィリエイトの始め方までを初心者アフィリエイターにおすすめなブログサービス
はてなブログ
を使用して分かり易く解説していくブログを目指しています
最後まで読んでいただきありがとうございました
あわせて読みたい記事
