WordPressでCSSコードを追加する

Last Updated:2023年7月19日| | 45のコメント

WordPress カスタマイジングで最も重要な部分の一つは、CSSです。 CSSを使用してレイアウトを完全に異なって変えることができます。 しかし、「このCSSコードを WordPress 「スタイルシートに追加してください」と言うと、「CSSコードをどのように追加しますか?」 WordPressを触れると不慣れなスタイルと用語のために使用が思ったより容易ではないことがあります。 WordPressでのCSSコードを追加する方法はさまざまです。 自分に楽な方法を使用し良いです。

基本的なCSSを身につけることは、それほど難しくはなく、時間がかからない。 インターネット上で無料で提供されている生活のコーディング講義を聞いたり、市販の本を一つ買ってみると参考になるでしょう。 生活コーディングで発行された CSS関連書籍もあります。

[この記事は、2021年12月16日最終更新しました。 ]

WordPressでCSSコードを追加する方法

以下のいくつかの方法の中で、カスタマイズの中の追加のCSSセクションにカスタムCSSコードを追加するのが便利です。

1. カスタマイズするメニューをクリック

WordPress 管理者ページで ルックス>カスタマイズ メニューをタップします。

2. 「追加CSS」セクションにCSSコードを追加する

追加CSS セクションにカスタムCSSコードを入力します。

カスタマイズにユーザーCSSを追加する

WordPress 4.7 以降では、 ユーザー定義(飾る) 内でカスタムCSSを追加するためのオプションが新たに追加されました。 今リアルタイムでCSSが反映されていることを確認しながらCSSを簡単に追加できるようになりました。

ルックス(WordPress バージョンに応じて、 「テーマデザイン」) > カスタマイズ > 追加 CSS (Additional CSS)をクリックしてユーザーCSSを追加できます。 WordPress バージョンによっては、「外観」は「テーマデザイン」、「カスタマイズ」は「飾り」と表示されることがあります。

カスタマイズにユーザーCSSを追加する

実際UIは、使用する WordPress テーマに沿って少し異なる場合があります。 特定のテーマ内でのCSSを追加する場合は、この方法を使用すると、なりそうです。

通常、この方法でカスタムCSSコードを追加するだけです。 CSSコードを入力するときにコメントを一緒に追加することは、後で修正するのに役立ちます。

通知パネルから直接CSSを編集する(テーマエディタを使用)

Edit CSS through Dashboard

伝言板で ルックス>テーマエディタ(バージョンに応じて、 テーマデザイン>テーマエディタ)を押して、スタイルシートファイルを選択して編集する方法です。

style.cssの

この方法でテーマの他のファイル(header.phpの, のfunctions.php など)も修正が可能です。 cssを変更したり、追加するには、スタイルシート(style.cssの)を選択します。

注意: 子テーマを作成せずにワンテーマのスタイルシートファイルを直接変更する場合、テーマが更新されると修正や追加が消えます。 子テーマ(チャイルドテーマ、サブテーマ)を使用するか、下に記載されている他の方法を使用して下さい。 子テーマについては、 この記事を参照してください。 さらに、テーマエディタはセキュリティのために無効にすることが望ましいです(参照).

テーマ内のCSS編集機能(テーマオプション)

Theme オプション編集CSS

たまにテーマでCSS編集機能を提供する場合があります。 (ただし、無料のテーマは、この機能を提供していないテーマがあります。)

実際の画面は、テーマごとに異なります。

ちなみに最もている有料のテーマである Avada(AVADA)の場合  AVADA > Options>カスタムCSS(Custom CSS)を選択すると、カスタムCSSを追加することができる画面が表示されます。

WordPress Avada テーマのカスタマイズCSS

(注:日本語言語ファイル(PO)を適用すると、 カスタムCSSが」カスタムCSS「と表示されます。)

Salient Custom CSS Code

上の図は、 AVADA同様の多目的テーマの一つである Salient テーマの Custom CSS Code(ユーザーCSSコード) セクションです。 黒のテキストフィールドにCSSコードを追加します。

プラグインの使用

ユーザーCSSを追加することができるプラグインがあります。 Custom CSSとプラグインで検索してみると、いくつかの種類が検索されます。 単純なカスタムCSSというプラグインを使用してCSSを追加できます。 また、JetPackでもユーザーCSSコードを追加する機能を提供します。

