WordPressを利用したWebサイトにカスタムCSSを追加する方法–正しい方法!

初心者にとって、WordPressウェブサイトにCSSを追加するのは簡単なことではありません。しかし、それは時々非常に必要なものです。実際にサイトをカスタマイズする方法はたくさんあります(ページビルダー、さまざまなプラグイン、WordPressテーマの設定などを使用)。ただし、場合によっては、デザインの1つまたは2つの非常に特定の側面を変更するだけで、CSSを導入できます。 。しかし、これをどのように行うのですか? WordPressのどこから始めますか?恐れることはありません、私たちは答えを持っています…


知っておくべきことは次のとおりです。

WordPressにCSSを追加する方法:

–(注:Topher DeRosiaのビデオクレジット– HeroPressの作成者

ビデオトランスクリプト:

こんにちは!これはWinningWPのTopherです。このビデオでは、カスタムCSSをWordPressに正しく追加する方法を説明します。サイトの外観を少し変更したいとします。あなたはグーグルを少し回すとCSSの小さなスニペットを見つけ、彼らは「これをあなたのサイトに置くだけです」と言います。しかし、どこに配置しますか?そして、それが正しく行われたことをどのようにして知っていますか?披露させて。まず、CSSの目的を決定する必要があります。 CSSを適用する可能性のある領域は2つだけです。 1つはレイアウトや色などの一般的なサイトデザイン用です。もう1つはコンテンツデザインです。これは、特定のコンテンツの外観です。画像の処理やブロッククォートサイズなどです。将来的には、サイトデザインを変更することもできます。まったく新しいテーマを手に入れながら、コンテンツの外観を微調整してください。私の言っていることをお見せしましょう。ここにはかなりシンプルなサイトがあり、レイアウトを説明するのは簡単です。上部に検索バー、ヘッダーバー、コンテンツ領域があり、空のため、見にくいですが、ここにサイドバーがあります。背景はすべて白、フッターは灰色、検索バーは黒です。これらは、テーマに関連して変更することになるものです。ここにコンテンツがあり、画像の右側に一定のパディングがあり、キャプションはイタリック体です。これらはコンテンツに関連する変更になるため、両方を行う方法を見てみましょう。サイトデザインの変更は、理にかなっているテーマに関連付けられています。将来テーマを変更する場合、CSSはそのままにしておく必要はありません。すべてが見栄えのためです。そのため、現在のテーマを変更し、そのテーマを削除した場合はそれを解消したいと考えています。 2つの選択肢があります。1つはカスタマイザで、もう1つはstyle.cssを編集することです。どちらもそれほど難しいことではありませんが、カスタマイザは非常に簡単です。私の言っていることをお見せしましょう。サイトのヘッダーを赤に変更したいのですが。だから私が最初にやることはその名前を見つけることです。 Chromeで右クリックして[検査]をクリックします。そして、ここにはsite-header-mainと書かれています。それが私が変えたいことです。これが私のサイトの上部にある[カスタマイズ]ボタンです。カスタマイザの下部までスクロールすると、[追加のCSS]をクリックできます。ここでは、その使用方法について少し説明があります。閉じるをクリックすると、ここに表示されます。そこで、site-header-mainと入力し、中かっこで背景色を赤にします。これで、私が行ったようにインスペクタの使い方を知っている必要はありません。また、fが赤であることを知る必要もありません。このコードをどこかのウェブサイトから入手した可能性がありますが、それは問題ありません。自分で見つける方法を知っている必要はありません。ここにどのように配置するかを示しているだけです。これで、[公開]をクリックして、このタブを閉じることができ、赤いヘッダーが表示されます。必要なだけCSSを配置できます。必要に応じて、サイトのデザイン全体を完全に変更できます。しかし、CSSを編集する別の方法を紹介します。前に挿入したコードを削除して保存します。次に、テーマのstyle.cssファイルを編集します。ダッシュボードの[外観]、[テーマ]に移動します。現在、アクティブなテーマは常に左上にあります。子テーマを使用している場合にのみ、この特定の方法を実行したいだけです。ここで、私はmake installしていますが、アクティブなテーマはmake-子テーマです。これにより、makeが更新を行っても、子テーマに含まれるカスタマイズは消去されず、子テーマは更新されないため、子テーマは更新されません。子テーマを使用していることを確認できる場合は、ここのメニューにエディターのリンクがあります。そして、ここで私がちょうど子供のテーマについて言ったすべてをあなたに教えてくれます。だから、あなたが子のテーマを使っているかどうか、私が理解するをクリックしてください。表示される最初のファイルは、style.cssです。それは常にそのようになります。そして、このすべてのテキストはあなたのテーマに関する情報です。それに注意を払う必要はありません。一番下に行くと、「下にカスタムスタイルを追加してください」と書かれたものが表示されます。このファイルを編集する前に、バックアップすることをお勧めします。そして、それは本当に簡単です。それをコピーして、どこか別のファイルに貼り付けます。したがって、Windowsの場合はControl + Aを実行でき、Macの場合はCommand + Aを実行できます。すべてをハイライト表示し、ControlまたはCommand + Cをハイライト表示してコピーします。また、テキストを保持できる他のファイルに貼り付けることができます。永続的に保持する必要はありません。これを編集している間だけ保持します。これが完全に機能する場合は、完了したらバックアップを削除するだけです。しかし、これが壊れて迷子になった場合は、これを消去して、コピーしたものに貼り付けることができます。そこで、カスタマイザで行ったのとまったく同じコードを貼り付け、[ファイルの更新]をクリックします。次に、サイトをリロードします。そして、それも赤です。さて、カスタマイザがとても簡単なのに、なぜstyle.cssファイルに入れたいのでしょうか?その理由は、style.cssファイルがカスタマイザよりもはるかに早くロードされるためです。したがって、カスタマイザでそれを行った場合、ページが完全にロードされ、一瞬白に見え、その後赤に点滅するインスタンスを取得する可能性があります。しかし、style.cssに入れても、それはできません。カスタマイザーについて私が気に入ったもう1つの点は、入力中に変更を確認できることです。したがって、私にとって一般的なワークフローは、カスタマイザですべてのCSSを記述し、それをすべてコピーしてstyle.cssに貼り付けることです。そうする必要はありません。すべてをカスタマイザに残しておくと、永久に機能します。始めたばかりの場合は、カスタマイザーのみを実行することをお勧めします。すばやく、簡単で、痛みがなく、マイナス面もごくわずかです。実験して、WordPressの内部の仕組みに少し足を踏み入れたい場合は、style.cssファイルを編集してください。もう1つは、コンテンツを管理するためのCSSです。このため、テーマに関連付けたくありません。テーマを変えても固執してほしい。使用しているテーマに関係なく、画像のキャプションを斜体にしないほうがよい場合があります。その場合は、プラグインを使用します。 Simple Custom CSSというプラグインを使用しています。次に、[外観]の下に[カスタムCSS]メニュー項目があります。そして、ここにCSSを入力するだけです。それで、このキャプションの名前を調べます。右クリックして検査します。そして、それはwp-caption-textと呼ばれています。したがって、ここに.wp-caption-text、font-style:normal;と入力できます。 [カスタムCSSの更新]をクリックすると、ページがリロードされます。イタリック体ではなくなったことがわかります。それでは、テーマをに変更します。そして、私の画像のキャプションはまだイタリック化されていませんが、すべてのコードが他のテーマに関連付けられているため、赤いヘッダーの概念全体が消えています。復習すると、テーマを管理する場合は、カスタマイザを使用するか、[外観]で[エディタ]に移動してスタイルシートを編集します。コンテンツのCSSを管理する場合は、CSSをテーマから切り離しておくプラグインが必要です。カスタムCSSのようなもの。 WordPressの詳細については、www.winningwp.comをご覧ください。.

他の動画を見る…

追加するもの?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map