【wordpress】サイト制作・運用で便利！「WP Add Custom CSS」プラグインの使い方
2020.05.30
WordPressにおけるWEBサイト制作で、意外に増える、「デザインの違う固定ページ」。
ついついテーマの中の「page-〇〇.php」が増えてしまうなんて事ありませんか？
また、サイトを運用・管理をしていく中で、新規ページを作る度に大元のcssファイルに追記していくのもめんどくさいし、複数人で管理していると乱雑になりがちですね。
そんな時に便利なのが、固定ページ、投稿ページ毎に投稿画面にcssが記述できる「WP Add Custom CSS」プラグインです。
今回はその使い方をご紹介していきます。
バックアップをとる
まず、ご存知の通り、Wordpressに新しいプラグインをインストールすると、既存のプラグインと競合して不具合が起こる可能性があります。
今回ご紹介する方法を試す前に、必ずWordpressのバックアップを取っておいてくださいね。
インストール
まずはプラグインをインストールしましょう。
WordPressにログインし、ダッシュボードにアクセスします。
プラグイン＞新規追加で、プラグイン検索ページが表示されます。
キーワードに「WP Add Custom CSS」を入力し、検索してください。
「WP Add Custom CSS」のプラグインが見つかったら、「今すぐインストール」のボタンを押し、プラグインをインストールします。
無事にプラグインのインストールが終わったら、有効化ボタンを押してください。
配布サイトからダウンロードする場合はこちらです。
プラグインを有効化すると自動的に固定ページや投稿の画面にCustom CSSエリアが追加されます！
基本は以上で終了です。かんたん！！
プラグインの設定
プラグインを有効化すると、メニューバーに「Add Custom CSS」というメニュー項目が追加されます。
このメニューを開くと設定が出来ます。
それぞれの項目には、以下のような内容を入力します。
| CSS rule |
サイト全体に適用したいCSSを入力します。 |
| Post types |
カスタム投稿タイプを利用している場合、ここにカスタム投稿タイプ名とチェックボックスが表示されます。WP Add Custom CSSの機能を利用したいカスタム投稿タイプがあれば、チェックを入れます。 |
| Advanced editor |
行番号の表示や、シンタックスハイライト機能のある高機能なエディタを使いたい場合はEnableにチェックを入れます。チェックを入れておくのがおすすめです |
| Advanced editor layout |
editorを有効化した場合、ダークモードにするかライトモードにするかを選択できます。お好みのテーマを選んでください。 |
投稿/固定ページ別にCSSを記述する
では、いよいよ投稿/固定ページごとにCSSを記述していきましょう。
記事一覧ページから、独自のCSSを記述したい記事を選び、編集画面を開きます。
ページを下へスクロールしていくと、「Custom CSS」の入力フォームが表示されています。
このフォームにCSSを入力することで、このページ独自のCSSを適用することが可能です。
外部CSSファイルと同じ感覚で利用できます。
たとえば、とある記事の中に以下のようなHTMLタグがあるとします。
これを、この記事限定で「黒色の囲み枠」をつけたい場合、「Custom CSS」には以下の通り入力します。
.box{
border:5px solid #000; /*囲み枠をつける*/
margin:10px; /*囲み枠外の余白*/
padding:5px; /*囲み枠内の余白*/
}
こんな感じ
このプラグインの最大のポイントは、この記事限定なところ！
「class="box"」なんて在り来たりなclass名をつけたって、他記事はもちろんサイト全体に干渉しないのです。これは良い...
それもそのはずで、「Custom CSS」に入力したCSSは、当該ページのhead要素内に記載されます。
保存してプレビューで確認すると、「この段落を黒色の線で囲みます。」という文字の段落が、黒色の枠で囲まれているのが確認できます。
まとめ
デザインが異なる特集ページには、ページ独自のCSSが不可欠です。
しかし特集ページが増えれば増えるほど、その独自のCSSの管理が面倒になりがちです。
今回ご紹介した「WP Add Custom CSS」を使えば、記事の編集画面でCSSを管理することができるため、今までのような面倒な管理方法とはさよならできますよ。
特集ページ独自のCSSの管理に悩まされていたという方は、是非この「WP Add Custom CSS」を導入してみてくださいね。
関連
Webサイト制作サイト制作
Webデザイン
SEO対策コンテンツSEO
SEO基礎SEO対策SEO解析
