クラスの設定

キャプチャ画像

SIRIUS(シリウス)には、頻繁ひんぱんに使うクラス(class)を登録しておくための
「クラスの設定」が搭載されています。

 

SIRIUSは基本的にHTMLやCSSを知らなくてもサイトは作れます。

 

デザインモードなら、さながらブラウザで見ている感覚で記事が書け、
様々な装飾や効果などもアイコンをクリックするだけで簡単に付けることができます。

 

しかしながら修正を重ねたりオリジナルの装飾・効果をきちんと付けようと思ったら、
テキストモードに戻して編集する必要があります。

 

その際、class(クラス)というのがよく使われます。

 

”classとid”

特定の一部だけを装飾したい場合、その部分にclassidを付けておくことで装飾指定を一元化できます。
※classの名前はドット(.)で始まりidはシャープ(#)で始まります。

 

たとえばスタイルシート(【テンプレート】→【スタイルシート編集】で開く画面)内に『f_red』というclass名があったとします。

 

そこに書いてあるのが

 

.f_red {

color: red;

}

だったとします。

 

これは『f_red』というクラス名がついてる部分はフォント色を赤にする(color: red;)というものなんですが、これを行全体のテキストに適用する時は、記事内に

 

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

 

こんな感じで書きます。
(※pは行を意味します)

 

行全体ではなく行の中の一部だけにclassを設定したい時、
たとえば上の例なら「赤」というテキストだけフォント色を赤にしたいような場合は

 

私の好きな色は<span class="f_red">赤</span>

 

このように”span”という文字を付けて書きます。
(spanについてはあまり深く考えず”文の中の一部の装飾にはspanを付ける”ぐらいに思っておくといいでしょう)

 

そしてこのclassは繰り返し使えます。
つまり他にもフォントを赤くしたい箇所があれば何度使ってもいいのです。

これに対しidは一度しか登場しません

 

たとえばヘッダー部分に使われてる<div id="header">なんかはそのいい例です。
ヘッダーはページ内に2つ出てくることはありませんから。

 

たとえばここで『ヘッダー部の背景色は赤にする』なんて設定を付けたい場合はスタイルシートに

 

#header {

background-color:red;

}

というふうにドット(.)ではなくシャープ(#)をアタマにつけて指定します。

 

どこにクラスをつけてどこにidをつけるかははっきり言って慣れです。

 

迷ったらクラスを付けておけば間違いないです。

 

そのクラスの中でもよく使うものに関しては『クラスの設定』に登録しておくことで、
簡単にミスなくクラスを付けることができます。


『クラスの設定』登録方法

たとえば当サイトではf_boldというクラス名に太字にするという設定を割り振ってます。

 

これを文章の一部のテキストだけに効果をかけたい場合は、

『この文章の<span class="f_bold">太字にしたいテキスト</span>。』

というように書きます。

 

これをいちいち手書きで付け足していくのはとても面倒だし、
なによりミスも出やすいです。

 

そこでクラスの設定にこのクラスを登録しておきます。
そうすればミスなく瞬時に面倒な設定を付与することができるようになります。

 

登録の仕方としては、
まずSIRIUS左上の”S”をクリック→【クラスの設定】→【新規追加】をクリックします。

 

下のような画面になるので、
たとえばテキストの一部だけに装飾効果を付ける設定ならば、
クラス名を入力後『SPAN』をクリックします。

 

キャプチャ画像

 

行全体に装飾効果を付ける設定ならば『P』をクリックします。

 

キャプチャ画像

 

SIRIUSにはPC(&タブレット)だけに表示させる”pc_contents”というクラスが標準で付いてます。

(iPhone・スマホに表示させるには”sp_contents”)

 

この場合はブロック単位で範囲指定する必要があるため『DIV』をクリックします。

 

キャプチャ画像

 

これで3つのクラスが登録できました。

 

キャプチャ画像

 

実際に文章の一部のテキストを太字にしたい場合は、
テキストを範囲選択したあとクラスの設定から”f_bold”を指定してあげるだけで
先ほどの手打ちした書き方と同じモノが瞬時にできあがります。

 

キャプチャ画像

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

キャプチャ画像

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

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

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

PC版レイアウトに切替

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