WordPressにCSSを適用する方法[基本]

8のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

はじめ

この記事では、ワードプレスでポストのタイトルの文字サイズや色を変更することを例えばワードプレスにCSSを適用する方法を説明します。

まず、考慮事項は、ユーザーCSSをどのように追加するかです。 プログラムの知識が多くの方Chromeでの要素の検査をし、そのCSSファイルを検索して直接変更する場合を時折目になります。

このようにテーマやプラグインのCSSファイルから直接コードを修正することは、良い方法ではありません。 なぜならテーマやプラグインが更新されると変更された内容がすべて消えます。 その後、更新するたびに変更する必要が面倒が発生することになります。 変更が多い場合は? あるいは長い時間が経って、どこを修正したのか覚えていない場合でしょうか?

従ってユーザーCSSはチャイルドテーマを作って、別のスタイルシートファイルに追加したり、プラグインをインストールして、プラグインに追加する方式で進行します。 なるべくチャイルドテーマ(子テーマ)を作成進めることをお勧めします。 詳細については、「ワードプレスでのCSSを追加する」を参考にしてみてください。

参考までに、ワードプレスのプラグインは、PHPスクリプト、javascript / jQueryテンプレートなど、さまざまな種類のコードを販売する CodecanyonでメニュースタイルなどのCSSコードスニペットまたはJavaスクリプト/ jQueryテンプレートを安価に購入することができます。

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

この記事は、CSSについてよく知らない方のために可能な簡単作成されました。

変更事項(サンプル)

図1: Enfoldサンプルポスト
図1: Enfoldサンプルポスト

上の図は、 Enfold テーマのWeddingデモをインストールしたサイトでのテストのブログ記事を一つ作成したものです(キャプチャのためにブラウザ画面を縮小して無理に与えるたところのロゴとメニューが少し重なって見えるのですが、実際にはきちんとしたきれいです笑)。 本文の内容は、 ダミーテキスト(Lorem Ipsum)ジェネレータを利用して、ランダムに生成したものです。 (Enfold テーマ有料テーマの中から、比較的軽量ですっきりして、多くの方々が好むようです。)

図では、 タイトル部分(Hello world!)のテキストのサイズや色を変更する方法を 見てみましょう。

開発ツールの要素をチェックする

ブラウザから簡単にレイアウト変更をテストするには、クロムを用いることをお勧め。 グーグルChromeがインストールされていない場合 ここでクロムをインストールしてください。

今の要素検査(Element Inspection)を実行して、必要な変更をテストしてみましょう。 CSSについてまったく知らない場合は、まず 生活コーディングでのCSSの基本的な内容を身につける助けになることがあります。 本を一つ購入してもいいようです。 私は初期の「モダンWebデザイナーのためのHTML5 + CSS3入門」という本を参考したが、この本や、あるいはインターネットを検索して大丈夫だと推薦する本を一つ購入して前を読んでみるのも役立ちます。

ブラウザで、変更する部分(タイトル部分)にマウスを当ててマウスの右ボタンを押します。

Element-Inspection-1
図2:クロムから要素をチェックする

上記のような画像が出てくる」検査"をクリックします。これにより、下の部分にHTMLコードが表示されます。

Element-Inspection-sample2
図3:Chromeで要素のテストを実行した様子

マウスを上下に動かすと、記事本文でもハイライトされている部分が変わります。 h1 タグ部分が記事のタイトル部分です。

<h1 class="post-title entry-title" itemprop="headline">
...</h1>

左から <h1 class = "post-title entry-title" itemprop = "headline"> 部分をマウスでクリックすると、右側にこの部分に適用されたCSSコードが表示されます。

Element-Inspection-3
図4:タイトル部分のCSSコード

右側に緑色で表示された部分が現在の記事のタイトルに適用されるCSSコードです。 (もし該当部分のCSSコードがない場合は、右上部のプラス(+)記号をクリックすると、コードが生成されます。)

参考までに、もし右上のプラス(+)記号をクリックすると、:

add a new element
図5:タイトルの新しいコードを追加した場合

図のように選択した要素の部分のCSSコードが追加されます。

図4から緑表示されたコードをそのままコピーすると、下記の通りです。

#top .fullsize .template-blog .post-title {
text-align: center;
font-size: 30px;
padding: 15px 0;
max-width: 800px;
margin: 0 auto;
}

