カスタムCSSコードをWordPressブログに追加する方法は複数あります。

今日、私はあなたに提案する2つの異なる方法の長所と短所を説明します。そうすれば、あなたはあなたに最も合ったものを選ぶことができます。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

カスタマイズしたいアイテムを見つける方法

の部分を分離したら 変更するWordPressテーマ (たとえば記事のタイトル）、する必要があります CSSプロパティを決定する 適切な変更を加えることができるように適用されます。 幸い、このプロセスは複雑ではありません。

CSSはセレクターを使用して、どの要素が異なる特定の変更を経験するかを決定します。 通常、これは「 クラス "要素の（またはDOM要素）。 ただし、CSSを使用して要素全体のレイアウトを定義することもできます（たとえば、タグ「 「」）またはタグの識別子を使用します。

幸い、人気のあるブラウザでは、数回クリックするだけで、ページ要素に適用されるさまざまなセレクタと宣言を確認できます。 たとえば、Google Chromeでは、次の例のように、ドキュメントの特定の部分を強調表示してから右クリックするだけです。

"クリックします 要素を検査する 表示されるドロップダウンメニューの新しいウィンドウにページのHTMLコードが表示され、右側のウィンドウで検査済みのアイテムが強調表示されます（以下）。 あなたは、以下の例を見ることができます。

これらの要素のテキスト（または属性）赤で強調表示されているのは、コードを調べて強調表示したアイテムに適用可能な特定のスタイルを示しています。

また読みます： あなたのビジュアル・エディタでCSSでドロップダウンメニューを追加する方法

たとえば、要素「 フォントサイズ 強調表示された項目に表示されるフォントのサイズが13ピクセルであることを示します。 記述子は中括弧で囲まれ、セレクターが前に付きます。 対応するスタイルシートファイルの名前は、セレクターのすぐ右側に表示されます。

この情報を念頭に置いておくと、スタイルの変更が簡単になります。 たとえば、フォントを13pxから14pxに変更する場合は、スタイルシートファイル（強調表示された項目の1つに対応するセレクター）を探すだけです。 一般的には次の形式です：（« ＃.block・プラグインコンテンツ情報"）。 次に、属性のさまざまな値を変更できます。

Firefoxでも同じことができます。ページの特定の部分を強調表示し、アイテムを右クリックして[ 要素を検査する 表示されるメニューで。

どのようにワードプレスとCSSの仕事一緒に

それは事実です WordPressテーマ 作成方法が異なります。 だからあなたのことを覚えておいてください ワードプレスのテーマ 以下のセクションの内容に 100% 準拠していない可能性があります。

ただし、WordPressブログで使用されているCSSは、「 style.cssの 」 これは、WordPressだけでなく、あらゆるタイプのWebサイトのスタイルシートの一般的な名前です。

また見なさい： ワードプレス上の画像グラバターのサイズを変更する方法

ここで、さまざまな編集プロセスを実行します。

方法＃1：WordPressテーマのスタイルファイルを編集する

テーマのstyle.cssファイルにアクセスする方法はXNUMXつあります。

1つ目は、WordPressダッシュボードから行うことです。 左側のメニューで、メニュー[ apparence 「そして」 出版社 '。

エディタページにアクセスすると、ページの右側の垂直バーにファイルのリストが表示されます。 ファイルのリストをスクロールします。 「」という名前のファイルが表示されます スタイルシートはstyle.css ページの下部。

このファイルの名前をクリックすると、そのファイルがロードされ、中央のエディターに表示されます。 この画面を使用して、ファイルを編集できます。

スタイルシートを見つけるもう XNUMX つの方法は、ホスティング プロバイダーのオペレーティング システムを参照して、 ワードプレスのテーマ (FTPクライアントを使用する). 正確な場所は、ホスティング プロバイダーによって異なります。 以下に示す例では、Web サイト名 (我々の場合でthecare）のpublic_htmlフォルダの下にフォルダです。

WordPressがインストールされているので、「thecare」にwp-contentフォルダーが表示されます。 wp-contentサブフォルダーは、「」と呼ばれる別のフォルダーです。 WP-テーマ"、これはすべての WordPressテーマ インストールされています。

このウェブサイトから「と呼ばれるテーマを使用しています ニュースレター »、スタイルファイル« style.cssの フォルダーにあります " 親ニュースレター '。

方法2：プラグインを使用してCSSを変更する

おそらく、WordPressブログのCSSを編集する最も便利な方法は プラグインの使用.

プラグインを使用する主な利点のXNUMXつは、子テーマの利点と似ています。 はい WordPressテーマを更新した、テーマファイル間ではなく個別に保存されるため、変更は上書きされません。 もちろん、他の利点は、子テーマを作成する必要がないことです。

ここでは、CSS コードを変更するために使用できるいくつかのプレミアム プラグインを紹介します。 ワードプレスのテーマ :

1.黄色の鉛筆：ビジュアルCSSスタイルエディター

イエローペンシルは、あらゆるテーマで使用できるビジュアルスタイルエディターで、ウェブサイトを数分でパーソナライズできます（フォント、色、アニメーションなど）。

Ce WordPressのプラグイン プレミアムはCSSスタイルを作成します 背景 ゲームのように色で遊んでいる間、初心者と経験豊富なユーザーの両方のために設計されました。

私たちも発見 5プラグイン WordPress 通知を表示する

コーディングの知識は必要ありません。 しかし WordPressのプラグイン コードを書くのが好きな人のための優れた CSS エディターがあります。 このエディターを使用してライブでコーディングし、CSS をカスタマイズできます。

ダウンロード | デモ | ウェブホスティング

2。 グーテンベルクのカスタムJSとCSS

Le WordPressのプラグイン プレミアムカスタム JS および CSS 用 グーテンベルク WordPressの投稿とページのWYSIWYGエディターに無制限の数のカスタムスタイルを追加できます。 これは、GutenbergバージョンのWordPressと完全に互換性があります。

使いやすいCSSエディターで新しいスタイルを簡単に作成できます。 このWordPressプラグインは、 カスタムフィールド 動的で強力なパーソナライゼーションモジュールを使用して、カスタムフィールドを変更できます。 との機能 リアルタイムプレビュー このWordPressプラグインにより、非常に快適でユーザーフレンドリーになります。

ダウンロード | デモ | ウェブホスティング

3。 SiteOrigin CSS

このリストで最も多くのオプションを提供するのは、WordPressプラグインです。 後者の最も驚くべきことは、それが無料であるということです。 このWordPressプラグインは、カスタマイザーで見つからない唯一のプラグインです。

プラグインをインストールしてアクティブ化したら、次の場所に移動する必要があります。 外観>カスタムCSS プラグインのCSSエディションにアクセスします。 このページでは、ライブプレビューを提供していないテキストエディタを見ることができます。 

記事もご覧ください あなたのウェブサイトの売り上げを伸ばすための10 WordPressプラグイン

後者にアクセスするには、エディターのすぐ上にある左側に表示されるXNUMXつのボタンのいずれかをクリックする必要があります。 目のアイコンが付いたボタンは、愛好家が喜ぶ視覚的なCSSコードエディタを表示します。 拡張子の矢印が付いたアイコンには、CSSコードの習得を意味するテキストエディタが表示されます。

ダウンロード | デモ | ウェブホスティング

4。 単純なカスタムCSS

単純なカスタムCSS 最も人気のあるプラグインのXNUMXつです。

私たちも発見 ブログを高速化する方法：CSSファイルとJSファイルの管理.

100万回以上インストールされ、000つ星の評価を受けています。

ダウンロード | デモ | ウェブホスティング

5。 WPカスタムCSSを追加します。

WPカスタムCSSを追加 あなたができるプラグインです WordPressブログのレイアウトを変更する 全体または個別の記事。 これは、アイテムのカスタマイズに柔軟性を求める場合に最適なオプションです。

プラグインは10.000回以上ダウンロードされており、現在4,3つ星の評価を受けています。

ダウンロード | デモ | ウェブホスティング

6。 テーマジャンキーカスタムCSS

変更のライブプレビューを提供するソリューションを探している場合は、使用を検討してください。 テーマジャンキーカスタムCSS. 

このソリューションは、独自のスタイルを追加できるカスタムCSSマネージャーをダッシュ​​ボードに追加します。 また、代替手段を提供します 子テーマを使用する.

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

• ソーシャルネットワーク上で共有する10 WordPressプラグイン
• ワードプレスでは、ループの外にカスタムフィールドを表示する方法
• ブログを広告で収益化するための5 WordPressプラグイン
• あなたのブログのコンテンツスクレイパーを保護する方法

まとめ

ここに！ このチュートリアルは以上です。カスタムCSSコードをWordPressブログに2つの方法で追加できることを願っています。 commentaires または提案、これらのために予約されたセクションで私達に言うことをheしないでください。

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.

この記事が気に入ったら、ntoしないで お気に入りのソーシャルネットワークで共有する. 

...