特定の記事にだけCSSを適用したい

こんにちは、ゆんつです。

ブログで特定の記事にだけ限定的にCSSが適用したい場合があります。

WordPressの場合ダッシュボードから「外観」→「テーマの編集」でCSSを編集することができますが、このCSSを編集するとブログ全体に影響が及んでしまします。

ブログの全体的なデザインには影響を与えずに、特定の記事にだけCSSが適用したい。

無料で利用できるブログテーマの「Cocoon」は、特定の記事にだけCSSを適用することができる「カスタムCSS」という部分が設けられています。

ですのでプラグインを導入したりしなくても、カスタムCSSに記述することで簡単にその記事だけのCSSを適用することが出来ます。

今日はCocoonのカスタムCSSを使用してみたいと思います。

カスタムCSSの場所
カスタムCSSを使ってみる
プラグインで解決する場合

カスタムCSSの場所

カスタムCSSの場所は新規投稿画面のSEO設定の下の方です。

カスタムCSSを使ってみる

まずテキスト入力にしてHTMLを書きます。

そして、そのHTMLに適用したいCSSを、カスタムCSSの欄に書いていきます。

今回はこんな感じのコードを書きました。

HTML

<div id="container">
  <div id="box1" class="box">こ</div>
  <div id="box2" class="box">ん</div>
  <div id="box3" class="box">ぷ</div>
  <div id="box4" class="box">れ</div>
</div>

CSS

#container {overflow: hidden;}
.box {
  font-size: 36px;
  font-weight: bold;
  color: #fff;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  float: left;
}
#box1 {background : blue;}
#box2 {background : black;}
#box3 {background : red;}
#box4 {background : green;}

結果は以下のような感じです。

こ

ん

ぷ

れ

ちゃんとCSSが適用されていることがわかります。

他の記事やブログのデザインなどに影響はありません。
（追記：何度が実験してみるとcontainerのようなありがちなid名をつけると、元から存在するものと被ってしまい、レイアウトが崩れたことがありました。ですのでデベロッパーツールで確認しながらidやclassが被らないように自分のオリジナルのid名やクラス名（自分のサイト名を含めるなど）にした方が良いと思います。）

いやあ、「Cocoon」って本当に細かいところまで行き届いてますね。