ベストセラー人気 WordPress テーマTop 30 詳細

WordPressでのCSSを追加する

Last Updated:2021年9月8日| 31のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

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

2018_0131追加: 下に、さまざまな方法を説明していますが、この中で子テーマを作成し、FTP経由で子テーマのスタイルシートファイルに追加する方法をお勧めします。 テーマエディタを利用した方法は、特にお勧めしません。 セキュリティのために WP-config.phpを ファイルに define( 'DISALLOW_FILE_EDIT'、true);を追加してテーマエディタを無効にすることをお勧めし( "WordPress セキュリティ強化する"参照)。

参考までに WordPress プラグインは、javascript / jQueryテンプレートは、PHPコードなど各種コードを販売する CodecanyonでメニュースタイルなどのCSSコードを購入することができます。

Codecanyonで販売されているCSSコード
Codecanyonで販売されているベストセラーCSSコード

ユーザー定義(飾る)内の追加CSSを使用する

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

WordPressでのCSSを追加する2

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

テーマのカスタマイズする

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

伝言板から直接CSSを編集する

Edit CSS through Dashboard
style.cssの

伝言板で テーマのデザイン>テーマエディタ(バージョンに応じて、 ルックス>テーマエディタ)を押して、スタイルシートファイルを選択して編集する方法です。
この方法でテーマの他のファイル(header.phpの, のfunctions.php など)も修正が可能です。 cssを変更したり、追加するには、スタイルシート(style.cssの)を選択します。
注意: 子テーマを作成せずにワンテーマのスタイルシートファイルを直接変更する場合、テーマが更新されると修正や追加が消えます。 子テーマ(チャイルドテーマ、サブテーマ)を使用するか、下に記載されている他の方法を使用して下さい。 子テーマについては、 この記事を参照してみてください。

WordPressいくつかのハングル翻訳がぎこちなく変わり翻訳品質がむしろ後退したようです。 重要なメニューが変わり、混乱を招いています。 WordPress バージョンに応じて、 外観(下の英語UIを参照)は、 外観/テーマデザイン/外観で、 カスタマイズカスタマイズする、飾るに翻訳されています。

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

Theme Options Edit 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コードを追加します。

ジェトペク(JetPack)で提供される「CSSの編集」

Edit CSS provided by Jetpack
Enable Custom CSS in JetPack

JetPackをインストールして有効にするとCSS編集機能を使用することができます。 ルックス> CSSの編集を選択して、ユーザーCSSを追加することができます。
上記のメニューがない場合は ジェトペク>設定から カスタムCSSを有効にしてください。
ジェトペクの場合、テーマが変わるCSSが消えることがありますので、常にバックアップしてくれるのが良さそうです。

プラグインの使用

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

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

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

FTPを使用して、CSSファイルの編集

この方法は、ftpを使用する必要があります。 FTPに接続して、編集する方法は少し面倒な場合がありますが、上記の方法よりも保存して適用する時間が早いという利点があります。 上記の方法は、ほとんどcssを編集して保存すると、若干ディレイが発生します(もちろんたいしたはないけどね)。 そして英語 WordPressよりハングル WordPressでディレイが芯ですね。 そしてftpを使用すると、本人に精通しているエディタを使用することができます(下のファイルBugzillaの参照)。 多くのエディタは、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接続する

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

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

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

[編集]> [設定]>「ファイルの編集」でデフォルトのエディタとして "ユーザーエディタの使用"を選択して使用するエディタを見つけて選択します。

最後に、

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

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

メモ:



31のコメント

コメント

  1. 今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少しずつ知って見て触ってみたところ、目的のスタイルの実装がなりましたね、本当にありがとうございます!
        良い秋夕連休を過ごしてください〜

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

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

    応答
    • こんにちは?

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

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

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

  4. こんにちは気にしたよく見ていきます。 WordPressを知って一つの不思議おりお問い合わせください。既存の手作業のホームページは、ウェブ上にHtmlファイルが存在して、その部分に合わせて変更し、レイアウトとスタイルを適用しながら作業をしたが WordPressは、PHP言語のファイルしかオプドグンヨ。 ページを修正して、レイアウトを変えなければならに何をするかが漠然としてご連絡致します。整理するとHtmlファイルは別になく、モジュールを呼び出す方法でのみ使わなければならかどうか... Htmlファイルがある場合、どの位置で確認して修正する必要がありかどうか気にハネヨ。 ありがとうございます

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

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

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

      だから、手間下さい。

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

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

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

      応答
  7. よく見ました.FTPを利用したcssの修正をするときparents themeがアップグレードされると、変更もすべて消えでしょうか? 

    応答
    • こんにちは?

      Parent Theme内のCSSファイルで変更する場合のテーマが更新されると変更が失われます。
      子テーマを利用してみてください。 それともプラグインを使用してもドゥェゴヨ。

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

      もしCSSのみ変更された場合には、あえてChild Themeを作らずSimple Custom CSSのようなプラグインでも適しているようです。

      手間下さい。

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

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

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

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

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

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

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

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

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

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

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