CSS による WordPress テーマのカスタマイズ

テーマは、WordPress の最大のセールス ポイントの 1 つです。 適切なテーマは、あなたのウェブサイトを際立たせます。 ただし、通常、すべてを適切に行うために、使用するテーマに少なくともいくつかのカスタム変更を加えたいと思うでしょう.

ほとんどの場合、カスケーディング スタイル シート (CSS) を使用してテーマのスタイルをカスタマイズする必要があります。 WordPress では、これを行う方法がいくつかあります。 コードを扱った経験がなくても、独自の CSS 調整を WordPress テーマに簡単に追加できます。

このガイドでは、WordPress でカスタム CSS を追加および編集するために使用できる 3 つの方法を見ていきます。 プロセス全体を順を追って説明し、各テクニックを使用する意味がある場合について説明します。 始めましょう！

テーマ カスタマイザーでカスタム CSS を追加する

経験レベル:初心者

WordPress カスタマイザーを使用すると、Web サイトのデザインを変更し、リアルタイムでプレビューできます。 アクセスするには、WordPress ダッシュボードにログインし、 [外観] > [カスタマイズ]タブに移動します。

ここで遊べる設定がたくさんあります。 ただし、今は[Additional CSS]タブを探してください。 クリックすると、新しいセクションが開き、カスタム CSS を追加できるフィールドが表示されます。

CSS を初めて使用する場合は、公式の Codex で WordPress で CSS を使用する方法について詳しく読むことができます。 CSS の基礎に関する優れたリソースは他にもたくさんあります。それらのいくつかをチェックすることをお勧めします。

CSS は少し複雑になる場合がありますが、基本を知っているだけで多くのことを達成できます。 WordPress カスタマイザーを使用することの優れた点は、CSS を使用して行った変更を即座にプレビューできることです。 つまり、このアプローチは CSS の仕組みを学ぶのに最適です。

注: テーマを変更すると、カスタマイザーを使用して行った変更は保持されません。 さらに、現在のテーマを更新すると、カスタム CSS が消去される場合があります。 そのため、多くの変更を行う場合やテーマ オプションの中間にある場合は、このアプローチはお勧めしません。

プラグインでカスタム CSS を追加する

経験レベル:初級者から中級者

上記の方法はうまく機能しますが、プラグインを使用してオプションを拡張できます。 次のセクションでは、WordPress テーマをカスタマイズできる 3 つのプラグインについて説明します。

注: プラグインを使用して WordPress CSS を編集するための経験レベルは、使用するツールによって異なります。 それらをすべてテストして、どれが最も快適に感じるかを確認することをお勧めします.

高度な CSS エディター

WordPress カスタマイザーを使用したいが、より多くのオプションを提供したい場合は、このプラグインを検討する価値があります. 高度な CSS エディターを使用すると、デスクトップ、携帯電話、およびタブレット用のカスタム CSS を追加できます。 このようにして、各タイプのデバイスで Web サイトがどのように表示されるかを微調整できます。

WordPress プラグインをインストールしたら、ダッシュボードの[外観] > [カスタマイザー]タブに移動します。 デバイスの種類ごとに複数のエディターにアクセスできる、新しい高度な CSS エディターオプションが表示されます。

必要なカスタム CSS を追加し、それが正しく機能することをテストして確認し、変更をテーマに保存するだけです。

長所：

• すべてのデバイスで Web サイトがどのように表示されるかを完全に制御できます。
• カスタマイザーから引き続きテーマを編集できます。

短所：

• 複数の種類のデバイスにカスタム CSS を追加するのは大変な作業です。

平均評価: 4.5/5

注:このプラグインには、サイトの読み込み時間を短縮するのに役立つ CSS を縮小するオプションも含まれています。

モジュラー カスタム CSS

モジュラー カスタム CSS を使用すると、WordPress カスタマイザーを介してテーマに CSS を追加できます。 ただし、デフォルトの CSS エディターに非常に歓迎される機能がいくつか追加されています。 より具体的には、このプラグインを使用すると、個々のテーマ用のカスタム CSS を作成し、設定したテーマ全体に適用されるグローバルな変更を行うことができます:

これらのフィールドにアクセスするには、 [外観] > [カスタマイザー] > [追加の CSS]セクションに戻る必要があります。 ここまで来たら、変更を開始できます。

長所：

• 特定のテーマにのみカスタム CSS を追加し、テーマを切り替えても変更が維持されるようにすることができます。

短所：

• 「グローバル」CSS はすべてのテーマで適切に機能するとは限らないため、新しいテーマに切り替えるときは注意が必要です。

平均評価: 5/5

SiteOrigin CSS