しかし、 WordPressで自主的にCSSコードを追加することができる機能を提供するため、プラグインを使用する必要はもはやありません。

エレメンプロを使用している場合、エレメン内で直接カスタムCSSを追加することができます。 ページの操作をしてカスタマイズするに移動したり、FTPに接続せずに、すぐにCSSを追加することができて便利です。

FTPを使用してスタイルシートファイルを編集する

この方法ではftpを使用できるはずです。 FTPに接続して編集する方法は少し面倒ですが、上記の方法よりも保存して適用する時間が早いという利点があります。 ftpを使用すると、おなじみのエディタを使用できます(下記のファイルジラを参照)。 多くのエディタは、CSSにエラーがある場合にエラーを表示する機能があるため、上級ユーザーにお勧めします。

ファイルBugzillaの使用法:ファイルBugzillaのを使用して WordPress スタイルシートファイルを編集する

FTP(File Transfer Protocol)は、ファイル転送のためのプロトコルとして、FileZillaなどのFTPクライアントを使用してFTPにアクセスすることができます。

FileZillaをインストールした場合 ファイル>サイト管理者から

FTP-information  - ファイルBugzillaの使用

(1)新しいサイトをクリックします。
(2)接続サイトの名前を適当に入力します。
(3)(4)FTPサイトへのアクセスのためには、ホスト、ユーザー名、パスワードの情報が必要です。 ホストは、通常、サイトのアドレスです。 この情報は、通常、Webホスティングサービスに加入するときに設定します。 よくわからない場合は、ホスティング会社にお問い合わせください。 よく接続がない場合は、そのホスティング会社から提供されるFTP設定方法を参照してください。 (たまに上の図と若干異なって設定する場合もあります。)

これで、上の図の「接続」を押してFTPに接続できます。

FilieZilla  -  WordPressでFTP接続する

ファイルジラでFTPに接続したら、上の図のように変更したいファイルを選択して右クリックし、表示/編集「を選択してファイルを変更できます。これにより、テキストエディタプログラムで編集するファイルが開きます。スタイルシートファイル(style.cssファイル)は / WP-コンテンツ/themes/テーマフォルダ/ 下に通常位置しています。 ファイルを編集した後に保存してファイルジラを選択すると、ファイルをアップロードするかどうかを尋ねられます。 「はい」を選択すると、変更されたファイルがアップロードされ、反映されます。

ファイルBugzillaのは、基本的にWindowsのメモ帳を使用してファイルを編集し、ファイルの編集に使用できるテキストエディタ(AcroEdit、EditPlus、EmEditor、UltraEditなど)を変更することができます。

FileZilla-Editor-Change  - ファイルBugzillaの使用

編集 > 設定 > 「ファイルの編集」からメインエディタへユーザーエディタの使用「選択して使用したいエディタを見つけて選択します。

最後に、

以上のように、様々な方法でCSSを追加することができます。 本人に適した方法を選択して利用すれば良いです。 参考までにいくつかの理由のために WordPress 管理者ページ(ダッシュボード)にアクセスすることができない場合は、FTPを使用してファイルを編集することができます。 したがって、基本的なFTPの使い方を身につけてくれれば、いつが便利に利用することができます。

※パートナーズの活動に一定額の手数料を提供することができます。

メモ:


45のコメント

