外部スタイルシート（CSS）ファイルを使用する方法（管理画面、自動更新ページ）

「すぐ使えるCMS」は管理画面、自動更新されるページともデザインを自由にカスタマイズできます。このページでは、デザインカスタマイズの際に外部スタイルシートファイル（CSS）を使用する方法をご説明します。

対象製品

全ての製品。

なお、初期設定で既に外部スタイルシートファイルを使用している製品もあります。

外部スタイルシートとは？

「外部スタイルシート」とは、CSS（Cascading Style Sheet、スタイルシート）のルールを、HTMLファイルのヘッダ（<head>）内に直接書くのではなく、<link> タグを使って別のファイルから読み込む方法です。

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

外部スタイルシートファイルを使うと、同じルールをいちいち各ページに書かずに使いまわしできます。Webサイト制作上、管理がまとめて行えるメリットがあります。

また、CSSフレームワークなど自分が定義したのではないライブラリを使う場合は、通常定義内容がかなり多い事から、外部ファイルからの読み込みが必要になります。

外部スタイルシートのデメリット

便利に使いまわせる一方、デメリットとして挙げられるのが、スタイルシートファイルへのリンク切れがあると大きく表示が崩れてしまう点です。また、HTMLページとは別に CSSファイルを読み込む必要があるので、1ページのみの読み込み速度を比較すれば、表示速度は遅くなると言われています。（ただし、同じサイト内で複数ページを閲覧する時は、HTMLヘッダに直接書く場合と比べて毎回のCSSの重複読み込みが不要になるのでこの限りではありません。）

CGIファイルからのスタイルシートリンクはリンク切れが起きやすいため、「すぐ使えるCMS」では Ver. 4.x まではテンプレート内に直接スタイルシート定義を記載していましたが、Ver. 5.0 からは外部スタイルシート方式に変更しました。

外部スタイルシートファイル利用の設定方法

スタイルシートファイルの準備

まずは既にWebサイトで使用しているスタイルシート（CSS）ファイルがある場合はそのファイルの URL を調べて下さい。まだファイルが無い場合は、サイトの適当な場所にファイルを新規作成して下さい。

スタイルシートURLの例

http://www.example.co.jp/common/css/style.css

スタイルシート追加用のタグ

スタイルシートをWebページに反映させるには、HTMLページの <head> と </head> の間に以下のように <link> タグを追加します。

太字が追加部分です。赤字部分は、スタイルシートURLからホスト名を除いたサーバルートからのパスを指定して下さい。

コピー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>%_subject_% (%_yyyy_%-%_mm_%-%_dd_%)</title>
<link rel="stylesheet" href="/common/css/style.css" type="text/css">
<link rel="alternate" type="application/rss+xml" title="記事一覧" href="new.xml">
</head>

※周辺のコードは異なる場合があります。太字部分の追加のみが変更内容です。

テンプレートファイルの編集

上の <link> タグを必要なテンプレートファイルに追加して下さい。

ページとテンプレートファイルの対応は以下の通りです。なお、必要に応じて別々の外部スタイルシートファイルを作成して指定しても構いません。

ページ		編集対象テンプレート（templates/ 配下）
詳細ページ	webdir/1.html、2.html、...	article/article.html
全一覧（目次）	webdir/index.html	article/article_list.html
短い一覧（新着情報）	webdir/index_short.html	article/short_list.html
管理画面	admin/admin.cgi	admin/1.html、2.html、3.html、5.html、6.html

CSSファイルの編集

アップロード

変更したテンプレートファイルとCSSファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/article/article.html
templates/article/article_list.html
templates/article/short_list.html
templates/admin/1.html、2.html、3.html、5.html、6.html
CSSファイル

再構築

管理画面の一覧の下にある「再構築（テンプレート変更反映）」ボタンを押して下さい。最新のテンプレートを反映したファイルが書き出されます。

確認

ブラウザのキャッシュを一旦クリアして表示の確認を行って下さい。