短い一覧（新着情報）の文字のフォントサイズや色を変える/太字にする方法

「すぐ使えるCMS」で書き出される短い一覧（新着情報、webdir/index_short.html）の文字サイズを変えたり太字（Bold、ボールド）にする方法を紹介します。色の変更も同様の方法で行えます。

直接設定する方法

テンプレート templates/article/short_list.txt の編集

新着情報（短い一覧）のデザインテンプレートファイルは templates/article/short_list.txt です。このファイルをテキストエディタで開いて、フォントスタイル設定のタグを足して下さい（赤字部分）。

【注意点】元のファイルの内容は製品によって異なります。スタイル設定のみ追加して下さい。

編集例：太字にする

コピー

%_yyyy_%-%_mm_%-%_dd_% <a href="%_to_index_%#%_d_%">
<b>%_subject_%</b></a><br>

編集例：フォントサイズを設定

コピー

%_yyyy_%-%_mm_%-%_dd_% <a href="%_to_index_%#%_d_%">
<span style="font-size: 1.5em">%_subject_%</span></a><br>

編集例：色の変更

コピー

%_yyyy_%-%_mm_%-%_dd_% <a href="%_to_index_%#%_d_%">
<span style="color: green">%_subject_%</span></a><br>

アップロード

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

templates/article/short_list.txt

再構築

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

確認

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

スタイルシートを利用する場合

外部スタイルシート（CSS）ファイルで設定したCSSクラスを使ってスタイル指定する事もできます。

編集例：CSSクラスを指定（templates/article/short_list.txt）

外部スタイルシートを使う場合は、templates/article/short_list.txt にはクラスを指定して下さい。

コピー

%_yyyy_%-%_mm_%-%_dd_%
<a href="%_to_index_%#%_d_%" class="listlink">%_subject_%</a><br>

Webサイトで定義済のスタイルシーを使う場合

導入先のWebサイトで既に使用中のスタイルシートファイルを読み込む場合は、 templates/article/short_list.html にスタイルシート読み込み用の <link> タグ（赤字部分）を追加して下さい。href属性は、ファイルの場所に合わせて書き換えて下さい。

編集例：スタイルシートファイルの指定（templates/article/short_list.html）

コピー

<!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>記事一覧</title>
<link rel="stylesheet" href="/common/css/style.css" type="text/css">
</head>
<body bgcolor="#ffffff">
 
<!-- article list : generate from short_list.txt -->
%_article_list_%
 
</body>
</html>

初期設定のスタイルシートを使う場合

「すぐ使えるCMS」の初期設定で外部スタイルシートを利用している製品もあります。この場合、初期設定のスタイルシートに追加や変更を加えてデザインを変更する事ができます。

初期設定のスタイルシートの場所

初期設定のスタイルシートの場所は、 templates/article/short_list.html に指定のある <link> タグのhref 属性から割り出して下さい。通常は、 webdir/parts/css/ ディレクトリ内にあります。

初期設定のスタイルシートの場所の例

コピー

<link href="./parts/css/site.css" rel="stylesheet" media="screen">

コピー

<link href="./parts/css/sugu-site.css" rel="stylesheet" media="screen">

既存の設定の調べ方

製品がどのようにスタイル設定されているかは、下記の方法で調べて下さい。
CSSの設定を調べる方法（Web開発者ツールの使い方）

アップロードと再構築

アップロードから先の手順は、直接編集する場合と同じです。変更したファイルをサーバの同じ位置に上書きアップロードした後、再構築（テンプレート変更反映）して表示を確認して下さい。

templates/article/short_list.txt
templates/article/short_list.html (変更した場合)
スタイルシートファイル