WordPress CSSの編集を試したいが、どこから始めればよいかわからない? CSSスタイルを使用すると、サイトの外観をグローバルに、または特定のページで編集できます。色を追加し、特定の要素の間隔を空け、レイアウトを設計し、基本的にWordPressテーマの外観を正確に変更します。

WordPressの開発環境に慣れたい場合、またはWebサイトの外観をより細かく制御したい場合は、WordPressにCSSを追加する方法(および既存のものを変更する方法)を知っておく必要があります。

テーマを編集し、独自の追加のCSSを含めることで、サイトのすべての視覚要素を最適化できます。今日はそれを詳しく見ていきます。

始める準備はできましたか?やってみましょう!

CSS編集とは何ですか?

CSSはCascadingStyle Sheetsの略で、他に最も人気のあるWeb言語です。 HTML。それらの2つは、次のように手をつないで行きます CSSはHTML要素のスタイル設定に使用されます。 HTMLはウェブサイトの外観の基礎を築き、CSSはそれをさらにスタイルするために使用されます。

w3school

CSSコードの例(出典:w3schools.com)

CSSはあなたに ウェブサイトをレスポンシブにする、色を追加、 フォントを変更する、レイアウトを変更し、一般的にWebサイトの視覚的表現を微調整します。 HTMLやJavaScriptと同様に、CSSはフロントエンドのクライアント側言語です。つまり、CSSは、バックエンドサーバーではなく、ユーザー側で実行されます。

WordPress開発、HTML、CSS、JavaScript、および PHP あなたが知る必要がある言語です。これがコアです CMS が組み込まれているだけでなく、 多くのテーマ そして プラグイン.

しかし、あなたがそうでなくても ウェブデザイナー または 開発者、CSSを使用して、Webサイト上の要素を移動またはスタイル設定したり、テーマに小さな美的変更を加えたりできるので、CSSを少し選択することをお勧めします。

/ *クリックしてツイート* /
body a.novashare-ctt {
表示ブロック;
背景:#00abf0;
マージン:30px自動;
パディング:20px 20px 20px 15px;
色:#ffffff;
テキスト装飾:なし!重要;
ボックスシャドウ:なし!重要;
-webkit-box-shadow:なし!重要;
-moz-box-shadow:なし!重要;
境界線:なし;
border-left:5px solid #00abf0;
}
body a.novashare-ctt:hover {
色:#ffffff;
border-left:5px solid #008cc4;
}
body a.novashare-ctt:visited {
色:#ffffff;
}
body a.novashare-ctt * {
ポインタイベント:なし;
}
body a.novashare-ctt .novashare-ctt-tweet {
表示ブロック;
フォントサイズ:18px;
行の高さ:27px;
マージンボトム:10px;
}
body a.novashare-ctt .novashare-ctt-cta-container {
表示ブロック;
オーバーフロー:非表示;
}
body a.novashare-ctt .novashare-ctt-cta {
フロート:右;
}
body a.novashare-ctt.novashare-ctt-cta-left .novashare-ctt-cta {
フロート:左;
}
body a.novashare-ctt .novashare-ctt-cta-text {
フォントサイズ:16px;
行の高さ:16px;
垂直整列:中央;
}
body a.novashare-ctt .novashare-ctt-cta-icon {
マージン左:10px;
表示:インラインブロック;
垂直整列:中央;
}
body a.novashare-ctt .novashare-ctt-cta-icon svg {
垂直整列:中央;
高さ:18px;
}
/ *シンプル+シンプルな代替テーマ* /
body a.novashare-ctt.novashare-ctt-simple {
背景:なし;
パディング:10px 0px 10px 20px;
色:初期;
}
body a.novashare-ctt.novashare-ctt-simple-alt {
背景:#f9f9f9;
パディング:20px;
色:初期;
}
body a.novashare-ctt.novashare-ctt-simple:hover、body a.novashare-ctt.novashare-ctt-simple-alt:hover {
border-left:5px solid #008cc4;
}
body a.novashare-ctt.novashare-ctt-simple .novashare-ctt-cta、body a.novashare-ctt.novashare-ctt-simple-alt .novashare-ctt-cta {
色:#00abf0;
}
body a.novashare-ctt.novashare-ctt-simple:hover .novashare-ctt-cta、body a.novashare-ctt.novashare-ctt-simple-alt:hover .novashare-ctt-cta {
色:#008cc4;
}

WordPressとCSS

WordPress内では、CSSは少し異なります。それは テーマによって制御、テンプレートファイル、テンプレートタグ、そしてもちろんCSSスタイルシートで構成されています。あなたのテーマによって生成されますが、これらはすべてあなたが編集できます。

