はてなブログのデザインテーマ「Silence」（サイレンス）で、記事一覧ページの日付（更新日）と記事の説明文の文字を変更する方法です。
はてなブログproでは、「設定」⇨「詳細設定」⇨「ブログ表示」⇨「一覧形式」にチェック（✔）を入れることで、トップページに記事一覧ページを表示できます。
今回、変更したいのは記事一覧ページの日付と、記事の説明文の文字色です。
デザインテーマ「Silence」（サイレンス）を使用している人向けの記事ですが、これ以外のテーマを使っていて、
「記事一覧ページの日付と、記事の説明文の文字色を変更したい！
という人にも役立つ情報となるはずです。
- カスタマイズのきっかけは？【ページスピードインサイトで、「背景色と前景色には十分なコントラスト比がありません」と指摘された】
- 【はてなブログ Silence カスタマイズ】トップページの日付と記事の説明文の文字を濃くする（文字色を変更する）
カスタマイズのきっかけは？【ページスピードインサイトで、「背景色と前景色には十分なコントラスト比がありません」と指摘された】
Googleが提供している、PageSpeed Insights（ページスピードインサイト）というツールがあります。トップページや個別ページのURLを入力するだけで、Webページの表示速度やユーザビリティを測定してくれるサイトです。
ページスピードインサイトで、いくつかのページを測定しました。すると、ユーザー補助に関する項目で、
「背景色と前景色には十分なコントラスト比がありません」
と、指摘されました。
ざっくり言うと、
文字がうすくて、読みづらいよ！読者さんのために改善してね
と、注意されたのです。
【はてなブログ Silence カスタマイズ】トップページの日付と記事の説明文の文字を濃くする（文字色を変更する）
記事一覧ページの「日付」と「記事説明文」のCSSコードは？
「はてなブログ 文字を濃くする」
などで検索しても、なかなか情報が見つかりませんでした。
そこで、該当するCSSのコードを知るため、記事一覧ページの「日付」と「記事説明文」のカスタマイズについて発信しているブログを探しました。
参考にさせていただいたのは、以下の2つのブログです。
ありがとうございます。
記事一覧ページの「日付」と「記事説明文」の文字を濃くする方法とは？
まずは、記事一覧ページの日付の色を濃くする（文字色を変更する）コード。
color: #696969;
}
テーマによっては、1行目を
と記述しないと反映されません。
コードは、管理画面より「デザイン」⇨「カスタマイズ（スパナのアイコン）」⇨「デザインCSS」に貼ります。
赤字の部分にHTMLのカラーコードを入れることで、お好きな文字色に変更できます。
次に、記事一覧ページの「記事の説明文」の色を濃くします。
color: #696969;
}
赤字のHTMLのカラーコードを変えれば、文字色を変更できます。
コードを貼る場所は同じ。管理画面より「デザイン」⇨「カスタマイズ（スパナのアイコン）」⇨「デザインCSS」とすすみ、ブログテーマのCSSコードの下に貼ります。
画像だとわかりにくいかもしれませんが・・・
実際にCSSコードを貼って比べてみると、「文字が濃くなった」と実感できると思います。あくまで記事タイトルを邪魔しないように、日付と記事説明文の文字色を変更しました。
はてなブログをGoogle検索にインデックスさせたいなら、「表示速度の改善」と「ユーザビリティの向上」はマストです。
同じクオリティなら表示速度が速く、使い勝手のよいページが上位表示されます。見直してみてください。