カスタム CSS を追加する

ほとんどの変更は WordPress エディターの設定で行うことができますが、CSS コードの作成経験がある場合は、CSS を使用してサイトをカスタマイズすることもできます。このガイドでは、CSS を使用してサイトを編集する方法について説明します。

この機能は、WordPress.com プレミアムプラン、ビジネスプラン、コマースプランと従来の Pro プランをご利用のサイトで使用できます。無料プランおよびパーソナルプランのサイトでこの機能を利用するには、プランをアップグレードしてください。

CSS はカスケーディングスタイルシートの略で、Web ページ上で HTML 要素の外観をコントロールするマークアップ言語です。WordPress には CSS エディターが用意されており、独自の CSS スタイルを追加して、テーマのデフォルトスタイルを上書きできます。

CSS を使用すれば、サイトのデザインをほぼ無制限に変更できます。ただし、CSS と HTML の仕組みに関する知識 (または少なくとも学ぶ意欲) が必要です。MDN Web ドキュメントの CSS ガイドは、CSS の入門書として最適です。

CSS の学習に興味がない場合は、サイトにブロックテーマを選択してください。これらのテーマには柔軟なオプションが備わっており、コンピューターコードの知識がなくてもサイトのデザインのあらゆる側面をカスタマイズできます。

サイトの CSS エディターにアクセスするには、テーマに応じて2つの方法があります。各方法について以下で説明します。

サイトエディターに対応するテーマをサイトに使用している場合、この方法を使用して CSS でサイトをカスタマイズできます。サイトがサイトエディターを使用しているかどうかを簡単に判断するには、ダッシュボードの「外観」でチェックします。ここに「エディター」が表示されている場合は、次の手順に従って CSS エディターにアクセスできます。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動します。
3. 左側の「デザイン」メニューで「スタイル」をクリックします。
   • テーマにスタイルバリエーションがある場合は、鉛筆アイコンをクリックして「スタイル」オプションを開く必要があります。

4. 「スタイル」見出しの右側にある3つのドットをクリックし、「追加 CSS」を選択します。

5. 表示されたテキストボックスに CSS を入力するか貼り付けます。
6. 画面右上の「保存」ボタンをクリックして、CSS をサイトに保存します。

スタイルブックを読み込めば、CSS 変更によるブロックタイプへの影響をプレビューできます。目のアイコンをクリックしてスタイルブックを開きます。

サイトエディターのテーマでは、以下の手順に従ってサイト全体の特定のブロックに CSS コードを適用できます。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動します。
3. 左側の「デザイン」メニューで「スタイル」をクリックします。
   • テーマにスタイルバリエーションがある場合は、鉛筆アイコンをクリックして「スタイル」オプションを開く必要があります。
4. 今回は「ブロック」セクションを選択して、サイト全体の特定のブロックの外観をカスタマイズする設定にアクセスします。
5. CSS を追加するブロックの名前をクリックします。検索ボックスを使用して、目的のブロックタイプを見つけることもできます。
6. 一番下までスクロールし、「高度な設定」をクリックします。
7. 「追加 CSS」というラベルのボックスに、対象のブロックタイプのすべてのインスタンスに適用する CSS を入力します。ブロック単位の CSS を追加する場合、CSS セレクターを含める必要はありません。プロパティと値のみを追加します。上の動画にはサンプルが含まれています。
8. 画面右上の「保存」ボタンをクリックして、CSS をサイトに保存します。

クラシックテーマや多くのサードパーティ製テーマなど、サイトエディターを使用しないテーマの場合は、次の手順に従って CSS を追加できます。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「カスタマイズ」→「追加 CSS」の順に移動します。
3. 表示されたテキストボックスに CSS を入力するか貼り付けます。右側のプレビューウィンドウに変更内容が反映されます。
4. 「変更を保存」ボタンをクリックして CSS をサイトに保存します。

最新の25件の CSS 編集のバージョンが保存され、CSS エディターの下部にある「全履歴を表示」をクリックするとアクセスできます。ここでは CSS を以前のバージョンに復元できます。

このオプションが表示されない場合は、復元する CSS 履歴がありません。

メインのコンテンツエリアの幅をカスタム CSS を使用して変更した場合は、「メディア幅」を使用します。「メディア幅」設定は、フルサイズの画像をサイトに挿入するときのデフォルトサイズです、

「メディア幅」設定を変更する前に追加した画像のサイズについては、その画像がどのように挿入されたかによって、この設定が適用されない場合があることに注意してください。そのような画像に設定を適用するには、「メディア幅」設定の変更後に、画像を再度挿入する必要があります。

デフォルトでは、CSS エディターに追加するカスタム CSS は、テーマの元の CSS の後に読み込まれます。つまり、各自のルールがテーマのスタイルよりも優先され、テーマのスタイルを上書きします。

テーマの元の CSS を完全にオフにするには、「テーマの CSS を使用しない」チェックボックスをクリックします。これにより、WordPress.com のテーマを空白のキャンバスとして使用し、CSS を使用したデザインを行うことができます。これは高度なオプションであり、テーマの CSS を最初からやり直してデザインする場合にのみ使用してください。

既存の CSS ルールに基づいて作成する場合 (最も一般的であり推奨される方法) は、このオプションをオフにしておきます。

WordPress.com では、CSS プリプロセッサ LESS と Sass (SCSS 構文) がサポートされています。これは、変数や mixin などの CSS 拡張機能を利用したいと思っているユーザー向けの高度なオプションです。詳細については、LESS および Sass のサイトを参照してください。

フッタークレジットは CSS を使用して変更しないでください。サイトで使用するテーマの種類によっては、設定を使用してフッタークレジットを削除または変更できます。

• サイトでブロックテーマを使用している場合は、サイトエディターを使用してフッタークレジットを編集または削除できます。CSS を使用する必要はありません。
• サイトでクラシックテーマを使用している場合は、ミニマルデザインの WordPress ロゴにフッタークレジットを変更できます。サイトにビジネスプランまたはコマースプランのサブスクリプションがある場合は、クレジットを非表示にできます。

はい、プラグイン対応サイトでのみ使用できます。

テーマのオプションを使用してサイトのフォントを選択できます。CSS を使用する場合は、フロントエンドではこれら2つの Web フォントに制限されます。ただし、サードパーティのフォントプラグインを使用してフォントを追加できます。

はい。メディアライブラリに画像をアップロードし、CSS スタイルシート内から直接 URL で参照できます。スタイルシートで背景画像を使用する例を次に示します。

div#content {
background-image: url('http://example.files.wordpress.com/1999/09/example.jpg');
}

このガイドですでに説明したように、CSS エディターを使用して CSS を編集することをお勧めします。この方法を使用して CSS を追加すると、テーマのスタイルシートの CSS ルールが上書きされます。この方法を使用すれば、CSS の競合のデバッグや、追加した以前のバージョンの CSS の復元を安全かつ簡単に行うことができます。

テーマファイルを直接編集することに慣れている場合は、SFTP 経由で、または子テーマを作成して編集できます。ライブサイトに適用する前に、ステージングサイトで変更をテストすることをお勧めします。

WordPress.com のすべてのアップグレードは、毎年更新されます。登録をキャンセルすると、カスタム CSS は保存されたままになりますが、サイトには適用されなくなり、他のユーザーは見ることができなくなります。カスタム CSS をサイトに再適用する場合は、プランを再購入してください。テーマを変更していない限り、スタイルは自動的に再適用されます。テーマを変更した場合は、「CSS 変更履歴」リンクで過去の CSS を探すことができます。