テンプレートファイル Webサイトの一部をセクション(header.phpやarchive.phpなど)に分割し、 テンプレートタグ それらとデータベースからの他のコンテンツを呼び出すために使用されます。これらのファイルは実際にはほとんどPHPとHTMLで構成されていますが、必要に応じてCSSを追加することもできます。

あなたが本当に探しているのは スタイルシート、またはstyle.css。あなたのウェブサイトの見た目を変えるために、あなたは学ぶ必要があるでしょう コードを追加および編集する方法 このファイルで。

CSSを使用してWordPressテーマをカスタマイズする方法

あなたがしたい場合は テーマをカスタマイズする CSSを使用してサイトの外観を変更するには、独自のコードを追加するか、すでに存在するものを編集する必要があります。テーマファイルに触れることなくCSSを追加する方法はありますが、既存のテーマコードを変更するには、サイトのスタイルシートにアクセスする必要があります。

これらの変更を行うとき、知っておくべきことが1つあります。 テーマの更新、あなたが行った編集 style.css, 関数.php、または他のテーマテンプレートファイルが消去されます。一般に、エディターを使用せずにWebサイトに直接変更を加えることはできません。 子テーマ.

スタイルシートは、Webサイトの「手順のリスト」のようなもので、スタイルとCSSコードの処理方法を正確に設定します。ここで編集の大部分を行いますが、次のような他のテーマテンプレートファイルにアクセスする方法も示します。 header.phpおよびfooter.php.

WordPress Webサイトのスタイルシートにアクセスするには、次の2つの方法があります。 WordPressダッシュボード または経由 FTPクライアント。両方について説明します。

自分でこれを行うのは快適ではありませんか?検討する WordPress開発者を雇う あなたのためにそのステップを処理します。

ダッシュボードでのWordPressCSSの編集

CSSスタイルシートにアクセスする最も簡単で便利な方法は、WordPressダッシュボードです。 FTPプログラムをインストールする必要はありません コードエディタ。構文の強調表示と関数のドキュメントが組み込まれているファイルを直接編集できます。

コアファイルを大幅に編集する前に、常に WordPressサイトをバックアップする。 CSSを初めて使用する場合、誤ってサイトの外観を壊す可能性のある間違いを犯すのは非常に簡単であり、変更を元に戻す方法を理解するのは難しい場合があります。

バックアップと子テーマを作成したら、バックエンドにログインします。メニューに移動してクリックすると、エディターを見つけることができます 外観>テーマエディター.

これらのファイルを直接編集しないように警告するポップアップが表示されます。心配しないで、「わかりました」をクリックするだけです。大きな変更を加える前に、子テーマを使用してWebサイトをバックアップすることは警告にすぎません。これらの手順に従ってください。編集しても安全です。

edit themes

WordPressファイルを直接編集する

そして今、あなたは入っています!デフォルトではスタイルシートが表示されているはずですが、そうでない場合は、右側のメニューを参照してテーマファイルを表示してください。

style.cssに加えて、functions.php、header.php、single.phpなどのテンプレートファイルにもアクセスできます。これらはすべて、サイトの特定のページの動作に影響します。

しかし、あなたはすべきです PHPに精通する これらの特定のファイルに飛び込む前に。

Editing the style.css stylesheet in a WordPress theme

WordPressテーマでstyle.cssスタイルシートを編集する

ここで行うCSSの変更のほとんどはグローバルになります。たとえば、H1ヘッダーを特定のフォントに変更すると、サイトのすべてのページで有効になります。特定のページのスタイルをカスタマイズするには、特別な構文を使用する必要があります。

テーマファイルを直接編集する

テーマエディタにアクセスできない場合、またはFTP経由で作業を行う場合はどうなりますか?バックエンドエディタを使用する方が簡単ですが、テーマやプラグインによっては無効になる場合があります。その場合は、次のことを行う必要があります FTPを介してWebサイトに接続します.

FTP、またはファイル転送プロトコルを使用すると、Webサイトのファイルにリモートでアクセスして変更できます。あなたがする必要がある最初のことは FileZillaをダウンロード またはその他のFTPクライアント。

次に、ホストに連絡して、FTP資格情報(ホスト、ポート、および該当する場合はユーザー名/パスワード)を要求する必要があります。ホストにダッシュボードがある場合は、ログインすることでダッシュボードを見つけることができる場合があります。

FTP credentials in MyKinsta

MyKinstaのFTP資格情報

Kinstaユーザーの資格情報は MyKinstaダッシュボードサイト> SFTP / SSH.

それらを入手したら、FTPクライアントを起動し、その情報を入力します。それが機能しない場合は、URLの前に「sftp://」を付けてみてください ホスト セクション。

FileZilla

FileZillaの使用

入ったら、をクリックしてstyle.cssファイルを見つけることができます。 wp-content それを開くためのフォルダ、次にテーマのフォルダ( Tゴイ20 テーマ)、style.cssが表示されるまでスクロールします。

