ワードプレステーマを変更せずにCSSを追加・管理する方法

ワードプレスにはいろんなタイプのテーマがありますが、オリジナル性を出すためにCSS(スタイルシート)を追加したり、変更したりということがあると思います。

しかし、ワードプレスのテーマでCSSを追加・変更する場合、テーマのアップデート等を考えるとスタイルシートに直接、書き込むのは管理が大変です。

また、テーマをアップデートしたりすると、CSSが上書きされて、また最初からCSSを追加したりという事もあります

そんな時に便利なのが、今回、紹介する「Jetpack for WordPress.com」プラグインを使ったCSSの管理です。

インストール

まずは「Jetpack for WordPress.com」をインストールします。
プラグイン追加画面から「Jetpack for WordPress.com」で検索をかけると表示されるので、いますぐインストールボタンをクリックしてインストールを始めます。

プラグインの検索

プラグインの有効化を行うと、管理画面にJetpackが追加されています。

Jetpackメニュー

Jetpackをクリックすると次の画面が出てきます。

アカウントの連携

CSSエディタはアカウント連携しないと使えないので、アカウントの連携を行って下さい。
アカウントの連携方法は、以前、紹介した記事、「ワードプレスとGoogle+を連携させるプラグイン「JetPack」の設定方法」を参考にして下さい。

アカウントの連携

アカウントの連携を行うと次の表示が出るので次に進みましょう。

アカウントの連携2

アカウントの連携を行った方、すでに連携済みの方は、画面を下の方に移動してください。すると次の画面が出てくるので、「Jetpackの全機能を表示」をクリックして下さい。

全機能を表示

色んな機能が表示されるので下の方に移動し、「カスタムCSS」を探してクリックして下さい。

カスタムCSSアイコン

するとカスタムCSSの簡単な機能説明が表示されます。

CSSスタイルシートエディター

それでは、実際にCSSスタイルシートエディターの画面を開いて見ましょう。

CSS編集メニュー

Jetpackをインストールして、アカウント連携を行うと管理画面の外観に「CSS編集」という項目が追加されています。

CSS編集メニュー

この画面を開いてみると「CSSスタイルシートエディター」の画面が表示されます。

設定画面

スタイルシートの書き込み

あとは、このエディター画面に使用するスタイルシートを書き込み、「スタイルシートを保存」で使用可能です。

ここで設定したスタイルシートは、テーマのスタイルシートが読み込まれた後に追加されるようです。

なので、デフォルトのCSSルールを上書きされるという事になります。

メリット

このプラグインを使うメリットですが、例えば同じクラスのスタイルシートの設定を行うと、ここで書き込まれたスタイルシートが最後に反映されるという事になります。

この事によって、テーマがアップデートされてスタイルシートが変更されても、CSSスタイルシートエディターに書かれているスタイルシートが優先される事になるので、テーマアップデートの影響を受ける事がありません

また、テーマ変更の場合にもこちらが優先されるので、スタイルシートの書き直しが少なくなるのもメリットです。

注意点

このCSSスタイルシートエディターですが、データのエクスポート機能がありません。

なので、バックアップとして、テキストファイル等でスタイルシートのコピーを取っておくことをお薦めします

最後に

今回はJetpack for WordPress.comのCSSスタイルシートエディターの機能を紹介しましたが、このプラグインはその他にもいろんな機能が搭載されています。

いろんなプラグインを入れるとプラグインの干渉や相性問題も出てきます。

そんな時に便利なのが、機能満載のJetpackです。

皆さんも一度試して見て下さい。

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

コメントを残す




関連記事

ワードプレスの投稿記事を簡単に一括削除する3つの方法
ワードプレス構築の際に最初に入れると便利なプラグイン(Principle限定)
記事投稿時のタグ補完用プラグイン「AddQuicktag」のインストール
サイトの動きが重たい時に調査する方法-ワードプレス限定
Bootstrapを採用しているhtmlテンプレート&テーマ
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
レスポンシブウェブサイトで必須!メディアクエリとブレイクポイントの仕組み
ワードプレスの定番プラグイン「Jetpack」の使える便利な機能、5つをピックアップ!
サイト管理・運用用プラグイン「Maintenance Mode」のインストール
過去の投稿記事をTwitterで自動再ツイートするプラグイン・Tweetily
デザイン全般で使えるweb色見本
Dreamweaverを超えた?無料で使える高性能htmlエディタBrackets
2014年春、人気のCSSフレームワーク フラットデザイン対応もあります
Bracketsでお薦めの拡張機能(エクステンション)と拡張機能のインストール・アンインストール方法
人気記事表示用プラグイン「WordPress Popular Posts」の設定方法

Menu

HOME

 TOP