CSS追加プラグインでテーマのアップデートにも対応できる!

2016年2月18日 ()

目次

1.装飾などを変えたい!CSSを追加したいとき

Webサイトのテンプレートやテーマを使っていると、
「基本の文字の大きさを変えたい」「リードなどのデザインを変えたい」などと思うときがあると思います。
そんなときはCSSをカスタマイズして直接CSSを入れ込むか、元のCSSをいじって上書きするか、などの方法があります。
追加したCSSやいじったCSSを書き込むときに、「style.css」に書き込んで反映させていることが多いですよね。

「style.css」に追加したり、もともと書かれているデフォルトのCSSを変更したりすればしっかり反映されますし、
間違った書き方や他のレイアウトに影響を与える書き方をしなければ不具合にもなりません。

ですが、「うまくCSSでレイアウトや装飾を整えることができた!♪」という感じでしっかり調整を行っても、
テーマのアップデートをするとせっかくカスタマイズした「style.css」が上書きされてしまいます。。

そんな時に便利なプラグインがありました!

私自身も「もっと早くこのプラグインを知っていれば苦労しなくて済んだのに・・・」と思えるようなプラグインです♪
すごくシンプルなプラグインですが、役に立ちます^^

2.自分で作ったCSSを追加できるプラグイン

cus_css_01

自分でカスタマイズしたい(する)cssを追加保存できるプラグインというのが、
Simple Custom CSS」というプラグインです。
このプラグインをインストールするとwordpress管理画面に自分で追加したいcssが
書き込めるページとテキストエリアができあがります。

3.インストールと有効化

インストールは管理画面のプラグイン追加ページで、「Simple Custom CSS」と検索。

cus_css_02

インストール後に有効化すれば特別な設定は必要ありません。
有効化すると管理画面の「外観」の中のメニューの中に「Custom CSS」という項目が追加されていると思います。

cus_css_03

「Custom CSS」という項目をクリックするとCSSを追加できるページに移動します。

cus_css_04

赤で囲った部分に自分で追加したいCSSを書き込んでください。
記入が少ないとテキストアリアが狭いのですが、書き込みが多ければテキストエリア部分が広がります。

4.Simple Custom CSSの活用法

このプラグインの良いところは、wordpressのテーマの中のcssファイルにcssを書き込まなくても、
きちんとcssが反映されること。
ファイルの上書きなどをする必要がなくなるのです。

たとえば、テーマのカスタマイズをしようとしてstyle.cssに自分でcssを書き込んでアップロードして反映したけど、
テーマのアップデートをするとそれが上書きされて台無しになってしまう…という事がなくなります!♪

管理画面で追加した(書き込んだ)cssはデータベースに保存されますので、
テーマのアップデートをしても上書きされることはありません。
プラグインをアンインストールしない限り、cssが消えることはありません。

 

■ 自分で追加して使うパーツにcssをかけるとき

リードや文字やテーブルなどの装飾を付け加えてデザインを整えたいときは、
パーツにclass名やIDを付けて、そのパーツに装飾を付け加えましょう♪
(※「css 装飾 サンプル」などでネットで検索すると方法や説明がたくさんでてきますよ♪)

整えたcssを管理画面の「Custom CSS」のページのテキストエリアに書き込みをして保存すれば、
そのcssが適用されます^^

■ テーマにデフォルトで入っているCSSを強制的に変更したいとき

例えば、下記のようなcssがデフォルトでstyle.cssに書き込まれているとします。

上記のcssは、「Default_01 」というクラス名がついたdivなどの要素に、
背景色「#F9F6CD」とフォントサイズ「14px」を指定したもの。
このcssがstyle.cssにデフォルトで書き込まれていれば、
「Default_01 」というclass名がついた要素は当然このスタイルを読み込んで反映します。

このcssの背景色を強制的に変更したいときは、
そのcssに「!important」を追加すると強制的にこちらのcssを読み込むことができます。

上記のような感じで、半角スペースを空けてその後ろに「!important」を付けて、
管理画面の「Custom CSS」のページのテキストエリアに書き込めばOKです。

これは「こっちのcssのほうが大切なので、こちらを優先して反映してください」という意味です。
このように書き込むと強制的にこちらのcssを反映することができます。

背景色を「#F9F6CD」から「#F7A4A5」に変更している状態です。

このように管理画面でcssを管理すれば、テーマのアップデートにも対応できますよね♪

■ 「!important」の注意点

!important」を使っても良いのですが、あまり多く使いすぎるのはNGとされています。
ペナルティ等にはなりませんが、使いすぎると強制的に読み込ませるcssが多くなり、
データが膨大になる場合もあります。

また、デフォルトのcss自体に「!important」がつけられている場合、
また新たに「!important」をつけてしまうと、
ブラウザが読み込む際どちらを優先すべきなのかわからなくなってしまうので
二重に「!important」を付けるのはやめましょう。