小規模Webサイト向け CMS 「すぐ使えるCGI」のサポート情報

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

最終更新日: 2012-01-20

「すぐ使えるCGI」は管理画面、自動更新されるページともデザインを自由にカスタマイズできます。
デザインカスタマイズの際に外部スタイルシート(CSS)を使用する方法をご説明します。
すべての製品が対象です。

スタイルシートの準備

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

スタイルシートURLの例

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


テンプレートの編集

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

スタイルシートをWebページに反映させるには、HTMLページの <head> と </head> の間に以下のタグを追加します。
太字が追加部分です。赤字になっている部分はスタイルシート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>

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

テンプレートの編集

上のタグを、必要なテンプレートに追加していきます。

詳細記事ページ

記事ページ( webdir/1.html 、webdir/2.html ...)にスタイルシートを反映させるには、templates/article/article.html を編集して上記のタグを追加して下さい。

全一覧(目次ページ)

全一覧(目次ページ、webdir/index.html)にスタイルシートを反映させるには、templates/article/article_list.html を編集して上記のタグを追加して下さい。

短い一覧(新着情報)

短い一覧(新着情報、webdir/index_short.html)にスタイルシートを反映させるには、templates/article/short_list.html を編集して上記のタグを追加して下さい。

管理画面

管理画面にも外部スタイルシートを使用できます。

管理画面については、以下のファイルが編集対象です。

templates/admin/1.html、2.html、3.html、5.html、6.html


※ 6.html はパスワード認証を利用する場合のみ必要です。

タグを追加したら、元々ファイル内にある CSS 設定(「<STYLE type="text/css">(改行)<!--」 と 「-->(改行)</STYLE>」 の間の設定)を外部スタイルシートにコピーして、ファイル内からは削除して下さい。
HTMLタグに対して直接スタイルを設定している部分がありますので、コピーする際に不要な部分は削除して下さい。よく分からなければ、Webサイトのスタイルシートの先頭に挿入して下さい。

アップロード

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

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

再構築

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

確認

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

関連リンク

さらに詳しく