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

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

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

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

ユーザー定義の追加CSSを使用する

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

Additional CSS  - ワードプレスでCSSを追加する

テーマのデザイン>ユーザー定義>を追加CSS(Additional CSS)をクリックして、ユーザーCSSを追加することができます。 (ワードプレスのバージョン5未満では ルックス>ユーザー定義>追加CSS メニューから追加することができます。)

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

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

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

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

テーマ内のCSS編集機能

たまにテーマでCSS編集機能を提供する場合があります。 (ただし、無料のテーマは、この機能を提供していないテーマがあります。)
Theme Options Edit CSS実際の画面は、テーマごとに異なります。

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

AVADA Custom CSS  - ワードプレスああ海カスタムCSS(注:日本語言語ファイル(PO)を適用すると、 カスタムCSSが "カスタムCSS"と表示されます。)

Salient Custom CSS Code

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

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

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

プラグインの使用

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

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

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

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

ファイルBugzillaの使用法:ファイルBugzillaのを使用して、ワードプレスのスタイルシートファイルを編集する

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

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

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

今、上記の図では、「接続」をクリックして、FTPにアクセスすることができます。

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

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

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

おわりに

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

注:

25のコメント

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

    • こんにちは?

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

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

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

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

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

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

      だから、手間下さい。

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

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

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

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

    • こんにちは?

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

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

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

      手間下さい。

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

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

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

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

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

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

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

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

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

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

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

コメントを残す

コメントを入力してください!
名前を入力してください