CSS - PC用


この設定項目は、パソコンでサイトを閲覧している時に適用させるスタイルシートを制御します。

スタイルシート(CSS: Cascading Stylye Sheets)とは、ウェブページの見た目を規定するためのしくみです。一般的なウェブサイトでは、HTML、またはXHTMLという規格に沿って各ページが作成されています。以前は、このHTMLやXHTML自体でウェブページのデザインを表現しようというのが一般的でしたが、最近ではHTMLやXHTMLはウェブページの構造(たとえば、この部分はタイトルで、この部分は本文ですといったようなこと)のみを決定し、見た目(デザイン)はCSSという仕組みを使って表現しようということが主流になっています。少し難しいと思われるかも知れませんが、CSSは文書(ウェブページ)の構造と見た目を切り離して作成することができる、非常に便利な仕組みなのです。

ではいったいどのように便利なのでしょう?
CSSの正体は、ページの中のどこのどの部分をどのような色にしなさいとか、文字の大きさはどうだとかといった、デザインに関する様々なことがらを書いてある命令文書です。ですから、ページ本体とCSSを別のファイルにすることによって、デザインをつかさどるCSSだけを切り換え、自由自在に、そして少ない労力でページのデザインを変更することができるというわけです。

GsCMSの標準デザインは、左にサイドバーがあり右に本文があるといったスタイルですが、CSSを切り換えるだけでサイドバーを右にしたり、両方にサイドバーを表示させるといったことができるのです。

246_2_tn 246_3_tn 246_1_tn

しかし、自分が思ったようなデザインになるようにはじめからCSSを書こうとすると、それはそれで大変な労力が伴います。ですので、GsCMSでは初めから何種類かの(主に色違いの)デザインのCSSを準備してあります。

246_4_tn 246_5_tn 246_6_tn

<スタイルシート(CSS)のリスト>

cp_css_listx

この画面では、初めから用意されているCSSと、自分で作成したCSSがリストアップされています。リストの各項目の意味は次の通りです。
  • ID CSSを識別するための番号です。
  • PV このアイコンをクリックすると、自分のサイトのトップページにそのCSSを適用した場合の見た目を別ウィンドウでプレビューできます。
  • 名前 CSSの名前です。システムで用意されているCSSはファイル名になっていますが、自分で作成するCSSの場合はわかりやすい名前を付けることができます。
  • メモ そのCSSに関するメモです。システムで用意されているCSSの場合は「現在利用しているテンプレートの標準CSSです」もしくは「テンプレートに用意されているCSSバリエーションです」となっています。自分で作成するCSSの場合はそのCSSがどのようなCSSなのかを後で判別しやすくするためなどに独自のメモを記述できます。
  • 使用 現在サイトで利用しているCSSが選択されています。利用したいCSSのラジオボタンをクリックすることによってCSSを切り換えることができます。クリックすれば直ちに切り替わります。
  • 編集 自分で作成したCSSの場合は「編集」リンクをクリックすることによって編集画面に移動できます。
CSSを削除したい場合は左端のチェックボックスにチェックを入れて「削除」ボタンをを押して下さい。ただし、自分が作成したCSSは削除できますが、初めからシステム側で用意されているCSSは削除できません。

<スタイルシート(CSS)の編集>

スタイルシートリストの「編集」リンクをクリックすることでこの画面へ移動し、自分で作成したCSSを編集することができます。

cp_css_edit_e

編集後、「保存」ボタンを押すと変更が反映され、保存されます。

フォームの各項目の意味は以下の通りです。

  • CSS ID CSSを識別するための番号です。自動で割り振られるため変更はできません。
  • CSSの名前 CSSの名前です。後で他のCSSと混同しないようわかりやすい名前を付けて下さい。
  • CSSソース CSSの本文、本体です。このテキストエリアに記述されたテキストがサイト全体を支配するCSSとして読み込まれます。
  • メモ そのCSSに関するメモです。このCSSがどのようなCSSなのかを後で判別しやすくするためなどに独自のメモを記述できます。
フォーム上部にある各リンクの動作は以下の通りです。
  • +新しいスタイルシートを追加する CSSを新規に作成するフォームへ移動します。
  • リストへ戻る CSSのリスト画面へ戻ります。
  • テンプレートのCSSを参照 現在利用しているCSSの中身を参照できます。詳しくは下の「スタイルシート(CSS)の新規作成」ページの説明を参照して下さい。
  • プレビュー 自分のサイトのトップページに現在編集中のCSSを適用した場合の見た目を別ウィンドウでプレビューできます。詳しくは下の「スタイルシート(CSS)の新規作成」ページの説明を参照して下さい。
この編集画面は、すでに「CSSソース」にCSSのソースとなるテキストが入っているかどうかを除いて下の「スタイルシート(CSS)の新規作成」画面と同じ動作をすると考えて下さい。

<スタイルシート(CSS)の新規作成>

スタイルシートリスト、もしくは編集画面で「+新しいスタイルシートを追加する」リンクをクリックすることでこの画面へ移動し、独自のCSSを作成することができます。


cp_css_edit

フォームの各項目の意味は以下の通りです。
  • CSS ID CSSを識別するための番号です。自動で割り振られるため指定はできません。
  • CSSの名前 CSSの名前です。後で他のCSSと混同しないようわかりやすい名前を付けて下さい。
  • CSSソース CSSの本文、本体です。このテキストエリアに記述されたテキストがサイト全体を支配するCSSとして読み込まれます。ただし、正しくないCSSソースを記述した場合、そのCSSをサイトに適用すればレイアウトが著しく崩れることがありますので、CSSについて詳しい知識がなければ安易にCSSをいじるべきではありません。
  • メモ 作成しようとするCSSに関するメモです。このCSSがどのようなCSSなのかを後で判別しやすくするためなどに独自のメモを記述できます。
フォーム上部にある各リンクの動作は以下の通りです。
  • +新しいスタイルシートを追加する CSSを新規に作成するフォームへ移動します。(同じフォームのページへ移動しますが、入力中の値は失われ、各入力エリアは空白となります)
  • リストへ戻る CSSのリスト画面へ戻ります。
  • テンプレートのCSSを参照 現在サイトに適用しているCSSの中身(ソース)を別ウィンドウで参照できます。
  • プレビュー 自分のサイトのトップページに現在編集中のCSSを適用した場合の見た目を別ウィンドウでプレビューできます。ただし、一旦保存してからでないと正しくプレビューすることはできません。新規作成の場合で、まだ保存していない時にこのリンクをクリックすると、テンプレート標準のCSSが参照されます。
ここで、「テンプレートのCSSを参照」についてもう少し詳しく説明します。上記の「テンプレートのCSSを参照」リンクをクリックすると、次のようなウィンドウが開きます。

cp_css_prev

これは現在サイトに適用されているCSSの中身(ソース)です。このように、テンプレートで用意されている標準CSS、あるいはCSSバリエーションのひとつを適用してい場合は適用中のCSSのソースを見ることができます。しかし、自分で作成したCSSをサイトに適用中の場合、自分の作成したCSSをこのウィンドウで参照することはできません。自分で作成したCSSをサイトに適用中の場合は、テンプレート標準のCSSが参照されますのでご注意下さい。

CSSを新規作成する場合、知識がある方なら、何もない空白のところからサイト全体に対してのCSSを作成するのは大変だということをおわかりだと思います。そこで、このようにして既存のCSSを参照し、そのソースをベースにしてカスタマイズすることで労力を削減しましょう。プレビューウィンドウのCSSソースはテキストエリア内に表示されますので、コピー&ペーストが容易に行えます。このソースをコピーし、新規CSS作成フォームの「CSSソース」にペーストして活用して下さい。


新しいCSSを作成したら、「スタイルシート(CSS)のリスト」画面に戻り、作成したCSSの「使用」ラジオボタンをクリックすれば即座にサイトへ適用されます。