ダブルクリックして開きます(または右クリックして選択します 表示/編集)そして変更を加えます。保存してサーバーにアップロードし直すことを忘れないでください。

他の編集が必要な場合 テンプレートファイル home.php、single.php、archive.phpのように、style.cssと同じフォルダーにあります。

テーマファイルの編集、FTPまたはダッシュボードのどちらを使用する場合でも、必ずしも必要なわけではありません。実際、コードを追加するだけの場合は、これを行わない方がよいでしょう。

小さな追加の場合、WordPressサイトにCSSを追加する最良の方法は次のとおりです。

WordPressでカスタムCSSを追加する方法

既存のCSSコードを編集する必要がなく、代わりに独自のスタイルを追加したい場合は、WordPressカスタマイザーまたは専用プラグインのいずれかの方法を使用することを強くお勧めします。

1つは、これらのメソッドの1つを介して追加されたCSSコードは、アクセスと使用がはるかに簡単です。新しいCSSを間違った場所に置いたり、後で変更したい場合に追加した場所を忘れたりすることを心配する必要はありません。

また、これらの方法のいずれかで追加されたCSSは、テーマが更新されても失われません(ただし、 テーマを変更する).

つまり、子テーマを使用する必要はありません。何かが壊れた場合は、追加したCSSを削除するだけです。

あなたはまだすべきであることに注意してください あなたのウェブサイトのバックアップを保管してください、一部の人々は、メジャーアップデート中にCSSを失うことがあると報告しています。それでも、この方法は、テーマファイルを直接編集するよりもはるかに信頼性があります。

style.cssにコードを追加して、1日呼び出すこともできますが、必要がない場合は 子テーマを作成する、テーマ内の既存のCSSを大幅に編集すると、すべての作業が消去される可能性があります。WordPressカスタマイザーの[追加のCSS]オプションを使用するか、プラグインをインストールすることをお勧めします。

1.WordPressカスタマイザーによるCSSの編集

テーマエディタを使用する代わりに、これを試してください。 WordPressバックエンドにログインします をクリックします 外観>カスタマイズ テーマのカスタマイズ画面を開きます。ウェブサイトのライブプレビューが表示され、左側に色、メニュー、その他の要素をカスタマイズするためのオプションがあります ウィジェット.

このメニューの一番下に、 追加のCSS ボックス。

クリックして開きます。コード入力ボックスといくつかの手順が表示された新しい画面が表示されます。追加のCSS画面には、テーマエディターと同様に、構文の強調表示と、コードが間違っているかどうかを通知する検証が含まれています。

additional CSS

WordPressの追加CSS

作成したコードは、エラーがない限り、右側のプレビュー領域に自動的に表示されます(ただし、とにかく公開することを選択できます)。

作業が完了したら、コードを公開したり、コードが有効になる時期をスケジュールしたり、後で作業するためにドラフトとして保存したりできます。他の人と共有するためのプレビューリンクを取得することもできます。

ご覧のとおり、追加のCSSページは、テーマエディターよりも多くの点で強力であり、コアファイルをいじるよりもコードを追加するのにはるかに適しています。

ここで記述したCSSコードは、テーマのデフォルトのスタイルを上書きし、テーマが更新されても消えることはありません。プレビューに「ライブ」で表示されない場合は、CSSコードで正しいセレクターを使用していることを再確認してください。

テーマエディターと同様に、CSSはデフォルトでグローバルですが、次のようなコードを記述できます。 特定のページをターゲットにする.

1つの欠点は、 テーマを切り替える必要があります、あなたが書いたものはすべて消去されます。新しいテーマに移動する前に、必ずCSSをバックアップしてください。そうしないと、多くの作業が失われる可能性があります。

このオプションの使用に苦労している場合、またはテーマ間で機能し、特定のページをより簡単にターゲットにできるソリューションが必要な場合は、代わりにプラグインを試す必要があります。

2.プラグインを使用してWordPressにカスタムCSSを追加する

プラグインを使用してCSSをWordPressに追加する理由はいくつかあります。機能は追加のCSSメニューに似ていますが、テーマを切り替えたり更新したりしても、通常はスタイルが固定されます。

また、UIをもっと楽しんだり、オートコンプリートなどの追加機能を気に入ったりすることもできます。一部のプラグインでは、CSSを構築することもできます ドロップダウンメニュー、自分で書くのではなく。

シンプルなカスタムCSS

シンプルなカスタムCSS は、使いやすさ、最小限のインターフェイス、軽量のバックエンドにより、最も人気のあるCSSエディタープラグインです。要するに、それは大きなパンチを詰め込んだ非常に小さなWordPressプラグインです。

クライアントサイトに、超高速で安全で開発者に優しいホスティングが必要ですか? KinstaはWordPress開発者を念頭に置いて構築されており、多くのツールと強力なダッシュボードを提供します。 私たちの計画をチェックしてください

