WordPressのカスタマイズ初心者が理解したい、クラスの使い方

この記事は約656秒で読めます。

どうも!!こうすけです。

今日は「WordPressのカスタマイズ初心者が理解したい、クラスの使い方」というタイトルで記事を書いて見ました。

WordPressのテーマを使ってると、この部分を修正したいなって思うことありますよね?

文字を太くしたい。この記事のタイトルを立体的に表示したい。画像に影をつけたい。そんな時にクラスの使い方を理解する必要があります。

今回はそういった修正するために必要なクラスの使い方を紹介したいと思います。

1. クラスとは

クラスとは、プログラミングでは一般的に設計図と呼ばれますが、WordPressで使うクラスは少し意味合いが違います。

WordPressで使うクラスは様々なデザインを変更する設定を1つにまとめたものです。

どういうことかというと、文字を太くする、背景を赤くする、画像に影をつける。

こういった設定を1つにまとめたものをクラスと言います。

以下のようなものですね。

.title-design{
    background-color: #000000;
    border: solid 1px #ffffff;
}

これをクラスと言います。

2. クラスの作成方法

ではクラスを作成していきましょう。

まずは、該当ブログのテーマより、テーマの編集を選択しましょう。


右上にテーマを選択する箇所があるので、修正したいテーマを選択しましょう。


右側にファイルが一覧で表示されると思うので、一番下にスタイルシート(style.css)というものがあると思うので、そのファイルを選択してください。


クラスを作成するためのファイル、スタイルシートが画面に表示されると思いますので、そこにクラスを作っていきましょう。

以下のようなクラスを作っていきます。

ではそれぞれ説明していきますので、クラスについて理解していきましょう。

.title-design{
    background-color: #DEEBFA;
    border: solid 1px #000000;
}

2.1. クラス名

.title-designと記載されていると思いますが、これはクラス名です。

正直どんな名前をつけても構いませんが、付けるとしたらそのクラスがどういった目的で使用されるのかがわかるようにしましょう。

例えば、記事のタイトルのデザインを変更したいのであれば、.title-designという名前にするなどしましょう。

そうした方が後でクラスを見た時にどういう目的で使ってるクラスなのかがわかりやすいです。

また、先頭に「.」が付いてますがこれは必ずつけてください。これがないとクラスと認識してくれません。

2.2. クラスの範囲

{}で囲まれていると思いますが、これはどこまでがこのクラスの設定であるのかを機械に認識させるためのものです。

この{}内に記述されている設定がこのクラスの設定となります。

例えば、以下のように{}外に設定を書いてしまうと作成したクラスの設定であると機械が認識してくれないので気をつけてください。

.title-design{
    background-color: #DEEBFA;
    border: solid 1px #000000;
}
    border-radius: 20px;

2.3. クラスの設定したいデザイン

background-colorやborderといった記述がありますが、これは実際に変更したいデザインの設定になります。

例えば、文字を太くする、背景を赤くするといった設定です。

この設定が無いといくらクラスを使ったとしてもデザインは変更されないので、気をつけてください。

#000000といった記述がありますがこれはbackground-colorのデザインの設定に必要な要素です。

background-colorは背景色を変更したい時に使う設定なので、色を指定してやる必要があります。

#DEEBFAはカラーコードと呼ばれ、色を指定する時に必要な記述になります。

設定にはそれぞれ設定に必要な要素があるので、詳しく知りたければググりましょう。

2.3.1. デザインの設定を記述する時の注意点

デザインの設定を記述する場合は以下の点に気をつけてください。

  • 一行に1つの設定を記載すること。
  • 設定の最後には必ず「;」をつけること。

一行に複数の設定を記述することはできますが、後から見た時になんの設定があるのかわかりにくいです。

一行には1つの設定を記述するようにしましょう。

「設定の最後には「;」を必ずつけてください。

この記述がないと設定あることが認識されません。

ただ最後の設定だけは「;」がなくても問題ないですが、後で追加する時に「;」をつけるのを忘れてたってことになりかねないので、忘れないためにも、どの設定にも付けるようにしましょう。

2.4. 実際にスタイルシートにクラスを記述する。

ではスタイルシートにクラスを記述していきましょうか。

以下のように記述してください。


記述した後は、ファイルの更新を忘れないでくださいね。更新しないと修正した内容は反映されませんから。

3. クラスの使い方

これでクラスの作り方についてはわかったと思いますが、次はクラスの使い方について説明していきたいと思います。

3.1. 記事のタイトルのデザインを変更する場合を例にクラスを使ってみよう

記事のタイトルのデザインを変更したいことを例にクラスを使っていきましょう。

まず、記事を修正したいならテーマ編集画面のファイル一覧から「single.php」というファイルを選択してください。

選択したら、次に「single.php」に記述されている内容の中に「the_title()」があると思うので探してください。

この記述が記事のタイトルを表示している箇所です。ここにクラスを使っていきます。

3.2. クラスを使用する

※ここでは<.div>や<.h1>と記述していますが、ブログに表示させるための記述です。実際にファイルに記述する場合は「.」はいらないので気をつけてください。

変更したい箇所の特定ができたらクラスを使っていきましょう。

先ほど特定した「the_title()」は大体<.h1>と<./h1>で囲まれています。

なので、それごとまず<.div>と<./div>で囲んでクラスを指定します。

<.div>を細かく説明するとわからないと思うので、ここではクラスを適用させる範囲と認識してください。

タイトルをクラスを適用させる範囲とするということです。

以下のように記述してください。

<div class="title-design">
    <h1 class="category-title"><?php the_title();?></h1>
</div>

実際にテーマに修正するとこんな感じ。


<.div>の中にclass=”クラス名”と記述することでクラスを使用できます。

先ほど作成したtitle-designというクラス名を記述します。

1つ気を付けて欲しいのですが、クラスを作成した時はクラス名の先頭に「.」を記述しましたが、クラスを使用する時には「.」は記述しないでください。

「.」を記述してしまうとtitle-designというクラスであることを認識してくれません。

また上記を見てもらえばわかると思いますが、<.h1>にもクラスが使用されています。

クラスは様々なhtmlタグ(<.h1>や<.div>のこと)に使用することができます。

細かいことはここでは説明しませんが気になる人はググりましょう。

これでファイルを更新し、記事を表示させタイトルを確認してみると、記事のタイトルがクラスに設定したデザインに変更されています。確認してください。

こんな感じでタイトルのデザインが変更されます。

修正前

修正後


これでクラスの説明は以上になります。

4. 最後に

クラスはブログのカスタマイズを編集するのであれば絶対に必要な知識です。

慣れるまでは使うのに苦労すると思いますが、慣れたら全然難しくないものだと思います。

クラスを使いこなし様々なデザインを変更していきましょう。

この記事がいい!!と思ったらいいねツイートよろしく!!

 

作成者: kosuke

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です