要素の最初の文字のみ色を変える方法（first-letter）

CSS はてなブログ
スポンサーリンク

はてなブログのタイトル（ブログ名）のフォントカラーを先頭1文字だけ緑色にしようと考えて、少し迷ってしまったので備忘録です。今思えば全然大した事はないんですが、プログラムもCSSもコードを書いた経験が全てだなぁと感じた一件です。イメージ出来ないと調べる事も出来ないですしね。戒めの意味も込めて迷った過程から書いていきます。

span要素を使う

まず思いついたのがspan要素を使うことです。

<h1 id="title">
    <a href="#"><span style="green">T</span>ASK NOTE</a>
</h1>

しかし問題点として、はてなブログはHTMLを編集することが出来ません。とりあえず設定でブログ名にタグ付きで入力してみます。

f:id:tasukujp:20140909004338p:plain

予想通りタグがそのまま表示されてしまいました。どうやらエスケープされているようです。

f:id:tasukujp:20140909004808p:plain

jQueryでHTMLを書き換える

HTMLが編集できないならと次に試したのがjQueryでHTMLを書き換える方法です。

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#title>a').html('<span style="color:green;">T</span>ASK NOTE');
</script>

このコードをフッタのHTMLを記述できる所にいれます。するとうまく色が変わってくれました。

f:id:tasukujp:20140909010332p:plain

CSSの:first-letterを使う

しかし1文字色変えるだけでjQuery使うのもなと思い、CSSで何かあるんじゃないかと調べてみました（遅） そうしたら:first-letterという擬似要素があるじゃないですか...。結果この一文だけで済みましたとさ。

#title:first-letter {
  color: #00a518;
}

ちなみに#title>a:first-letterじゃなくて#title:first-letterなのはブロックレベルの要素にしか効かないからです。a要素はインラインなので効きません。

参考：::first-letter (:first-letter) - CSS: カスケーディングスタイルシート | MDN