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

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

最終更新日: 2012-03-15

概要

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

対象製品

全ての製品。
まだ設置を行っていない方は製品をダウンロードの上「ステップ by ステップ」ガイドに沿って設置を行って下さい。

新着情報更新用の製品はこちら

設定方法

テンプレート 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>

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

サイト共通のスタイルシートで定義したCSSクラスを指定する事もできます。
この場合は templates/article/short_list.html にスタイルシートの呼び込みを指定して下さい。

編集例:CSSクラスを指定(templates/article/short_list.txt)

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

編集例:スタイルシートの指定(templates/article/short_list.html)

href 属性はサイトのスタイルシートのパスに書き換えて下さい。

<!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>

アップロード

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

templates/article/short_list.txt
templates/article/short_list.html (変更した場合)

再構築

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

確認

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

関連リンク

さらに詳しく