美しい見出しでブログを飾ろう！CSSで最初の１文字/最初の１行だけスタイルを適用する。

ブログで、見出しは凝りたいけど、HTMLを直接編集するのはちょっと …
という人に、CSSだけで、少し凝った見出しを作成するテクニックを紹介します。

スポンサーリンク

今回作るもの

↓のイメージのような見出しを、CSS だけで作ります。

(1) HTMLを作る

見出しを表示するHTMLを作ります。

<h3>
  美しい見出しでブログを飾ろう！<br/>
  CSSだけで最初の１文字・１行目にスタイルを適用する。
</h3>

HTMLはこれだけです。
シンプルなので、HTMLを直接編集する必要はなく、ブログのエディタだけでも書けると思います。

スポンサーリンク

(2) CSSで見出しを装飾する

続いてCSSの部分です。
今回は、<h3> タグに装飾します。

/** h3タグに適用するスタイル */
h3 {
  background: #eee;
  width: 480px;
  padding: 140px 20px;
  font-size: 15px;
}

/** 最初の１文字目に適用するスタイル */
h3:first-letter {
  font-size: 60px;
  line-height: 1;
  float: left;
  margin-right: 7px;
}

/** 最初の１行目に適用するスタイル */
h3:first-line {
  color: rgba(128, 23, 23, 0.5);
  font-size: 25px;
}

CSS の貼り付け方

今回紹介した見出しを使うには、上で紹介したCSSを自分のブログに貼り付ける必要があります。
各ブログサービスでのCSS貼り付け方法は、以下を参考にしてください。

• WordPress

[ダッシュボード] -> [外観] -> [テーマの編集] -> 右側の[style.css]

• はてなブログ

[デザイン] -> [カスタマイズ] -> [デザインCSS]

• Blogger

[テーマ] -> [カスタマイズ] -> [上級者向け] -> [CSSを追加]

CSS の解説

CSSなんて興味ないよ！って方は読み飛ばしてください (笑)

まず１つ目の h3 { … } の部分です。
なんの変哲もないCSSです。
H3タグ 全体のスタイルを指定しています。

/** h3タグに適用するスタイル */
h3 {
  background: #eee;     /*背景色*/
  width: 480px;         /*幅*/
  padding: 140px 20px;  /*内部の余白*/
  font-size: 15px;      /*フォントサイズ*/
}

＜実行結果＞

次は h3:first-letter { … } の部分です。
:first-letter擬似要素を使って、先頭１文字目にスタイルを効かせています。

ポイントとなるのが、float: left;としている部分です。
この指定で、１文字目だけ回り込みして、２行分の高さを採るようにしています。

/** 最初の１文字目に適用するスタイル */
h3:first-letter {
  font-size: 60px;    /*１文字目だけフォントを大きくする*/
  line-height: 1;     /*行間*/
  float: left;        /*回り込み*/
  margin-right: 7px;  /*右側の余白*/
}

＜実行結果＞

最後はh3:first-line { … } の部分です。
:first-line擬似要素を使って、１行目にスタイルを効かせています。

/** 最初の１行目に適用するスタイル */
h3:first-line {
  color: rgba(128, 23, 23, 0.5);   /*１行目の文字色を薄い赤に変更*/
  font-size: 25px;  /*１行目は２行目に比べて文字サイズを少し大きく*/
}

＜実行結果＞

スポンサーリンク

まとめ

最近は、WordPressを筆頭に、ITの知識がなくても、手軽にブログが始められます。
その為か、ブロガーさんの数は、今では約700万人程度いると言われています。

すさまじい数ですね…

そんな世の中なので、自分が書きたいと思った記事は、既に他の人が記事にしている事が多々あります。

同じ内容であれば、読者は見やすい・綺麗なサイトを選んでくれるハズです。
なので、こういった小さい改善も頑張っていきましょう♪

あっ… 当たり前ですが、ブログは内容が一番大事です！