SiteOrigin CSS は、これまで説明してきたプラグインとは一線を画しています。 カスタマイザーに新機能を追加する代わりに、スタンドアロンの WordPress CSS エディターを提供します。 プラグインをインストールした後、 [外観] > [カスタム CSS]タブに移動して、この新しいエディターにアクセスできます。

一見すると、この CSS エディターは大したものには見えません。 ただし、目のアイコンをクリックすると、ビジュアル エディターが起動します。 ここでは、テーマの任意の要素をクリックして、CSS を使用して簡単に編集できます。

SiteOrigin CSS プラグインは、最初は少し戸惑うかもしれません。 ただし、正しいセレクターを探す必要がないため、時間を大幅に節約できます。 変更したい要素をクリックして、好きな CSS コードを追加するだけです。

長所：

• ウェブサイトに必要な要素をクリックして編集できます。
• このプラグインを使用すると、フォントなど、CSS を使用せずにテーマのいくつかの単純な側面を変更できます。

短所：

• 複数の要素を調整する場合、テーマに追加するすべてのカスタム CSS を追跡するのは難しい場合があります。

平均評価: 4.9/5

子テーマのスタイルシートで CSS を編集する

経験レベル:上級

子テーマは、既存のテーマ (「親」と呼ばれる) のコピーです。 子テーマを使用すると、WordPress Web サイトを安全に変更できます。 これは、カスタム CSS の微調整を失うことなく、親テーマを引き続き更新できるためです。 さらに、サイトに悪影響を与える CSS を追加する場合は、子テーマを無効にするだけです。

子テーマに追加するカスタム CSS は、その親のスタイルをオーバーライドします。 ただし、これを機能させるには、最初に子テーマを作成する方法を知る必要があります。 「子」の準備ができたら、FileZilla などの FTP クライアントを使用してそのファイルにアクセスできます。

FTP 経由で Web サイトに接続したら、ルート フォルダーを見つけます。このフォルダーは、多くの場合、 public_htmlまたはwwwと呼ばれるか、Web サイトにちなんで名付けられます。

次に、 wp-content/themesディレクトリに移動します。 そこには、設定した子テーマを含むすべてのテーマの個別のフォルダーがあります。 子テーマのフォルダーを開き、次の場所でstyle.cssファイルを探します。

テーマ ファイルを右クリックし、 [表示/編集]オプションを選択します。 これにより、デフォルトのテキスト エディターを使用してファイルが開き、変更を加えることができます。 つまり、カスタム CSS をテーマに追加できるようになり、WordPress カスタマイザーの代わりにフル テキスト エディターを使用できるようになりました。

完了したら、変更をファイルに保存し、エディターを閉じます。 次に、Web サイトにアクセスして、行った変更が意図したとおりに機能したかどうかを確認できます。 そうでない場合は、 style.cssファイルに戻り、CSS の微調整を続けることができます。

注:これは大まかな概要であり、子テーマの設定と使用にはさらに多くのことがあります。 このプロセスに慣れていない場合は、慎重に進めることをお勧めします。

カスタム CSS とテーマ カスタマイザー vs. CSS プラグイン vs. 子テーマ スタイルシート

ご覧のとおり、カスタム CSS を WordPress に追加する場合、多くのオプションがあります。 ただし、適切なアプローチを選択するのは難しい場合があります。 プラットフォームと一般的な CSS の経験レベルに応じて、選択肢を分類してみましょう。

• あなたは WordPress を初めて使用し、CSS の使用に慣れていません。 このシナリオでは、最善の策は WordPress カスタマイザーを使い続けることです。 これにより、変更をすぐにプレビューして、CSS の使用に慣れることができます。
• WordPress と CSS の使用経験があること。 この段階では、デフォルトのカスタマイザーが提供するよりも多くのオプションが必要になります。 したがって、WordPress でカスタム CSS を編集するには、機能を改善するプラグインを使用することをお勧めします。
• あなたは、CSS の使用に慣れている WordPress のベテランです。 CSS やコード スニペットに抵抗がない場合は、子テーマを設定して、そのスタイルシートを手動で編集することをお勧めします。

これらは単なるガイドラインであり、最も使いやすいと思われるアプローチを自由に使用してください。

優れたデザインと一流のホスティングでデジタル体験を強化

Web サイトのデザインは、訪問者が Web サイトについてどう思うかにおいて重要な役割を果たします。 WordPress を使用すると、何千ものテーマにアクセスでき、カスタム CSS を使用してそれらを編集できます。

ただし、成功するウェブサイトの運営は見た目だけではありません。 また、優れたパフォーマンス、セキュリティ、およびサポートを提供する WordPress Web ホスティングも必要です。 WP Engine を使用すると、すべてのプランでこれらすべての機能にアクセスできます!