![コピペ一発！WordPressで記事毎にCSSを効かせる方法！[Costom CSS]](https://tips4life.me/in_post/images/2017/08/css-per-post/css-per-postTP.jpg)
WordPressを使っている方に限らず、CSSは基本的に<head>～</head>の中に「style.css」などへの外部参照のリンクを記述して管理されている方がほとんどだと思います。ていうか、むしろそれが正解です。
また、CMSのほとんどはheadの部分をすべてのページでインクルードしているので、当然上記の「style.css」も全てのページでリンクされています。
これはどういう事なのかというと、「特定の記事のheadの中に<style>～</style>などを記述しようとしてもなかなか簡単にはいかない」という事です。
これを回避する為に「JavascriptやPHPの処理で条件分岐」させたり、わざわざ「プラグインを入れる」などというのも、とてもスマートではありません。
今回はそんな問題をコピペ一発で解消できる方法の紹介です。
少し他の豆知識も混ぜてますので、必要ない方は読み飛ばしてください。
Contents
ファイルは軽いに越した事はない
一般的にブログなどの記事数やサイトのコンテンツ数が増えれば増えるほど「CSSの記述量」は増えていきます。
※シンプルに徹したサイトなど、もちろん例外はあります。
そして、当然ですが記述量が多くなりファイルサイズが大きくなればその分サイトの表示は遅くなります。
正直、100行程度のテキストが増えた位で体感出来るほど変わる事はありませんが、CSSファイルは肥大しがちなので運営していくうちに普通に数千行になったりします。
こうなってくると話は別で、使っていない記述を削除したりファイルを圧縮したり、ファーストビューで表示される部分のCSSをインラインで記述したり…と、後から修正するのは想像以上に大変です。
なので「不要な記述はしない」、「使い回せるものは使い回す」といったように、普段から出来るだけファイルを重くしないよう心掛けながら運用する事が大切です。
ユーザーの離脱率を上げる要因
サイトの表示が遅いと約8割の人が一時離脱すると聞いた事があります。
また、4割の人は端末を変えて見ることもなくそのまま完全離脱するとも言われてます。
ページのスピードに関してはGoogleも重要視していて、PageSpeed Insightsを出したりAMPに力を入れたりもしてますね。
このブログも一応AMPに対応させて作っていますが、AMPは表示もシンプルになりすぎる感もありますし、少々制約が厳しいので断念される方が多いです。
今からAMPに対応させるのも重要ですが、まずは「基本に忠実」に、日頃から可能な限り余計な記述は避けて必要最低限のスマートな記述を心掛ける事が重要です。
日頃から常にこういう意識を持つことで、コンテンツが増えていくほど「意識をしないで運用した場合」と差が広がっていきます。
いくら素晴らしい内容のサイトでも、「見られなければ価値はゼロ」なので日頃から意識しながら運用しましょう。
インラインの記述（タグに直接style）の多用は避ける
基本的にhtmlは構造、デザインはCSSと考えるとわかりやすいです。。
部分的に使うくらいなら問題ないかとは思いますが、要素に直接styleを記述することは推奨されていません。
極端な例ですが、例えば以下のような場合、
<div style="margin-bottom: 40px;"> ←divに直接styleを記述
<img src="img/image01.jpg" width="150" height="150" alt="イメージ01">
<p>サンプルテキスト01</p>
</div>
<div style="margin-bottom: 40px;"> ←divに直接styleを記述
<img src="img/image02.jpg" width="150" height="150" alt="イメージ02">
<p>サンプルテキスト02</p>
</div>
<div style="margin-bottom: 40px;"> ←divに直接styleを記述
<img src="img/image03.jpg" width="150" height="150" alt="イメージ03">
<p>サンプルテキスト03</p>
</div>
この場合は以下のようにdivにクラスを付けて…
<div class="mb40"> ←divにclassを付与
<img src="img/image01.jpg" width="150" height="150" alt="イメージ01">
<p>サンプルテキスト01</p>
</div>
<div class="mb40"> ←divにclassを付与
<img src="img/image02.jpg" width="150" height="150" alt="イメージ02">
<p>サンプルテキスト02</p>
</div>
<div class="mb40"> ←divにclassを付与
<img src="img/image03.jpg" width="150" height="150" alt="イメージ03">
<p>サンプルテキスト03</p>
</div>
CSSファイルに以下のように記述すると良いです。
.mb40 { margin-bottom: 40px; }
こうすることで、今後他の要素で「margin-bottom: 40px;」を使いたい時は、要素に「class=”mb40″」を付与するだけで使えるようになります。
他にも、「デザインの為の<br>連発は非推奨」ですので、例えば次の要素までの間隔を<br>連発であけるなら「その要素にクラスを付与」してCSSで「margin-bottom: 3em;」などと記述すると良いです。
これによって管理が非常に楽になりますし、ミスも減って効率的なコーディングが出来るようになります。
これを言うと「知らなかった～！」とか「超便利～！」などと言われる事が結構多いので是非やってみてください。
※これは私のやり方なので、ご自身にあったやり方がある場合はそちらをお使い下さい。
このように、要素にstyleを効かせる場合はなるべくタグに直接styleを記述するのではなく、なるべくCSSで装飾するように心がけましょう。
WordPressでは難しい「記事単体のCSS」
少し難しい話しになりますが、WordpressのようなCMSはhead部分などを別ファイルから読み込んでいます。
これはCMSとかの話だけではなく、PHPで作られているサイト全般で使われている最高に便利なPHPの処理を使っていて、読み込まれている側のファイルを編集すれば、読み込んでいる側すべてに適応されます。
これは最高に便利なんですが、逆に記事単体への記述をしたい時はその読み込まれる側のファイルにPHPやJavaScriptを使って条件分岐させたりしなければなりません。
例えば「この記事にだけ効かせたいCSS」があるときなど、普通のhtmlなら<head>～</head>の中に<style>～</style>で記述すれば良いのですが、PHPでインクルードしてる場合、記事単体のheadの中に<style>～</style>を記述することは上記の通りで正直面倒です。
条件分岐を使うやり方も、「この記事にだけ効かせたいCSS」が多くなればなるほど、記事を分岐させる為の記述も増やして行くことになるので全くもっておすすめできません。
この問題を簡単に解決するのが、「Wordpressの投稿画面にCustomCSSウィジェットを作って、そこにCSSを記述する方法」です。
投稿画面に「CustomCSSウィジェット」を表示させる方法
この方法はWordpressの「functions.php」にコードを追加するので必ず実行前にバックアップを取るようにしてください。
また、「functions.php」は記述を1文字でもミスると画面が真っ白になって操作不能になる場合がありますので、全て自己責任でお願い致します。
それではさっそくやってみましょう。
以下のコードをコピーして、「functions.php」の一番下に貼り付けて保存します。
add_action('admin_menu', 'custom_css_hooks');
add_action('save_post', 'save_custom_css');
add_action('wp_head','insert_custom_css');
function custom_css_hooks() {
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
if (!wp_verify_nonce($_POST['custom_css_noncename'], 'custom-css')) return $post_id;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
$custom_css = $_POST['custom_css'];
update_post_meta($post_id, '_custom_css', $custom_css);
}
function insert_custom_css() {
if (is_page() || is_single()) {
if (have_posts()) : while (have_posts()) : the_post();
echo '<style type="text/css">'.get_post_meta(get_the_ID(), '_custom_css', true).'</style>';
endwhile; endif;
rewind_posts();
}
}
これだけでOKです。
この方法を使うと、その記事のheadタグの中に<style>～</style>で記述されます。
投稿画面でCustomCSSウィジェットに記述したものは、その記事にだけ適応されるので他の記事には影響ありません。
CostomCSSウィジェットの使い方
functions.phpにコードを貼り付け終わったら、実際に管理画面でちゃんと反映しているか確認しましょう。
投稿画面を開いたら画面右上にある「表示オプション」をクリック。
表示されたオプションの中から「Costom CSS」にチェックを入れる。
チェックを入れたあと、投稿画面の下の方に以下のような「Costom CSS」のウィジェットが表示されていればOKです。
あとはこのCostom CSSウィジェットの中に「この記事にだけ効かせるCSS」を記述するだけです☆
これだけで「その記事専用のCSS」を使うことが出来るようになりました。
まとめ
今回は特定の記事にだけ個別のCSSを使えるようにする方法の紹介でした。
このやり方で難しい条件分岐やプラグインを使わずに、コピペ1回で「CostomCSSウィジェット」を使えるようになります。
また、head内に<style>～</style>で書き出されるというのもポイントですね☆
CSSは「インライン（タグ直接）」＞「内部参照（head内style）」＞「外部参照（style.cssなど）」という優先順位になっているので、内部参照で書き出される今回のやり方は外部参照よりも優先されます。
ブロガーの方も普段とは違った表現をしたい時などに使うと良いと思います。
普段はあまり使いませんが、今後の為にCostomCSSウィジェットを作っておくと、いざという時に便利ですよ☆
この記事が気に入ったら
いいね ! しよう
ディスカッションコーナー コメントやご質問、その他この記事に関する事はこちらからどうぞ☆
はじめまして
記事ごとにseoタイトルを設定する方法を調べている途中で見つけたのですが
記事ごとにcssを設定できる方法もあるなんて知りませんでした。
早速使わせてもらいました。ありがとうございます。
もし同じようにfunction.phpにかくことで
H1と、タイトルタグで別のタイトルを設定する欄を
作る方法をご存知でしたら教えて欲しいです。
設定したいのはSEOタイトルだけなので、
all in one seoなどのプラグインを使わず、やりたいと思ってます。
ネットで調べてやってみたのですが、エラーが出て、
画面真っ白になるという洗礼を受けました・・・
お役に立てたようで良かったです。
All in One SEO Packについては私もはおすすめしていませんが、
おそらくご希望の内容は「mypace Custom Title Tag」がまさにその通りだと思います。
記述内容が極めてシンプルなのでfunctions.phpに記載するとしてもほぼ同じ内容になるかと思います。
ありがとうございます。
その方の過去記事にはたどりついていたのですが、
その後プラグインを出されてたのですね。
早速いれさせていただきました。
ありがとうございます！