「見出し」をオリジナルなスタイルに変更しよう!はじめにブログを書くからには、読んで下さる方にこちらの意図を正しく伝えたいものです。「わかりやすいな」と思っていただきたいものです。そのためには、正しい日本語でちゃんとした文章を書くことがまず第一なのですが、見出しをつけたり、伝えたい言葉を強調したり、という工夫も必要です。はてなブログの記事エディタにはこのような機能が用意されていて、ある程度のことはこれで事足りてしまうのですが、もうちょっと自分の色を出したいな、と思った時に、ごく簡単な準備をすればカスタマイズできますので、それを少しばかりお伝えしようと思います。■「小見出し」を選択サンプル文章このように指定した文字のサイズが変わるようになっています。これに、文字のサイズが変わるだけでなく、背景色をつけたり、下線を加えたりしてオリジナルな見出しになるように変更してみましょう。h5というスタイルが決まります。そのスタイルに、予め「h3は文字サイズ大」といった設定がしてあるので、それに従って文字のサイズが変わるのですが、オリジナルな見出しに変えるためには、そのスタイルの定義を追加してあげればいいことになります。具体的に定義を追加する場所は、以下です。PCで見た時のスタイルとスマホで見た時のスタイルは別々に定義されていますので、片方で良い場合は下記のどちらか、両方変えたい場合は下記の両方が変更対象になります。PCの場合スマホの場合ここに定義を追加して、以下のような見出しになるようにしてみましょう。追加するコードを上で説明した場所にコピペしてみてください。(注意)スマホに追加する場合は、下記の「追加するコード」を<style>追加するコード</style>というように、styleタグで挟んでください。■「大見出し」を選択このような矩形を塗りつぶした見出しにします。PALEGREEN;}■「中見出し」を選択このような、左端にラインの入った見出しにします。LIGHTPINK;}■「小見出し」を選択このような、2色のアンダーラインを付加した見出しにします。'';}色についてですが、上の追加するコードの「NAVY」「SILVER」といった色の定義部分を変更するだけで、簡単に変えられます。色の種類については、下記サイトを参考にされると良いでしょう。www.colordic.org文字色を変更したい場合は「color」、背景色を変更したい場合には「background-color」の定義を変更してください。#ffffffとすればOKです。(色の指定は、名称でも#以下6桁のコードでもどちらでも良いです。私は、文字から色が想像できる名称を使うのが好きですね。元からある見出しと連動させたくない場合もあるかと思います。その場合には、追加するコードの「h4」「h5」「h6」という部分を、他の文字に変えてしまえばOKです。「h4xyz」とか、「h4_test」とかですね。定義だけ追加しておいて、実際に記事で使わないのは全然問題ありませんので、色違いのパターンをいくつか用意しておく、というようなこともできます。「h4_blue」背景色が青色といった感じです。それらを記事に適用させるには、HTMLのコードを直で修正しなければいけません。次回の説明でその辺りのことを書きますので、参考にして頂ければ、と思います。まとめいかがでしたでしょうか。諸先輩方のブログでは、もっといろいろなパターンのカスタマイズ方法を書かれている方がおりますので、いろいろと調べてみて、自分なりのオリジナルなカスタマイズに挑戦してみるのも楽しいと思います。次回は、文章中で強調したい箇所の目立たせ方などをご説明したいと思います。