class(クラス)とid

キャプチャ画像

当サイトの特典テンプレート【Volar】では、SIRIUS標準の機能以外にオリジナルの機能も多々盛り込んであります。

 

その中で多用しているのがclassです。
(たまにidも)

 

もちろんコピー&ペーストで行けるようなカンタン設定にはしてますが、classやidの概念を知ってもらって理解しながらの方がミスも少なくなるであろうとの考えからこのページを作ってみました。

 

ちょっと長いですが、時間のあるときにでもご覧ください。

 

たとえば一部のテキストを”太字にする”など何らかの装飾効果を付けたい場合、
その部分に直接的に”太字にする”という設定を付与すれば事は解決します。

 

しかしながら”太字にする”箇所が何ヵ所もある場合、
その都度設定を書いていくのは非効率的です。

スペルミスも生じやすいです。

 

そこで登場するのがclass(クラス)idという属性です。


classやidの概念

 

通常は【テンプレート】→【スタイルシート編集】で開くスタイルシート画面に書き込まれており、classの場合は先頭にドット(.)idはシャープ(#)が付きます。

 

このclassやid自体に”テキストを太字にする”などの設定を施しておき、
装飾効果をつけたいテキスト部分に設定したclassやidを付与します。

 

これならスペルミスの心配も少ないし、
変更が生じた場合でも大元のclassやidの中身を修正するだけでいいので、
ホームページ制作ではよく使われます。

 

たとえば口コミ(男性)のアイコンをクリックすると”user1”というclassが自動的に付けられます。

 

実際に打ち込まれたのがこちら↓。

(”口コミテキスト”は後から管理人が加筆したもの)

 

<div class="user1">

口コミテキスト。

</div>

 

実際の表示がこちら↓です。

口コミテキスト。

 

そしてSIRIUSのスタイルシートでuser1というclassを調べると、

 

.user1 {

background-image: url(img/user1.png);

}

といった設定が付いてます。

(テンプレートによって異なることもあります)

 

これは”背景にはuser1.png(白抜き顔画像)という画像を表示せよ”という意味です。

 

また本文表示エリア全体を囲む大枠にはcontentsというidが付いてるんですが、
同じようにスタイルシートでcontentsを調べると、

 

#contents {

background-color: #fff;

}

となってます。

(テンプレートによって異なることもあります)

 

これは”背景色は白(background-color: #fff;)にせよ”という意味です。

classやidの書き方

記事内でのclassの付け方の基本ですが、
class文の一部に適用させたい時は”span”というタグを使って書き加えます。

 

SIRIUSの文字色やフォントサイズアイコンをクリックすると、この<span>~</span>形式で自動入力されます。

”タグ”とは?

タグとは<h1><h2><div>といったように< >で囲まれた半角英字のテキストのことです。

 

このタグにはそれぞれ決まった命令が付いており、ウェブサイト(ホームページ)はその命令に沿ってページを表示させています。

 

書き方の一例としては

<span class="※クラス名">※装飾したいテキスト</span>

となります。

 

たとえば”f_bold”というclassがあって、
その内容が『テキストを太字にする』設定だとします。

 

この場合は

<span class="f_bold">サンプル文字</sapn>

という書き方になります。

 

 

一方、classを行全体に適用させたい時は、記事内に

<p class="f_bold">私の好きな色は赤です。</p>

”p”を使って書きます。

(※”p”は行を意味します)

 

さらに『文字を赤色にする』という設定の付いた”f_red”というclassが別にあったとします。

 

ここで太字&赤色といった感じで複数のクラスを重ねて使いたい場合は
classとclassの間に半角スペースを足して

<span class="f_bold f_red">サンプル文字</span>

のように書きます。

 

※idの書き方も基本的にはclassと同じです。

 

SIRIUSの場合、しょっちゅう使うclassについては『文字装飾設定』『クラスの設定』『定型文』などを利用するとより使い勝手がよくなります。

 

これはたとえばテキストを選択して”注意”アイコンや”ヒント”アイコンをクリックするのと同じことです。

 

※『文字装飾設定』についてはこちら↓をご覧ください。

 

 

※『クラスの設定』についてはこちら↓をご覧ください。

 

SIRIUS(シリウス)のクラスの設定 - SIRIUS(シリウス)でホームページ作成

SIRIUS(シリウス)のクラスの設定の使い方をご紹介します。

 

”サイト構成”の右隣にある『定型文』タブは、決まったフレーズをコピーしておけます。

 

一時的にclassを使い回ししたい時はclassを設定したフレーズを定型文に登録しておき、
使う箇所でコピー&ペースト後、必要箇所だけをその都度修正するというやり方もあります。

classとidの違い

classとidの一番の違いは、classはページ内で何度でも繰り返し使えます
idは一度しか使えないということです。

 

たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。

 

ヘッダーはページ内に2つ出てくることはないのでid指定になってます。

 

繰り返し何度も使いそうな装飾効果にはclassを、
そのページ内で一度だけしか使わない装飾効果にはidを使うと思ってください。

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSカスタムテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください

 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替