コメント

  1. ボタンブロックプロパティの詳細セクションで、追加のCSSクラスセクションに、すべての記事の内容を同じCSSクラスとして漢方に追加する方法はありますか?

    応答
    • すべての記事のボタンにCSSクラスをまとめて追加する方法があるかどうかはわかりません。探してみればあるかもしれません。

      応答
  2. いつもよく見ています。 CSSに関連して気になることがありますが、用語もよくわからないので探すのが難しいと感じています。
    1.ジェネレートテーマを使用しています。
    2. 本文内容右側にスクロールするたびに、通るウィジェットを作成したいと思います。
    3. モバイルに適用されるウィジェットを作成したいと思います。
    上記の内容に関して書かれた記事がありますか?

    応答
    • こんにちは、次の記事を参照して特定の要素をサイドバーなどに固定してみてください。
      https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%ec%82%ac%ec%9d%b4%eb%93%9c%ec%97%90-%ed%80%b5-%eb%a9%94%eb%89%b4-%ed%80%b5-%eb%b0%94-%ec%b6%94%ea%b0%80%ed%95%98%ea%b8%b0/

      モバイルにのみ適用したい場合は、CSSメディアクエリを使用してモバイルからのみ読み込むことができます。

      GeneratePress テーマのCSSモバイルブランチポイントについて、次の記事を参照してください。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-generatepress-%ED%85%8C%EB%A7%88-css-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%AC/

      基本的なCSSについて理解すれば、ある程度応用が可能でしょう。

      https://cafe.naver.com/wphomepage/16730

      応答
  3. こんにちは。 WordPress 情報屋さん〜!
    ご紹介いただいた内容を参考に、特定のページでcss呼び出して使いすぎています。 ありがとうございます(__)

    一つの質問があります。
    特定のページが多数あるときに同じcssを呼び出そうとした場合はどうすればよいですか?
    function front_page_style_sheet() {
    if (is_page(1) ) {
    wp_enqueue_style( 'front-page-styling', get_stylesheet_directory_uri() . '/base.css' );
    }}
    add_action('wp_enqueue_scripts', 'front_page_style_sheet');

    応答
    • PHPに関する事項です。 arraryを使用してください。

      例:

      is_page( array( 42, 'about-me', 'Contact' ) );

      ワープの公式文書を参照してください。
      https://developer.wordpress.org/reference/functions/is_page/

      応答
      • フレンドリーな回答をありがとう。 (__)

        申し訳ありませんが、もう一つ質問があります。
        多数のページ(1〜5)は以下のように呼び出すことに成功しました。
        ただし、ポストIDを追加した場合は適用されません。

        if(is_page(array(1、2、3、4、5)))){

        ページのみ可能でポストは不可ですか?

      • is_single() を試してください。

        https://developer.wordpress.org/reference/functions/is_single/

  4. ワード様こんにちは。 諮問します。

    私もジェネレートプレスを使用していますが、h2、h3をここの形のように変更しようとしましたが、適用されないのでお問い合わせください。
    追加のcssに.single .entry-content h2 {これを入れるように言いました。
    これはできません。
    しかし、適用する画面でのみ適用されます。
    WordPressから出てみると適用されません。

    .single .entry-content h2 この文字でいろいろなバリエーションを尽くしても同じです。
    どうすればいいですか?

    ありがとうございます。

    応答
    • こんにちは、移動三様。 基本的なCSSを理解すれば簡単に可能です。

      https://cafe.naver.com/wphomepage/16730

      ページに適用されている場合は、.page .entry-content h2 {}式で行う必要があります。

      管理ページでは、実際には適用されない問題はキャッシュの問題かもしれません。

      1. キャッシュプラグインのキャッシュを削除します。
      2. ブラウザキャッシュを削除します。
      3. クラウドウェイズなどの場合は、サーバーキャッシュを削除する必要があります。

      https://www.thewordcracker.com/miscellaneous/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C%EC%9B%A8%EC%9D%B4%EC%A6%88-%EC%84%9C%EB%B2%84-%EC%BA%90%EC%8B%9C-%EC%82%AD%EC%A0%9C-%EB%B9%84%ED%99%9C%EC%84%B1%ED%99%94-%EB%B0%A9%EB%B2%95/

      試してみてうまくいかない場合は、このコメントに秘密のコメントとして適用できないページのURLを教えてください。

      応答
  5. 私は通知板[ルックス]にちょうど3つしかありません[テーマ-ユーザー定義-メニュー]

    応答
    • アカウントが完全な管理者アカウントであることを確認しますか? 次の記事を参照してください。

      https://avada.tistory.com/568

      アカウントが制限付きの管理者アカウントである場合、または管理者アカウントでない場合は、一部の機能(テーマ、プラグインのインストール/削除など)を使用できない場合があります。

      応答
  6. この記事はで書かれていますか? Naver ユーザーラエディタの使用は難しいです。 WordPress エディタでHTMLに入れることができますか? それとも他のテーマがあるのか​​、この悩みをどのように解決すればいいのでしょうか。

    応答
    • この記事は基本エディタ(ブロックエディタです。 Gutenberg)で書かれています。
      HTMLはカスタムHTMLブロックを使用して追加できます。

      ブロックエディタの使い方については、次の記事を参照してください。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EA%B5%AC%ED%85%90%EB%B2%A0%EB%A5%B4%ED%81%AC-%ED%82%A4%EB%B3%B4%EB%93%9C-%EB%8B%A8%EC%B6%95%ED%82%A4/

      また、 https://www.thewordcracker.com/basic/how-to-start-wordpress/ 記事の「文章を書く」部分も参考にしてください。

      エレメンページビルダー Avadaの場合 Avada ビルダーなどのページビルダーでも文を作成することが可能ですが、文(ポスト)は基本エディタで作成することをお勧めします。 ページは、ページビルダーを使用している場合はページビルダー(例: Elementor)で作ることができます。 次の記事を参照してください。

      https://avada.tistory.com/1811

      WordPress エディタ(Gutenberg)は Naver私のティーストーリーが提供するエディターとは比較にならないほど強力です。 HTML、CSSで簡単にカスタマイズ可能 WordPress 使い方を少し身につければ、javascript、PHPなども適用が可能です。

      応答
  7. 今word様現在の文に適用されている小見出しcssをh2に適用したい前 newspaper テーマを書いています。
    newspaper テーマで、現在この記事のサブタイトルcss適用したいのですがcss情報教えていただけますお問い合わせについてでしょうか?

    応答
    • こんにちは、dylan様。 Newspaper テーマで小タイトル(h2、h3、h4、h5...)ヘディングスタイルを指定したい場合は、次の記事を参照してください。

      https://avada.tistory.com/1633

      CSSコードは、必要に応じて適切に変更が可能です。

      この WordPress ブログには、現在の ツェナーレートのテーマが使用中であり、次のCSSコードがH2タグに適用されています。

      .single .entry-content h2 {
      font-size: 1.3em;
      margin: 1.15em 0 .6em;
      font-weight: 400;
      position: relative;
      text-shadow: 0 -1px rgb(0 0 0 / 60%);
      line-height: 40px;
      background: #355681;
      background: rgba(53,86,129,.8);
      border: 1px solid #fff;
      padding: 5px 15px;
      color: #fff;
      border-radius: 0 10px;
      box-shadow: inset 0 0 5px rgb(53 86 129 / 50%);
      font-family: 'Muli',sans-serif;
      }

      応答
      • 現在、私は newspaper テーマを使用中なのにword様ホームページのh2、h3 cssコードをどのように適用できるかどうか知りたいです。
        上記のコードを newspaper cssに適用させるので、適用がダメですね。

      • Newspaper テーマは、上記のコードでは、.single .entry-content h2部分を.single .td-post-content h2に変えてみてください。

        .single .td-post-content h2 {
        // css 코드
        }

        上記のコードを応用して適切に変更してください。

      • はい一人css少しずつ知って見て触ってみたところ、目的のスタイルの実装がなりましたね、本当にありがとうございます!
        良い秋夕連休を過ごしてください〜

  8. エレメンプロを使用している場合、エレメン内でカスタムCSSコードを追加することが可能です。

    応答
  9. こんにちは。
    とてもよくある質問をおかけして申し訳ありません。 Naver ブログで WordPress ブログに移す過程が初めてだからか非常に難しいですね。言われたように Bluehostのサブドメイン機能を活用して、ブログの WordPress サイトを作りました。 Themeforestから story blog というテーマを先に購入しておいたことがあり、これを活用しようとしています。 デモが適用された私の新しいサイト https://blog.alldak.net을 見れば投稿のクリック領域がテキストのみハゲクム設計されています。 私はこれを http://the-edit.co.kr/< サンプルサイトのように、画像全体の領域をクリックされるようにしたいです。 CSSの勉強をしながら、Google Chromeの開発者モードで一時間以上の解決策を見つけてみても、まったくわかりません。どうすればいいでしょう?..

    応答
    • こんにちは?

      質問された部分については、時間が飛ぶときに一度見てソリューションがあれば、共有するようにします。

      楽しい時間を過ごしてください🙂

      応答
      • 言葉だけでも感謝します。 自ら解決策を参照し、ロックします。^^

  10. こんにちは気にしたよく見ていきます。 WordPressを知って一つの不思議おりお問い合わせください。既存の手作業のホームページは、ウェブ上にHtmlファイルが存在して、その部分に合わせて変更し、レイアウトとスタイルを適用しながら作業をしたが WordPressはPHP言語になったファイルしかない。 ページを変更してレイアウトを変更する必要があるのですが、どうすればよいかについて質問します。 。 ありがとう

    応答
    • こんにちは?
      私のブログを訪問していただきありがとうございます^^
      まず https://www.thewordcracker.com/basic/the-anatomy-of-a-wordpress-posts-request/文を一度参考にしてください。

      そしてなるべくテーマのソースファイルを変更していない方がいいでしょだよ、修正が必要な場合チャイルドテーマを作ってください。 特にプラグインや WordPress コアファイルは変更しないことをお勧め(変更、更新するたびに問題になります)。

      修正は可能であれば、アクション/フィルタ(フック)を確認して、アクション/フィルタを介して調整してください。

      だから、手間下さい。

      応答
  11. cssコードをどこに入れること知らなくて迷ったが、おかげでうまく解決されました。 ありがとうございます。

    応答
  12. こんにちは。ここ見ると親切によく説明、ありがとうございます。 私も WordPress敷い無料テーマのインストールして作っているのですが。背景色と文字サイズ変更は、スタイルシートで調整した。スレッドボックスで境界線なくすとスレッドの日付と名前のようなものだ消したい。何直さなければか全く分からないんですよ。どなたSimple Custom CSSプラグインを敷くとアドバイスくださった。添加聞いてみるのにそれftp接続した後、どこカルアヤされ? 次にどのように修正するかよく分かりません。ここで説明お願い難しいですか? 少しでもアドバイスお願いします。ㅜ

    応答
    • 管理者ページ(ダッシュボード)で プラグイン>プラグインを追加するを選択して「Simple Custom CSS」を検索してインストールします。 このブログにプラグインをインストールする方法について説明した記事があります。 一度検索してみてください。

      応答
  13. よく見ました。FTPを使用してcssを変更するときのparents themeこのアップグレードの場合、修正はすべて消えませんか? 

    応答
    • こんにちは?

      親 Theme 内のCSSファイルで変更すると、テーマが更新されると修正は消えます。
      子テーマを利用してみてください。 それともプラグインを使用してもドゥェゴヨ。

      子テーマの作成方法は、 https://www.thewordcracker.com/basic/should-we-create-a-child-theme-and-how-to-do/ 文を参照してみてください。

      CSSのみが修正される場合は、あえてChild Theme作成せず、Simple Custom CSSのようなプラグインとしても適しているようです。

      手間下さい。

      応答
  14. 既定のスタイルシートファイルではなく、別のcssファイルを作成、そこにcssコードを入れてたい。 どうすればいいですか?

    応答
    • こんにちは? ブログを訪問していただきありがとうございます。 簡単に

      @import url( "../ mycustomstyle.css");

      上記のようなコードを追加すると、なりそうです。

      それよりも、 https://www.thewordcracker.com/intermediate/add-a-second-style-sheet-to-wordpress-theme/ 記事で紹介された方法を参考にしてみてください。

      応答
      • アドバイスありがとうございます。 お知らせいただいた方法で試してみるましょう。

  15. よく読みました。 テキストエディタでのMエディタを使用してね。 私も使用するうれしいですね。 まともなプログラムです。

    応答
    • こんにちは? WordPress サイトを運営するには、どうしてもftpを知っていれば良さそうです。
      ftpは別のないコンピュータに慣れていない方には少し難しいかもしれないだろうという気がしますね。
      インターネットにFilezillaの使用法と検索して参考にしてみてください。
      だから、楽しい週末を。

      応答
  16. この記事のおかげで、気がかりなことが解けました。

    cssを学んでみたい本を買って見なければならでしょうか?
    応答
    • こんにちは?
      本を買って見てもドゥェゴヨ、 https://opentutorials.org/course/4 ページの講座を聞いご覧になっても良いです。
      本は一グォンチュムあっても大丈夫のようです。 私は最初にCSSを接するとき概念とること本で始め、以降は主にインターネットを参照しました。

      応答
      • 回答ありがとうございます。 CSSの本を買うならどんな本がいいのでしょう?