CSSの文法的な部分は、特に断りのしません。 図から必要な部分をマウスでクリックし、プロパティの値を変更することができます。 例えば、 フォントサイズ:30px。 部分を font-size:2em; 式で変更することができます。 直接変更してみて本文の文字サイズが変更されます。 値を変えながら適当な大きさの値を決定します。

また、上記の場合、文字の色がないため、文字の色を追加するようにします。 この場合、 カラー プロパティを使用します。 CSSプロパティの使用について確認するには、本を参照してもよいが、グーグル "color css"のように検索して W3Schools資料を参考にすれば、多くのことができます。

color-css-search-in-google
図6:GoogleでCSSデータ検索

上の図のように CSSを入れて、Googleで検索すると、ほとんどの上部にW3Schools資料が検索されます。 文字サイズを変更するには、「font size css"このように検索します。(英語少し知って、多くのことができます。)

ColorプロパティのW3Schoolsページ(http://www.w3schools.com/cssref/css_colors.asphttp://www.w3schools.com/css/css_text.asp)を参照して、適切なコードを作成します。 次のようなコードを追加します。

color: #c17fa0;

文字の色は、クロームの開発ツールで 色:赤; 式で適切に追加された後、 色: 横の文字色ボックスをクリックすると、文字の色を選択することができるカラーピッカー(color picker)がポップアップで表示されます。 カラーピッカーで適切な色を選択します。

図7:Googleの開発者ツールのカラーピッカー(Color Picker)
図7:Googleの開発者ツールのカラーピッカー(Color Picker)

現在Googleの要素のスキャンツールでは、次のように文字サイズが変更され、文字の色を追加しました。

element-inspection-in-google
図8:開発ツールのコードを追加/変更

これにより、上記のようにブラウザでも文字サイズや色が変わります。 しかし、更新すると、変更された内容が消えます。 なぜなら、実際のスタイルシートファイルに上記のコードが追加されたものではないからです。

変更をスタイルシートファイルに追加する

今、上記のコードをそのままコピー(変更された部分のみ)して、スタイルシートファイルに追加するようにします。 スタイルシートファイルに追加する方法は、「ワードプレスでのCSSを追加する」を参考にしてみてください。

コードを追加した後、ブラウザを更新すると、変更が反映されるでしょう。 もし反映されていない場合、キャッシュプラグインのキャッシュを削除して、ブラウザのキャッシュも削除してみます。 それでも正しく反映されない場合、コードを間違って作成したものです。

この内容は、とても基本的な事項と、あえて取り上げしようとしなかったが、この内容をよく知らない方がたまにおられ、基礎的な事項であるが、別の文を使用して扱われました。 CSSの詳細については、上記したように、いくつかの資料や本をよく理解ください。


♣クロム開発ツールの要素の検査は、少し練習すれば容易に理解することができます。 慣れるまで練習し、W3Schools資料を参照しながら実習をしてみるとすぐにCSSに慣れた自分を発見することになるでしょう。



8のコメント

コメント

  1. こんにちは。
    WordPressでホームページ作業中です。
    http://angol6.cafe24.com/
    メインの大きな顔写真に(すべての講義)の文字との横に(垂直バー)を消去しようとする
    開発者ツール(f12)確認してサイジュを0に変更した後、/ユーザーcssにコピーして追加したが
    変更されていない質問いたします。
    回答いただければ幸いです。

    応答
    • こんにちは、初心者の編集者様。

      次のCSSで可能かどうか確認してみましょ?

      .top_site_main .page-title-wrapper h1:before {
      content: none !important;
      }

      CSSで仮想要素をなくす方法は、以下のStackoverflowの記事を参照してみてください。

      https://stackoverflow.com/questions/3012716/css-how-to-remove-pseudo-elements-after-before

      応答
      • 回答ありがとうございます。
        上の内容を追加したら
        http://angol6.cafe24.com/에러.PNG
        上のリンクのように適用がダメですね。

      • 前のコードをコピーしてから間違ってコピーカット。

        :beforeを付けてテストしてみてください?

        .top_site_main .page-title-wrapper h1:before {
        content: none !important;
        }

      • 回答ありがとうございます。
        すぐに適用されます。
        お疲れ様でした。