シリウス(SIRIUS)のクラスの使い方。このように使うと便利です

背景画像

ホームページ作成ツール・シリウス(SIRIUS)には自分仕様にするための機能が備わっています。そのひとつに「クラスの設定」があります。

太文字で自分好みの色にしたいとか、オリジナル色のアンダーラインなどを設定しておくのが「クラスの設定」です。設定しておけば、すぐにしかも簡単に文字装飾ができるので、効率的にページ作成をすすめることができます。

クラス設定の事例

まずは、クラス設定のGIFアニメをご覧ください。(画質を落としてあるため少々見ずらいです)
クラス設定ボタンから蛍光ラインを選択して記事に貼り付け。その後にWEBブラウザで確認したものです。


このようにクラスボタンを使えば、素早くオリジナル色のアンダーラインを引くことができます。

ちょっと待って。わたしのボタンには何も表示されないけれど・・・。
そのとおりです。
クラス設定をされていない方は、このボタンをクリックしても何も表示されません。それでは、このボタンにどういった手順で作業を行えばクラス設定ができるのかご説明します。

手順1:クラス設定の前にCSSの編集

まずは、スタイルシートの編集から行います。終了したら次にクラスの設定となります。

それでは、CSSの編集からです。
上記のタブの中のテンプレートを選択 → スタイルシートの編集を選択します。

スタイルシートの編集

スタイルシートの編集を選択します

スタイルシートの編集をクリックすると、下のような画面が立ち上がります。
このタブのうち、「textstyles.css」を選択。(点線背景や文字回りの枠などはtextstyles.cssにありますので、ここにしました)

今回の事例では、ピンクの枠の中のように入れています。
入れる箇所はどこでも問題ありませんが、後からどこに入れたのかわかるようにしておくことが大切です。

cssの編集

/* 蛍光ライン */
.keikouline{
padding:2px;
background: linear-gradient(transparent 60%, #ffec47 95%);
}

/* 蛍光ライン */の部分は、後に自分がCSSを見たときにわかりやすくしておくためのメモです。/* 蛍光ライン */の部分はCSSには反映されません。

.keikoulineの部分は、クラス設定で使用する名前になります。わかりやすい好みの名前にします。

paddingは、上下左右のパディング(内側の余白)を一括で指定するプロパティです。ここでは2pxとしていますので、上下左右の余白が2pxになります。

transparentを95%に設定した事例

padding:10pxにするとこうなります。

アンダーラインをpadding10pxに指定した例

「transparent 60%, #ffec47 95%」とは、文字の高さに対して上から60%の領域を透明色で塗りつぶし、上から95%の領域を#〇〇〇で指定した色でグラデーションをかけるとなっています。

「transparent 60%, #ffec47 5%」とするとラインが太く見えます。

#ffec47は薄い黄色です。
#ffec47の見本

#f7de04に変更しますともう少し濃い黄色で、このような色合いになります。こちらの色のほうがよさそうです。

#f7de04色の見本
#f7de04でのアンダーライン

以上がCSSの設定です。次にクラスの設定をします。

手順2:クラスの設定

設定タブをクリック → クラスの設定を選択します。

設定タブをクリックすると「クラスの設定」が出てきます

設定タブをクリックすると「クラスの設定」が出てきますのでこちらを選択します

クラス設定画面が出てきます。下の画像ではすでにクラス名が入っていますが、初めての方は何もない状態です。
ここで「新規追加」を選択します。

クラス編集の画面

新規追加を選択後の画面。↓ すでにクラス名とタグが入っていますが、初めは空白です。
クラスの名称とspanタグを入れる

クラス名とは?

クラス名は、先ほどcssで指定した名前です。この事例では、keikoulineになります。ドット「.」は不要です。
今回は、文字の一部に対しての装飾なので、「spanボタン」を押します。すると画像のように<span></span>が挿入されます。説明の部分に入れた文字は、クラスボタンを選択した時に出てきます。また後にクラスの編集をするときにも説明が表示されます。ここは入れなくても問題ありませんのでお好きにどうぞ。

以上でクラスの設定は終了です。お疲れ様です。

クラスのボタンで確認

クラスボタンを選択してみるとkeikoulineが表示されていますので、完成です。

クラスボタンを選択するとkeikoulineが表示されます

クラスボタンを選択するとkeikoulineが表示されています

これで冒頭の作業を行い、WEBブラウザで確認しまとこのようになっています。↓

transparentを95%に設定した事例

以上、「シリウス(SIRIUS)のクラスの使い方。このように使うと便利です」でした。
それでは、またお会いしましょう。

関連記事

  1. シリウス広告設定のアイキャッチ画像

    シリウス(SIRIUS)に広告設定を行う、その手順について解説

  2. サクラの花びらの背景画像

    ホームページ作成ツール・シリウス(SIRIUS)の記事1から10までの…