WordPressで記事にのみCSSを適用する方法

スポンサーリンク

ワードプレスのテーマを色々とカスタマイズしていると、固定ページに反映させることなく、「記事ページにだけCSSを適用させたい」という場面が出てきました。

色々なブログを参考にさせて頂きつつ、自分にとってしっくりくるものがなかったため今回は、「記事にのみCSSを適用させる方法」について書いておこうと思います。

ちなみに、この方法を使えば、「特定の記事に特定のCSSを適用させること」も可能になりますので、併せてご参考ください。

なお、この記事内容は下記のサイトを参考にさせて頂いております。ありがとうございます。

WordPressで記事ごとに個別のCSSを設定する方法3選

この記事の内容でできるようになること

・プラグインは使わない。

・固定ページには反映させずに記事(投稿)ページにのみCSSを適用させる。

・記事ごとにCSSを記載できる“カスタムフィールド”を作成する。

header.phpにコードを記入する

まず、header.php の中にある <head> と</head>で囲まれている中 に以下のコードをコピペします。CSSに関する記述が見える場合は、その近くに、もし自信がない場合は、<head>のすぐ後に貼るといいと思います。

貼り方

WordPressの管理画面から

①「外観」→「テーマの編集」→「header.php」を開く

※<head> が見つからない場合
②パソコンの「control」+「F」を押すと検索窓が出るので「head」と検索する。

③下のコードを、<head> と</head>で囲まれている中にコピペする。

<?php if (is_single())
{
$article_css = get_post_meta($post->ID,article_css,true);
 if($article_css)
 {
 echo <<<EOS
<style type="text/css">
$article_css
</style>
EOS;
 }
}
?>

このコードの意味は、「記事ページであれば article_css という名前のカスタムフィールドに書かれた値を出力します」という内容になります。

カスタムフィールドを表示させる

先ほどのコードを記入しておくことで、各記事の下部に「カスタムフィールド」と呼ばれる、CSSを記載する部分が現れます。

表示方法は、

①WordPressの管理画面右上にある「表示オプション」をクリック

②「カスタムフィールド」にチェックを入れる

と投稿記事の下にカスタムフィールドが出るようになります。

カスタムフィールドに必要なCSSを記入する

そして、このカスタムフィールドに、その記事にのみ適用させるCSSを記入することができます。

私の場合は、ホームページとして運用しているサイトで、固定ページのタイトルタグ(h1〜h4)には適用させたくないけど、投稿記事のタイトルタグ(h1〜h4)には適用させたい下線などをこの部分に記載して使っています。

ただ、毎回の記事でこのCSSを記載する必要があるため、そういう意味では手間もかかります。(今は、メモ帳に記載したものを毎回コピペしています…)

もし、同じ内容をもっといい方法でできるという場合には、ぜひご教授ください。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする