シリウスカスタマイズ｜ユーザー指定スタイルシート

動画解説！ユーザー指定スタイルでソースを綺麗にする

スタイルシートはホームページのデザインや構成を指示するための元の記述になります。シリウスのサイト作成画面の指定でスタイルシートに書かれたソースを呼び出して、テキストや表示方法などにその情報をHTMLに反映させて実現しています。実際のHTMLの記述を簡略化させると言うシステムです。

サイト作成シリウスには元々テンプレート自体のデザインや構成のためのスタイルシートが存在しますが、自分がよく使う装飾などを登録しておくためにユーザー指定のスタイルシートが用意されていて、自作のスタイルを設定しておく事でサイト作成画面から一発で呼び出す事ができます。

ユーザー指定スタイルにソースを記述する

今回の実践例では [ユーザー指定スタイル] を使って [ホームページ作成ソフト] と言うテキストを太文字、赤、文字ポイント18pxで表示させます。

上記で選択したユーザー指定スタイルにスタイルを記述します。ここでの実際の記述の例を次に示しますので、まずはやってみましょう！後で変更したり消去できますので実践してみる事が肝心です。下記をそのままコピーしてスタイルシートに貼り付けて保存ボタンをクリックします。

※ 上記画像 [text-b-red-18] がクラス名

クラス設定でスタイルを呼び出すための設定

上記で記述したスタイルを呼び出すための [クラス名]（スタイルの名前）を設定します。サイト作成画面でこのクラス名で囲われた範囲のテキストにスタイルの情報が反映されます。

このクラス名はスタイルシートに記述したクラス名と同じです。先程スタイルシートに貼り付けたソースをもう一度確認してください。赤字部分がクラス名 [text-b-red-18] です。共通した [text-b-red-18] と言うクラス名でスタイルシートとHTMLを紐づけさせているのです。

もう一度スタイルシートを確認してください。クラス名の前にspan.が記述されています。ここでSPANを選択するのは、<span>テキスト</span>で囲まれたサイト作成画面上のテキストにスタイルを反映させるためです。HTMLでspanはテキストの集合体の最小単位になります。

またクラス名を設定すると、自動で[スタイルの呼び出しボタン] にクラス名が表示されるようになります。サイト作成画面上でテキストを青色反転させた後にこのクラス名をクリックするとスタイルが反映されます。

このようにユーザー指定スタイル内にスタイルを記述し、[設定]から[クラス指定]するとサイト作成画面上のスタイル呼び出しボタンで一発で装飾を指定することができます。

この操作でテキストが指示通りの装飾になっているかプレビューで確認してください。

スタイルシートのメリット

シリウスのサイト作成画面で「ホームページ作成ソフト」と言うテキストを、赤い、太文字、文字の大きさ18px、で表示させたい場合では、通常5回の装飾の指示[クリック]が必要になります。一度このような装飾をするときスタイルを使った場合と使わない場合のソースを比べてみます。

指示内容を確認しながらでクリック5回必要

• 太文字の指示・・・・・・1回
• 赤い文字指定の指示・・・2回
• 文字ポイント数の指示・・2回

クリック1回、指示1回で合計クリック2回でOK

• HTMLソースが短くなる
• サイト作成画面が簡略化される
• 作成スピードが速くなる
• サイトを表示スピードが速くなる

このようによく使う装飾をスタイルシートに記述しておくとhtmlソースが簡略化されるのと同時に呼び出しボタンで一発で作業が終了します。上記記述のようにソースが簡略化されると、ホームページのファイルサイズが小さくなる事で読み込みのスピードが早くなりサイト表示が早くなると言う事です。表示スピードの最速化はSEO対策の効果が絶大です。

また、スタイルで指示するとデザインの統一が自動的に図れる事になります。

最強設定！文字装飾機能にスタイルを記述

このようにサイト作成ソフトシリウスでは色々な便利機能の「合わせ技」で最大限のメリットを引き出す事ができます。設定に多少時間がかかっても、サイト作成スピード、SEO対策、デザイン、など全てにおいてソフトとしてのメリットが最大限発揮されると言うことです。また設定することによってHTMLやCSSの知識が身に付きます。

2026/02/08 11:25:56