Blogger Labo:【Blogger】特定のページのみにCSSを適応する方法

Bloggerで見出しなどにCSSを設定すると編集する時に便利だが、特定のページのみ色を変えたいと思うことがある。

今までは、HTMLでわざわざ各見出しにデザインしていたが、作業が非常に面倒だった。

こんな問題を解決する「特定のページのみにCSSを適応する方法」を発見したので、ここに書き残しておくことにする。


<STYLE>タグを使う


Bloggerには投稿内容をHTMLで編集できる「HTMLモード」が搭載されている。

この「HTMLモード」とHTMLの「styleタグ」から着想を得て、実際に試してみたところ、見事に特定のページのみCSSを適応することができた。その方法は以下の通り。

【方法】

・まずは記事を書き上げる
・編集モードを「HTMLモード」に切り替える
・記事の末尾に「styleタグ(<style>~</style>)」を設置する
・styleタグの中にお好みのCSSを書き込んで更新する

備考:HTMLタグリファレンス(<STYLE>)

<STYLE>タグを使って編集した例


当ページでは、すでにstyleタグを使って記事内のデザインを変えているので、その内容を例として挙げておく。

[例]特定のページの見出しの色を変えるCSS


下記のコードを記事HTMLに書き加えると、そのページだけ見出しのスタイルが変わる。

<style>

/* 各見出しの色を変える
---------------------------------*/

/* h2の背景色を青色に変える */

.entry-content h2{
   background:#0000ff;
}

/* h3の線の色を青色に変える */

.entry-content h3{
   border-left: 5px solid #0000ff;
   border-bottom: 1px solid #0000ff;
}

</style>

特定のページの指定した項目を非表示にする


上記の方法を使って「display:none;」を設定すれば、特定の項目を非表示にすることができる。

[例]自動追加した目次を特定のページのみ非表示にする


自動追加した目次は、以下のコードを使えば そのページのみ非表示にすることができる(#tocは目次のID)。

/* 自動追加した目次を非表示にする */

<style>
#toc{
   display:none; /*画面上非表示*/
}
</style>

[例]特定のページのコメント欄を非表示にする


固定ページで作った目次など、コメント欄が不要なページの場合、以下のコードを追加して非表示にする。

/* コメント欄を非表示にする */

<style>
.comments{
   display:none; /*画面上非表示*/
}
</style>