21.カスタム CSS－Jetpack by WordPress.com

2014/01/20 2014/11/22

wordpressを利用していて一番利用されているプラグインが、
このwordpress.comが提供しているJetPackではないでしょうか。
JetPackプラグインは機能が多いのですが、
ここでは「カスタム CSS」の機能についてご紹介します。

はじめに

Jetpack by WordPress.comのすべての機能を使っているでしょうか。
私はこれまで必要なものだけを使って、ほかの機能はあまり気にしていない状態でした。

ざっと全体の機能を確認しましたので、ご紹介しておきます。

カスタム CSS

カスタム CSS

カスタム CSS エディタを使うとテーマの CSS を追加または置き換えできるようになります。構文カラーリング、自動インデント、リアルタイムな CSS ルールチェック機能も含まれています。

CSS エディタを使うには「外観 → CSS 編集」画面に移動してください。

JetPackカスタム CSS詳細

使用方法

カスタムCSSを有効化した際には、[外観]-[CSS]編集メニューが表示されるようになります。

CSS編集メニュー表示

[CSS編集]をクリックすると、CSSの編集を行うことができます。

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

尚、CSS編集画面が以下のような色合いで表示されている場合には、
正しく動作していない恐れがあります。

ACE Code Editor無効表示

その場合、以下の投稿を参考にバージョンの見直しをお勧めします。
JetPackのカスタムCSSエディタのACE Code Editorが表示されない場合

このメインのテキストエリアに対して直接割り当てたいCSSを指定することができます。

ACE Code Editorの操作

CSSの変更をおこなったら[スタイルシートを保存]をクリックして変更を保存します。

公開（ウィジェット部）

公開の部分に表示されている部分で設定変更が行えます。

公開ウィジェット

プリプロセッサ

プリプロセッサの[編集]をクリックすると使用するプリプロセッサを変更することができます。
選択肢は以下から選択ができます。

なし
LESS
Sass(SCSS Syntax)

プリプロセッサの選択

それぞれによってCSS記述の手法が利用できるようになります。

「なし」では通常のCSSによる記法が利用できます。

「LESS」ではLESSを利用した効率的な記法が行えるようになります。
LESS « The Dynamic Stylesheet language

「Sass(SCSS Syntax)」ではSassを利用した効率的な記法が行えるようになります。
Sass: Syntactically Awesome Style Sheets

モード

モードではカスタムCSSによるスタイルシート定義と、テーマに定義されているCSSとの関係を指定します。

CSS を追加 (推奨)
テーマの CSS と入れ替え (上級者向け)

モードの選択

CSSを追加

「CSSを追加」ではテーマが利用しているCSSを利用したうえで、
カスタムCSSの定義を追加して、新たなデザインを指定します。
この場合、カスタムCSSの定義がテーマのCSS定義によって反映されない場合があります。

以下は、カスタムCSSに何も定義せず、CSSを追加を選択した表示です。
カスタムCSSに何も記述していない状態でも、テーマのCSSが有効となりデザインが維持されます。

CSSを追加による表示

テーマの CSS と入れ替え

「テーマの CSS と入れ替え」を選択した場合、まずテーマのCSSが無効化されます。
その上で、カスタムCSSの定義を行いますので、テーマによって設定されているCSSによるデザイン定義を、
カスタムCSSの定義にコピーしなければCSS定義のない状態で公開されます。

１からすべてを記述（テーマCSSをすべてコピーした上で編集も可）する為、
自由度が高くなりますが、テーマのCSSを利用しないというスタンスで編集する必要があります。

以下は、カスタムCSSに何も定義せず、テーマのCSSと入れ替えを選択した状態のサイト表示です。
CSSが無効になって表示されています。

テーマのCSSと入れ替えによる表示

コンテンツ幅

この表示されているCSSは現在適用しているテーマごとに管理されています。

テーマによってデフォルトのコンテンツ幅が定義されていますが、
そのデフォルトコンテンツ幅を採用するか、独自にコンテンツ幅を変更するかが設定できます。

コンテンツ幅の選択

設定の反映には[スタイルシートを保存]をクリックしてスタイルシートを保存します。

CSS変更履歴

CSS変更履歴では[スタイルシートを保存]をクリックして、スタイルシートを上書きすると、
変更履歴として過去のスタイルシートが保存され表示されるようになります。

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

テーマを変更するとこれまで利用していたCSSも履歴に保存され、
新しく割り当てたテーマ用に新しくCSSが割り当てられます。

履歴はウィジェット上で５件表示されています。

履歴の確認

履歴に表示されている[日付@時間(テーマファイル名)]のリンクをクリックすると履歴の確認が行えます。

履歴日付のクリック

以下のように履歴の比較画面が表示されます。

リビジョン比較の表示

上に表示されているスライダーを左（過去）に動かすことでこれまでの変更履歴を
遡って呼び出すことができます。

スライダによるリビジョン呼び出し

[２つのリビジョンを比較]をチェックするとスライダが２つに分かれ、
任意の２つのリビジョンを比較することができます。

２つのリビジョン比較

適用したいリビジョンが見つかったら、[２つのリビジョンを比較]をチェックを外し、
スライダで目的のリビジョンを表示し[このリビジョンを復元]をクリックします。

リビジョンの適用

さいごに

カスタム CSSにて保存されているCSSははローカル（サーバーストレージ）には保存されず、
WordPress.com側で保持されています。

その為、JetPackを停止したり、アンインストールしたりしてもデータは保存されています。

こうした点でも安心して利用ができると思います。

WordPressはWordPress Foundation の登録商標（第５０４９９６５号）です。
WordPressロゴ、アイコンその他のマーク等はWordPress Foundation の商標であり、
WordPress Foundation の著作物です。
WordPress.comはWordPress Foundation が管理運営を行うドメインならびにサービスの名称です。