CSSのクラス名の書き方・ルールまとめ。パッと見て内容が分かる名前をつけるのがおすすめ。

  • 2021年1月1日
  • 2021年3月11日
  • CSS
CSS CSSクラス 書き方・ルール
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!(プロフィールはこちら

ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

今回の記事では、CSSのクラス名について解説していきます。

WordPressのテーマ内にあるどのデザインにも、個別にクラス名=名前をつけて、どんなデザインを適用させるかが決まっています。

記事の最初にある吹き出しデザイン(赤枠↓)を使って書いていきますね^^

css コード 探し方

 

ー ブログで伸び悩んでいる方へ ー

無料動画

どんな書き方になっている?

コードを検索

最初に、どんな書き方でデザインしているかを見ていきます。

この吹き出しの「薄い青色の枠」のデザインに注目して解説したいのですが、下のコードでデザインされています。

 

 CSSコード
.content .balloon .balloon__img-left{
border: 5px solid #c8e4ff;
border-radius: 90px;
}

 

開発ツールを使うと、

このように3箇所でどんなクラス名か?どんなコードか?が分かります。

↓↓↓

css コード 探し方

 

このクラス名(.content .balloon .balloon__img-left)が書いてあるところだけ、特定のデザインを適用させているという訳です。

みみこみみこ
私も吹き出しの枠は興味があるので、どんな意味か教えて欲しいです!(*^ω^*)
おかぴーおかぴー
もちろん!それぞれ何が書いてあるかを書いていきますね。

それぞれどんな意味か、チェックしてみましょう。

 

border

個別に色分けをして解説していきます。

 

border: 5px solid #c8e4ff;

↓↓↓

ボーダーをつける(上下左右の場合。もし下にだけ線をつけるならborder-bottomと書く)
線の幅は5pxにする
1本線で書く(2本線はdouble、点線はdottedと書き変えます)
青のコードを指定(カラーコードと言います)

 

カラーコードの探し方

検索方法

やっぱりブログは好きな色でカスタマイズしていきたいですよね。

blue、green、という感じで指定しても良いんですが、微妙に色合いを変えたものにしたい場合はカラーコードを探してカスタマイズするのがおすすめ。

そのカラーコードがまとまっているサイトがあるのでここでご紹介しますね^^

 

カラーコード

色検索(https://www.colordic.org/search

 

ここで、自分が探したい色を入力して検索をかけます。

カラーコード

 

すると、条件に近い色が一覧で表示されるようになっています。

カラーコード

6番目の青が良いな〜と思ったら、そこに書いてあるコード(#から始まる6文字のコード)をCSSに指定すると色が変わります。

ここなら「#0095d9」です。

 

border-radius

これは枠の丸みを指定しています。

border-radius:90px;

と、数字を90pxにすればまん丸の枠が出来上がります^^

 

名前は分かりやすく

あだ名 ニックネーム CSSクラス名

クラス名は自由に決められて、WordPress上のあだ名のようなものですが、

その分どんな内容が反映されるものかを分かりやすくしておくことが大事です。

 

例えば、「.content .balloon .balloon__img-left」というコードをよく見ると、

.balloon
→バルーン=風船みたいなCSSだとイメージできます。

.balloon__img-left
→leftなので、左側に来た吹き出しのデザインの場合に適用されるものだと分かります。

 

カスタマイズする時は、パッと見た時に想像できるようなもので構築していくのがコツです。

 

CSSコードのルール

クラス名はある程度自由です。

先ほどの「.balloon」ではなく、「.marui-fukidashi」という書き方でも指定箇所のHTMLと内容が合っていれば反応します。

ただし、一定のルールは存在します。

  1. 半角英数字のみ使用可能
  2. 記号は、「 - 」(ハイフン)、「 _ 」(アンダースコア)のみ使用可能
  3. スペース(全角・半角)は使えない
  4. アルファベットから書いていく(数字から始まると反応しない)
  5. CSSファイル内では、「.」から始めて書く
    HTML内では、「.」は書かない

 

①のNG例

「.ballon」←全角のため

「.バルーン」←英語ではないため

 

②のNG例

「.ballon&img-left」←使えない記号のため

 

③のNG例

「.ballon img-left」「.ballon img-left」←スペースがあるため

 

④のNG例

「.1st-balloon」←数字から始まっているため

 

⑤について

この画像を見ると分かるのですが、右上の「ここがクラス名」と書いてあるところには「.」がついてないです。

css コード 探し方

 

右側を拡大しました。

↓↓↓

css コード 探し方

 

 HTMLの書き方
<figure class="balloon__img balloon__img-left">

 

逆に、右下のところには「.」がついた書き方をしています。

 CSSの書き方
.content .balloon .balloon__img-left

 

これもルールの一つで、骨組みであるHTMLには上記のような書き方をします。

クラス名は複数設定することが多く、一つのHTMLに複数CSSが指定されている場合は半角スペースで間を空けて書き込んでいきます。

 

CSSの書き方も同じイメージで、半角スペースを空けて上から下にどんどん下がっていく書き方をします。

「.content」という記事内の時だけ、

「.balloon」という吹き出しの、

その中でも「.balloon__img-left」という左側に表示された吹き出し時だけに、

カスタマイズした内容が反映されるという書き方をしていきます。

みみこみみこ
なんでこんな難しい感じで書いていくんですか〜?(つД`)ノ
おかぴーおかぴー
一見そうなんですけど、こうやって繋いだ書き方をしていくことで、他のデザインに影響されないようにしているんです。

例えば、「この記事では吹き出しを黄色にしたい」「他の記事は共通して青色にしたい」という感じで、

CSSのコードは一回切りではなく何回も使い回すもので、

「.balloon__img-left」だけ書いてカスタマイズしてしまうと、使い分けができなくなって不便になります。

 

ちょっと上級者の話になってしまいましたが、開発ツールを使ってCSSのクラスをそのまま使用すれば問題ないので、うまくツールを活用していきましょうね!

 

まとめ

まとめ

クラス名の指定方法はなんとなく伝わりましたか?

まずは、クラス名は分かりやすく設定しましょう。

 

そして、クラス名をつける中で一定のルールがありました。

  1. 半角英数字のみ使用可能
  2. 記号は、「 - 」(ハイフン)、「 _ 」(アンダースコア)のみ使用可能
  3. スペース(全角・半角)は使えない
  4. アルファベットから書いていく(数字から始まると反応しない)
  5. CSSファイル内では、「.」から始めて書く
    HTML内では、「.」は書かない

ここが混ざってないか気をつけましょう!

 

WordPressの中でも少しずつ書き方が異なっているので、難しく感じますよね^^;

うまく反映されない時は、落ち着いてクラス名の書き方が間違っている可能性があるのでチェックしてみてください。

デザイン効果と組み合わせて、最適な収益化方法を見つけよう

おまけ

「ある程度ブログのデザインも納得したものができてきたなぁ」

「次はこのブログを、稼げるブログにしたい!」

と思っている方へ。

 

ブログ収益化において、

デザイン効果と組み合わせることで反応率が高まる効果的な方法があるのですが、

僕が勤めている会社では、とても言えない(というか教えたくないw)内容を、

ここだけの話で公開しようと思います。

 

どんな話かと言うと、

「発信するテーマ(内容)に合わせた最適な収益化方法が分かる」というものです。

 

100人いれば、100個のブログがあり、コンセプトがあります。

それによって収益化の方法も様々です。

 

デザインは視覚的に注目を集める力がありますが、その先の収益化へ進むには間違いなく発信内容に合わせてブログを構築していく必要があります。

 

あなたは最適な収益化方法を選択できていますか?

きっと、今ブログで伸び悩んでいる人には新しい発見になるはず^^

興味がある方は、ぜひ以下からご覧ください〜

 

↓↓↓

 

 

ストレスフリーなブロガーライフを送ろう ブログデザインお悩み解決室WPテーマ「THE THOR」でリニューアル!" width="1280" height="479" >

WPテーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG