ワードプレステーマを変更せずに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
  • このエントリーをはてなブックマークに追加

コメントを残す




関連記事

ワードプレス・プラグインのインストール方法
これは便利!グラデーションが簡単に作れるCSSジェネレーター
表示しながらCSSの編集が出来るFirebugの使い方
ワードプレスのテーマにOGP(Open Graph Protocol)を簡単に対応させる方法
htaccessファイルの作成方法-サイトのリダイレクトやアクセス制限にも使えます
Jetpackで自動に生成されるOGPタグを削除する方法
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」
Ping送信管理プラグイン「WordPress Ping Optimizer」で送信エラーをチェック
記事投稿時のタグ補完用プラグイン「AddQuicktag」のインストール
ワードプレスデータをMovable Type(MT)や無料ブログにインポート(移行)する方法
ワードプレスのテーマ作成・編集の際に使えるプラグイン「Theme Test Drive」
ワードプレス構築の際に最初に入れると便利なプラグイン(Principle限定)
ワードプレスの定番プラグイン「Jetpack」の使える便利な機能、5つをピックアップ!
違うブラウザで同じ表示をさせるためには リセットCSSとノーマライズCSSの特徴
MySQLデータベースを使用しないでワードプレスを構築する方法

Menu

HOME

 TOP