頑張らない!でも諦めない!必死にならずにええかげん

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

      2014/11/22

Google or AdMax Promotion(it)

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

はじめに

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

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

カスタム CSS

カスタム CSS

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

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

01_JetPackカスタム CSS詳細

JetPackカスタム CSS詳細

使用方法

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

02_CSS編集メニュー表示

CSS編集メニュー表示

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

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

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

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

03_ACE Code Editor無効表示

ACE Code Editor無効表示

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

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

04_ACE Code Editorの操作

ACE Code Editorの操作

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

公開(ウィジェット部)

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

05_公開ウィジェット

公開ウィジェット

プリプロセッサ

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

  • なし
  • LESS
  • Sass(SCSS Syntax)
06_プリプロセッサの選択

プリプロセッサの選択

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

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

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

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

モード

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

  • CSS を追加 (推奨)
  • テーマの CSS と入れ替え (上級者向け)
07_モードの選択

モードの選択

CSSを追加

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

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

08_CSSを追加による表示

CSSを追加による表示

テーマの CSS と入れ替え

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

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

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

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

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

コンテンツ幅

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

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

10_コンテンツ幅の選択

コンテンツ幅の選択

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

CSS変更履歴

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

11_CSSスタイルシートエディタ

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

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

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

履歴の確認

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

12_履歴日付のクリック

履歴日付のクリック

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

13_リビジョン比較の表示

リビジョン比較の表示

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

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

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

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

15_2つのリビジョン比較

2つのリビジョン比較

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

16_リビジョンの適用

リビジョンの適用

プロモーション(btm)

Google or AdMax Promotion (it)

さいごに

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

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

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


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

*本ページ内に記載されされた各社ブランド、サービス名、商標、登録商標については、
各社ブランドのロゴや商標等に関する帰属についてをご確認ください


最後までお読みいただきありがとうございました。
アルゴリズン


役に立ったと思っていただけたら、以下からシェア頂けたら幸いです^^

QRコードからもこのURLを開けます。

Pitta Promotion

アイキャッチ画像に利用させて頂いております、各社ブランドのロゴやシンボルに関しては、
各社ブランドのロゴや商標等に関する帰属についてをご確認頂けますようお願い致します。
ロゴの使用等に関する苦情・ご意見等がございましたら管理者までご連絡ください。

AdMax Promotion

カテゴリ
すべて展開 | すべて省略

Rakuten Promotion

 - jetpack, WordPress , ,

  関連記事