今回は、はてなブログで「特定のページごとに適用されるCSS」のまとめです。
CSSの記述方法によって、適用される範囲が決まるので覚えてみてください。
はじめに
今回は、はてなブログで特定のページにだけ適用されるCSSについて紹介します。
正しく使うことで、例えば「トップページだけに反映されるCSS」や「記事ページだけに反映されるCSS」を設定できるので試してみてください。
トップページ用CSS
まずは、トップページののカスタマイズ時に使えるCSSです。
はてなブログの場合、トップページには「page-indexクラス」が用意されています。
仮に、トップページの文字色をカスタマイズする場合、以下のようになります。
.page-index p{
color: red;
}
このようにすることで、トップページだけの「p要素」を赤くできます。
pの部分は、カスタマイズしたいクラスによって変えてください。
記事ページ
同様に記事ページもカスタマイズしてみましょう。
.page-entry p{
color: red;
}
このように「page-entry」を記述してみてください。
今度は、記事ページの「p要素」が赤くなります。
記事本文欄
記事ページ全体ではなく、記事本文欄だけをカスタマイズしたい場合はこちら。
.entry-content p{
color: red;
}
「.entry-content」を使うと、記事本文だけにCSSを適用できました。
アーカイブページ
アーカイブページは「一覧形式のトップページ」や「カテゴリーページ」が該当します。
また、検索結果（Search）ページもアーカイブページに分類されます。
適用させるCSSは以下。
.page-archive p{
color: red;
}
カテゴリーページ
page-archiveよりも限定的にする場合は、カテゴリーページ用のCSSを使用しましょう。
.page-archive-category p {
color: red;
}
カテゴリーページだけCSSをカスタマイズしたい場合、page-archive-categoryが利用できます。
Aboutページ
はてなブログの「プロフィールページ」などで利用できる「About」ページにもクラスが用意されています。
AboutページだけをカスタマイズするCSSはこちら。
.page-about p {
color: red;
}
page-aboutを使うことで、AboutページだけをカスタマイズするCSSが利用できます。
テーブルでチェック
最後に、ここまで紹介してきたクラス名をまとめておきます。
スクショ・はてブなどで、すぐチェックできるようにしてみてください。
| ページ | 要素名 |
|---|---|
| トップページ | .page-index |
| 記事ページ | .page-entry |
| 記事本文 | .entry-content |
| アーカイブページ | .page-archive |
| カテゴリーページ | .page-archive-category |
| Aboutページ | .page-about |
まとめ
今回紹介した通り、クラス名を正しく使うことで、CSSが適用される範囲を限定できました。
うまく使うことで、より柔軟にデザインのカスタマイズができるようになるので、ぜひ覚えてみてください。
ではまた。
