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

ブログ関連

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

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

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

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

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

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

今日はCocoonのカスタム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」って本当に細かいところまで行き届いてますね。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

ありがたや、ありがたや。

プラグインで解決する場合

Cocoon以外のテーマの場合で特定の記事に手軽にCSSを適用したい場合は、プラグインが必要になるかもしれません。

そのような場合、以下のようなプラグインが役立つようです。

・WP Add Custom CSS

・Custom CSS and JS

・add-css-to-post

・CSS PLUS

これらの中でプラグインの更新日が一番新しく、かつ使いやすそうなのは「WP Add Custom CSS」でした。

Cocoon以外のテーマで特定の記事にだけCSSが適用したい場合には、ご検討されてみてはいかがでしょうか。

それでは、またー。

コメント