Blogger・Notableの先頭文字が大きくなるドロップキャップの色変更と無効化

Blogger のテンプレート「 Notable 」では、先頭文字が大きくなる「ドロップキャップ」のスタイルが適用されており、投稿の先頭がテキストの場合に、「注目の投稿(スニペット表示時)」と「投稿」に反映されます。
注目の投稿に反映されるドロップキャップは、テーマデザイナーから文字色の変更ができますが、投稿に反映されるものは変更ができないので、CSS を追加してカスタマイズするしかありません。また、ドロップキャップは CSS で無効化することもできます。

ドロップキャップの色を変更する

本文と同じ色にする

親要素となる本文の文字色を継承させます。
.post-body::first-line {
    color: inherit;
}

先頭文字だけに色をつける

先頭文字だけでなく「行」にも指定をします。
.post-body::first-letter {
    color: #408697;
}

.post-body::first-line {
    color: inherit;
}

ドロップキャップを CSS で無効化する

親要素の値を継承するように「 inherit 」を使って無効化させます。
.post-body::first-letter {
    float: none;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
}

.post-body::first-line {
    color: inherit;
}