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

コメントを残す




関連記事

Bootstrapを採用しているhtmlテンプレート&テーマ
Googleに更新情報を素早く伝えるためのプラグイン「PuSHPress」
ワードプレスサイトのセキュリティは大丈夫!?3つのポイントを押さえて万全に
PS Auto Sitemapプラグインのインストール
鮮やかな背景をCSSで表現できるウェブツール これはかなり使えます!
レスポンシブwebサイトを構築するためのポイント「viewport」とは
サイトの管理・運用に便利なプラグイン「Google Analytics Dashboard」のインストール
GoogleがWordPress用プラグインの提供を始めました
ツイッターとワードプレスを連携させるプラグイン「WP to Twitter」の設定方法
アイコン付きのフラットデザイン風ボタンを簡単に作れるツール「2.5dBUTTON」
ワードプレスのテーマ作成・編集の際に使えるプラグイン「Theme Test Drive」
CSVデータを簡単にインポート出来るプラグイン「Really Simple CSV Importer」を使用する際のポイント
MySQLデータベースを使用しないでワードプレスを構築する方法
レスポンシブ・フレームワーク「Bootstrap」を使う際に便利なツール、アイコン、テンプレート
ワードプレスでヒートマップ解析を簡単に行えるツール「User Heat」

Menu

HOME

 TOP