CSSで見出しをデザインする方法

見出しのデザインを考えてます。
色々な方のサイトを見ていると、見出しが綺麗に修飾されています。
とても綺麗で目を引きます。
自分のブログも綺麗に作って、たくさんの方に見て頂きたいものですよね。

見出しを綺麗に見せるには、CSS（スタイルシート）を利用します。
CSSだけでも修飾できますし、画像を貼り付けて修飾することも可能です。
今回は、画像を使わずにCSSのみで、見出しを修飾してみます。

修飾するタグを決めておく

見出しですから、使うタグは <h1> から<h4> くらいまでのタグになります。
もしもタグを限定したくない場合は、<div> タグを利用して修飾すると良いでしょう。

修飾には、次の方法があります。

Bloggerでは、テンプレートに指定がありますので、
HTMLファイル内に<style>で定義する方法です。

実際に見出しを修飾してみます。
次のように<h4>に直接、styleを指定してみます。

<h4 style="border-left:#228b22 8px solid;" >
見出しサンプル1
</h4>

すると、次のような見出しになります。

見出しサンプル1

次は、<style>で指定してみます。
指定サンプルは、次の通り

<style>
  .sample2 {
    border-left:#228b22 8px solid;
  }
</style>
<h4 class="sample2">
見出しサンプル2
</h4>

見た目は次の通りになります。

見出しサンプル2

CSSファイルを作成して参照する方法では、別ファイルに<style>タグ内の指定を
記述して、ヘッダなどで次のように読み込んで適用するだけです。

<link rel="stylesheet" href="xxxxxx.css" type="text/css" />

指定方法はわかりましたが、Bloggerではどのように指定するのでしょうか？
細かく指定するのであれば、「HTMLの編集」が望ましいですが、
Bloggerではもっと簡単に指定することができます。

まずは、「テンプレート」画面を開き、「カスタマイズ」をクリックします。

「Blogger テンプレートデザイナー」画面で、「アドバンス」→「Add CSS」を選択します。

画面の「Add custom CSS」欄へコードを指定して、
「ブログに適用」をクリックすれば完了です。
とても簡単ですね。

参考までに目にとまったサンプルを並べておきます。

見出しサンプル

最後まで読んで頂きありがとうございます。