クリアメモリ

プログラミングやガジェットレビュー、便利なアプリケーションなど雑多に記録するブログ

【はてなブログ】特定のページだけ動作するCSSまとめ

f:id:clrmemory:20171228180323p:plain

こんにちはクリアメモリです!

今回は、はてなブログで「特定のページごとに適用される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」ページにもクラスが用意されています。

 

f:id:clrmemory:20171226132344p:plain

 

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が適用される範囲を限定できました。

うまく使うことで、より柔軟にデザインのカスタマイズができるようになるので、ぜひ覚えてみてください。

www.clrmemory.com

 

ではまた。

新着記事