はてなブログを始めてから、デザインテーマ「Brooklyn」を使用しています。シンプルなデザインで見やすく、ベースのままでも十分満足なのですが、「ちょっと見た目を変えてみたい！」とカスタマイズへの興味がどうしても湧いてきます。
そこで今回、カスタマイズでは必須のCSS、HTMLについて、初心者なりに使用してみましたので紹介します。
HTML、CSSって何？
ブログを含むホームページは、主にHTML（HyperText Markup Language）やCSS（ Cascading Style Sheets）という言語で記述されています。詳細な説明は別のサイトや書籍に委ねますが、自分の理解としてはこんな感じです。
HTML：ページの大まかな構成（レイアウト等）を決めるもの
CSS ：装飾のためのスタイルを定義するもの
※装飾：フォントサイズ、色など
HTMLでも装飾可能ですが、例えば、100個の記事の見出しの色を変えたい場合、100箇所のソース（プログラム）を変更する必要がありますが、CSSの場合は、CSSでの定義を変えるだけで全100箇所に反映されます。
もっと知りたい！という方は下記のサイトを参照してください。
CSSの設定方法
それでは実際にCSSを使ってみます。
お題は本記事でも使用している見出しをCSSで設定してみます。
CSSのソースはこちらになります。
/*■■■ 文字背面に色を付ける ■■■*/
p.midashi {
font-size: 150%;
font-weight: bold;
background: #f5fffa;
}
簡単に説明すると、文字サイズは150%、太字（bold）、色はMintCream（#f5fffa）という設定を「midashi」に定義するという感じです。使い方は追って説明します。
CSS設定方法ですが、はてなブログの場合、デザイン設定⇒デザインCSSより行います。CSSのソースをテキストボックスに貼り付け（①）、「変更を保存する」ボタンを押す（②）ことで反映されます。
もし他のソースを追加したい場合は、下へどんどん追記していけばOKです。
これでCSS側の設定は終わりましたが、これだけではまだ表示させることができません。HTML側で記述することで、晴れてブログに表示されるようになります。
HTMLの記述方法
次にHTMLを記述します。記述場所は、ブログの記事を書くの中の「HTML編集」タグになります。
<p class="midashi">CSSで定義した見出しです</p>
<p></p>で囲まれた文章を、CSSにて定義した「midashi」の内容にて表示するという意味になります。
▼▼▼こんな表示がされるかと思います▼▼▼
CSSで定義した見出しです
たくさん記事を書く中で、この見出しを使う機会が多くなる場合、途中で背景の色を変更したい！、そう思う時があるかと思います。そのような時にCSSで定義しておけば、CSSを変更することですべての見出しに一瞬で反映させることができます。
もし一部だけ変更したい！という場合は、HTMLで個別に記述してもよいし、CSSで新しく定義（例えば、midashi2など）すれば、使い分けも可能です。
CSSの使い方も何となく分かってきたので、積極的に使っていこうと思います。
