カスタム CSS

カスタム CSS エディターを使うことにより、子テーマを作成せずにテーマの外観をカスタマイズできます。また、テーマを更新することでカスタマイズした内容が上書きされてしまう心配もありません。

カスタム CSS の追加

まず Jetpack ダッシュボードでカスタム CSS モジュールを有効化してください。「外観 → CSS 編集」メニューから CSS エディターにアクセスできるようになります。

初めて CSS エディターを使用する場合 (あるいはカスタム CSS コードをまだ追加していない場合) は、編集ウィンドウに /* と */ で囲まれたプレースホルダーメッセージが表示されます。メッセージの冒頭はこのようなものです。

/*
カスタム CSS へようこそ!

CSS (カスケーディングスタイルシート) は、ブラウザに対し Web ページの表示方法を指定するためのコードです。このコメントを削除し、カスタマイズを始めることができます。

編集オプション

スタイルシートを編集する際にはいくつかのオプションがあり、編集ウィンドウの右側に表示されています。

• プリプロセッサー: CSS エディターは CSS プリプロセッサー、LESS および Sass (SCSS シンタックス) に対応しています。これは、変数や mixin といった CSS 拡張を活用したいというユーザーのための高度なオプションです。詳しくは LESS や Sassのサイトをご覧ください。
• モード: サイトのデザインを変更する場合、既存のテーマのスタイルシートに独自 CSS を追加するか、既存のテーマのスタイルシートを独自 CSS に置き換えるかを選択できます。テーマの HTML 構造から開始し、CSS を初めから全て自分で再作成したい場合は、2つめのオプションが良いでしょう。元のスタイルシートを参考にし、すべてのルールとスタイルに対応していることを確認してください。要素の定義が不足していると、ブログの表示が壊れてしまうことがあります。このオプションでは編集ウィンドウの CSS コードのみがブログに適用されます。
• モバイル対応: Jetpack のモバイル用テーマを使用している場合、モバイル版にもCSS の変更を適用したほうが良いかもしれません。
• コンテンツ幅: このオプションは、カスタム CSS を使って主要なコンテンツエリアの幅を修正した場合に使用する必要があります。「コンテンツ幅」設定は、フルサイズの画像、動画、あるいはショートコードがブログに挿入されている場合、その幅のデフォルトサイズとして使用されます。挿入方法によっては設定変更をする前に追加した画像や動画のサイズには適用されず、設定変更の後に再度挿入が必要となることもあるので注意してください。

プレビューと保存

スキルの高低に関わらず、CSS を編集する場合には実際に変更を適用する前に必ずプレビューすると良いでしょう。CSS に変更を加えたら、「プレビュー」ボタンをクリックしましょう。

新規のブラウザ ウィンドウまたはタブが開き、カスタム CSS コードが適用された場合のブログの状態を確認できます。ブログ上部の管理バーのすぐ下にメッセージが表示されます。

プレビューの内容に問題なければ、開いている CSS 編集ウィンドウに戻って「スタイル シートを保存」ボタンをクリックし、変更を保存してください。

CSS 変更履歴 (リビジョン)

CSS の履歴を比較するには、エディターのサイドバーにある「CSS 変更履歴」セクションでリビジョンの日付を選択してください。「2つのリビジョンを比較」にチェックを入れてスライダーの矢印を移動して履歴を比較することもできます。

カスタム CSS の以前のバージョンを復元するには、過去のリビジョンを表示した状態で「このリビジョンを復元」をクリックすると、カスタムCSS が以前の状態に戻ります。

メモ

Jetpack はデフォルトで、ドキュメント内部にインラインスタイルシートとしてカスタム CSS を組み込みます。ただし、カスタム CSS の長さが2000文字を超えている場合、Jetpack は外部スタイルシートを生成して、そのスタイルシートにリンクします。

プライバシーに関する情報

この機能は、デフォルトで有効化されます。Jetpack のメインの設定エリア内には、この機能を無効化するためのコントロールはありませんが、このガイドに従って無効化できます。

使用されるデータ
サイト所有者/ユーザー なし。	サイト訪問者 なし。
トラッキングされるアクティビティ
サイト所有者/ユーザー なし。	サイト訪問者 なし。
同期されるデータ (続きを読む)
サイト所有者/ユーザー 機能が有効化されているかどうかを識別するオプションと、サイトに追加されたカスタム CSS もコンテンツ (カスタム CSS の変更は実際には投稿として保管されます) を同期します。	サイト訪問者 なし。