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

基本的なCSSを知ること WordPress テーマのオプションやページビルダーで特定の要素の色や幅などを調整するためのオプションを提供していなくても、簡単に必要に応じてスタイルを変更することができます。 この記事では、 WordPressでポストタイトルの文字サイズや色を変更することを例えば WordPressにCSSを適用する方法を説明します。

はじめ

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

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

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

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

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

変更事項（サンプル）

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

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

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

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

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

CSSの書籍を購入するときは、上記のリンクをクリックして購入すると、パートナーの活動の一環として少額の手数料が提供されます。 CSSの書籍ではなくても、上記のリンクをクリックしてクパンで商品を購入すると、私は少し手数料を受け取ることができます。 これにより、このブログの運営を支援することができます。

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

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

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

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

左から 部分をマウスでクリックすると、右側にこの部分に適用されたCSSコードが表示されます。

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

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

図のように選択した要素の部分の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資料を参考にすれば、多くのことができます。

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

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

color: #c17fa0;

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

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

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

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

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

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

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

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

参照

• WordPress モバイルとPCのレイアウトは異なる作成する方法