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

2018年10月1日月曜日

CSS HTML

t f B! P L

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

美しい見出しでブログを飾ろう

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

今回作るもの

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

今回作る見出し

(1) HTMLを作る

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

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

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

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

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

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

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

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

CSS の貼り付け方

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

  • WordPress

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

  • はてなブログ

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

  • Blogger

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

CSS の解説

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

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

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

<実行結果>
H3全体ステイル適用後

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

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

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

<実行結果>
first-letter擬似要素適用後の実行結果

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

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

<実行結果>
今回作る見出し

まとめ

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

すさまじい数ですね…

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

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

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

スポンサーリンク

QooQ