Simple Custom CSS WordPress plugin

シンプルなカスタムCSSWordPressプラグイン

セットアップは簡単で、何も表示されません パフォーマンスへの悪影響。あらゆるテーマで機能し、構文の強調表示とエラーチェックが含まれています。

シンプルなカスタムCSSとJS

Simple Custom CSS and JS WordPress plugin

シンプルなカスタムCSSとJSWordPressプラグイン

シンプルなカスタムCSSとJS 良い選択肢です。また、ヘッダー、フッター、フロントエンド、さらには管理バックエンドをターゲットにすることもできます。

SiteOrigin CSS

SiteOrigin CSS WordPress plugin

SiteOrigin CSSWordPressプラグイン

SiteOrigin CSS 従来のCSSエディターも含まれる別のオプションです。あなたはそれとの間で切り替えることができます ビジュアルエディター いつでも。

WPカスタムCSSを追加

WP Add Custom CSS WordPress plugin

WPカスタムCSSWordPressプラグインを追加

特定のページにCSSを追加するのに苦労している場合は、 WPカスタムCSSを追加 編集画面にカスタムCSSボックスを追加し、グローバルスタイルも付属しています。

CSSヒーロー

ビジュアルCSSエディターを試すことも検討してください。これらはすべての複雑なコーディングを取り、それを一連の使いやすい入力フィールドとドロップダウンメニューに変えて、すべてのプログラミングを処理します。

CSS Hero

CSSヒーロー

CSSヒーロー は、いくつかの非常に強力な機能(アニメーション、デバイス固有の編集、非破壊編集など)を備えたプレミアムビジュアル編集プラグインです。

CSSを学ぶ場所

自分でCSSに飛び込む準備はできましたか?これらの初心者向けチュートリアルでは、基本を確立し、独自の機能的なCSSコードを作成するために知っておく必要のある構文を学習します。

Learn CSS

CSSを学ぶ

気が遠くなるかもしれませんが、本当に高度なことをしようとしているのでない限り、CSSはそれほど難しくありません!背景色の変更や フォントスタイリングの設定 かなり簡単で、オンラインにはたくさんの例があります。

(推奨読書: WordPressウェブサイトで使用する50以上の最新フォント)

最も プログラミングチュートリアル あなたはインターネット上でも完全に無料であることがわかります。あります そこにたくさんの情報 費用はかかりません。

初心者向けの最高のCSSチュートリアルをカバーするいくつかの例を次に示します。

  • W3SchoolsCSSチュートリアル:ここには、非常に多くの情報があります。詳細なチュートリアル、例、および操作するためのリファレンスです。 W3Schoolsのチュートリアルは、可能な限りシンプルでわかりやすいので、まったくの初心者でも、ここから始めるのが最適です。
  • Codeacademy Learn CSS:6つの無料のハンズオンレッスンを通じて、CSSの基本を学びます。これは単純なビデオチュートリアルではありませんが、実際のコードを操作するインタラクティブなレッスンです。プロバージョンでは、クイズやフリーフォームプロジェクトも利用できます。
  • 1時間でCSSを学ぶ:たくさんの人が新しいことを学びたい プログラミング言語、しかし彼らはただ専念する時間がありません。しかし、1時間だけ取っておけば、この無料の20部構成のコースでCSSを学ぶことができます。あなたが最後までマスターでなくても、あなたは基本をよく理解しているべきです。
  • WordPressユーザー向けの基本的なHTMLとCSSの概要:WordPressに固有の何かをお探しですか? HTMLとCSSの作成に常に苦労している場合は、このコースが最適です。有料ですが、52の講義と5時間のビデオが付属しています。

概要

WordPressユーザーとして、CSSに飛び込むことは最初は混乱するかもしれません。ただし、テーマファイルの編集方法とスタイルを追加する場所がわかれば、問題は発生しません。

テーマファイルは、バックエンドまたはFTPを介して編集してサイトの外観を変更できますが、既存のコードを編集する必要がない限り、通常はこれを回避する必要があります。

独自のCSSを追加するだけの場合は、[追加のCSS]ページを使用してください。 外観>カスタマイズ、またはより強力なものが必要な場合はプラグインを試してください。

スタイルシートを編集します を使用しない限り、テーマの更新時に失われます 子テーマ。 追加のCSSについても同じではありません。コードは更新から安全ですが、忘れないでください。プラグインだけがCSSを保持します。 テーマを変更する.

どの方法を選択する場合でも、常に維持する必要があります あなたのウェブサイトの定期的なバックアップ、追加したスタイルシートとカスタムコードを含みます。次に、提供されたリソースを使用して、CSSの基本をブラッシュアップします。

ハッピースタイリング!

推奨読書: オンラインで最高のウェブデザインコース