【初心者でも簡単】見出しをおしゃれにする方法!【はてなブログ】


スポンサードリンク

 

はてなブログにお越しの皆さん、こんにちは!

 

f:id:m_m_motti:20190702162445j:plain



 

 

記事を書く時や、記事を見る時、見出しがあるととっても見やすくなりますよね。

しかし、ただの太字じゃ味気ないし殺風景だと思われる方もいるでしょう。

見やすい記事には必ず見出しがあって、おしゃれな記事を書いている人は見出しにもこだわっています。

 

ブログ始めたばかりだから、見出しの変え方なんて分からない!

やり方が難しそうだから諦めてた!

 

そんな人に、誰にでも簡単に見出しを変える方法を説明していきたいと思います。

 

 

 見出しの使い方が分からない

 

見出しを使わなくても文章は書けます。

太字を使って見出し風にするのもいいでしょう。

見出しの使いどころがイマイチ分からないまま、見出しを付けずに記事を書いている人も中にはいると思います。

 

見出しを付けるメリットって何だろう?

 

  • 読み手が読みやすくなる

  • AIが読みやすくなる
  • 後から見た時に見やすい
  • 目次を付けやすい

 

AIが読みやすくなるってどういうこと?

 Google検索エンジンが、Googleで検索したユーザーの為に記事の見出しのタグを読み取って適切な記事へと誘導してくれるんだよ!

 

 

はてなブログで目次を作成する際に、編集画面から目次のアイコンを選ぶと目次が簡単に作れる機能があります。

(目次についての過去記事はこちらから↓↓)

 

m-m-motti.hatenablog.com

 

その時に見出しがあることで、ページ内リンクを自動的に作ってくれるのでとても手軽に目次を作成することが出来ます。

 

見出しは書き手にも読み手にも優しい。

見出しがあることで、後から見直す時にも一目で修正位置が分かるので便利です!

 

 

見出しには順番とルールがある

見出しには順番とルールがあるのをご存知ですか?

私は全く知りませんでした!

 

しかし、見出しにはちゃんとした順番やルールがあり、見出しの順番を入れ替えることはあまり良くないとされています。

 

順番がバラバラな例

✖ <h2>→<h5>→<h1>

 

順番通りに並んでいる例

〇 <h2>→<h3>→<h4>

 

 一つの文章を一括りと考えた時に、順番がバラバラだと変に見えますよね。

ただ文字を大きくしたいのであれば「文字の大きさ」というアイコンを使って文字の大きさを調整すればいいですし、見出しの機能を使って文字の大きさを変えていると目次がおかしなことになってしまいます。

次の文章がまた<h2>の見出しから始まるのは大丈夫ですが、見出しの順番を守るというのが重要です。

 

見出しだけで記事を書かない

 

見出しはあくまで見出しなので、全てを見出しで書くことはNGです。

見出しのデザインが可愛い、ここで使いたいという理由で、順番を入れ替えるのもあまり良くないとされています。

 

順番のルールを守って見出しを使おう!

 

 

見出しをカッコよくカスタマイズしたい!

 

ただの太字だけじゃ味気ないですよね。

色んな記事を見てもサイトのテーマに合った見出しを皆さんつけていらっしゃいます。

 

自分も見出しをカッコよくしたい!

 少し難しそうに思うかもしれませんが、基本コピペでOKなので安心して下さい。

 

簡単にコピペでOK?!

見出しをカスタマイズする方法は、管理画面から「デザイン」→「スパナみたいなやつ」→「デザインCSS」です。

 

このCSSに入れるコードは見出しのデザインによって違ってきます。

また、どの見出しをどうするのかによっても変わってきて<h2>はシンプルなデザインがいけれど、<h3>はちょっと変わったデザインにしたい。そういう場合もコードを少し書き換える必要があります。

 

デザインのCSSコードはこちらから選ばせて頂きました!↓↓

saruwakakun.com

www.notitle-weblog.com

 

 コードをコピペして貼るだけなので、複雑な操作もなくカスタマイズすることが可能です。

(注意※デザインCSSはバックアップをとっておいて下さい)

 

はてなブログは<h2>から

はてなブログではタイトルが<h1>と設定されていて、ブログの本文を書く際には<h2>からとなっています。

しかし、こちらの見出し

 

f:id:m_m_motti:20190702162047j:plain



 

 

大見出し・中見出し・小見出しは<h3>から始まっていて、

 

大見出し <h3>

中見出し <h4>

小見出し <h5>

 

となっています。

編集方法も考慮しながらカスタイマイズしていくといいですね!

 

 

最後に

 

 コピペで簡単に見出しカスタマイズをする方法でしたが、思っていたより簡単すぎて「もっと早く知りたかった!」というのが私の感想です。

これから色々なデザインに出会い、使っていくことで少しずつ自分らしいサイトが出来上がってくるのかなと思いました。

 

皆さんも是非、試してみて下さい!