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

新着情報にNEWアイコンを表示する方法

最終更新日: 2016-06-21
新着情報に[NEW]アイコンを表示

CMS「すぐ使えるCGI」を使って更新する新着情報、お知らせ、ブログなどに「NEW」アイコンを付ける方法をご紹介します。「NEW」に限らず、カテゴリー分けのアイコンなども表示可能です。

このページから設定済の製品がダウンロードできる他、お手元のダウンロード済み製品にアイコン表示を追加する方法をご紹介します。Ver. 4.6 以上の製品で対応しています。

アイコン設定済の「すぐ使えるCGI」製品

設定済みのサンプルが用意されています。ご希望に合う製品がある方は、これらをダウンロードしてアイコン画像の入れ替えやデザイン調整をしてお使い下さい(変更方法をこのページでご説明します)。

ブログタイプ(目次+詳細ページ)

NEWアイコン付ブログ

記事1件ごとに別々のページを作り、目次からジャンプする構成です。新着情報、目次、記事ページの3か所とも、アイコンを表示する事ができます。長めの「お知らせ」の他、ブログなどに使えます。

「添付ファイル付 ウェブページ更新ツール 大容量版 Ver. 5.0」にアイコンを付ける設定をしたものです。

ホームページ表示デモ 管理画面デモ

NEWアイコン付ブログ 管理CMS ダウンロード ※お試し利用は1ヶ月間無料です。

タイムラインタイプ(お知らせ用)

NEWアイコン・カテゴリーアイコン付きお知らせホームページ

「タイムラインタイプ」とは1ページに次々と短い内容を表示するパターンのものです。「お知らせ」欄での利用を想定しています。



「添付ファイル付 ウェブページ更新ツール 大容量版 Ver. 5.0」をタイムラインタイプに変更し、アイコンを付ける設定をしたものです。

ホームページ表示デモ 管理画面デモ

NEWアイコン付お知らせ 管理CMS ダウンロード ※お試し利用は1ヶ月間無料です。

このページの内容

このページでは、以下の内容をご案内します。

  • お手元の製品に一からアイコン表示を足す方法
  • アイコン画像の追加・削除・変更方法

準備:「すぐ使えるCGI」の設置

「すぐ使えるCGI」製品をダウンロードしたら、ダウンロードが終わったページからリンクしている「ステップ by ステップガイド」をご覧になりながら製品を設置して下さい。

テスト登録

「ステップ by ステップガイド」手順の「実行テスト」まで行ったら、テストデータとして記事を1件登録して、管理画面が正常に動作して記事の登録ができることを確認して下さい。

デザイン変更の基本的な方法

「すぐ使えるCGI」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行え、表示幅、色、フォントなども変更できます。「すぐ使えるCGI」を始めてお使いになる方は、先にダウンロードした製品の doc/index.html からリンクしている「デザイン変更チュートリアル」をご覧下さい。

NEWアイコン表示の原理

このページでご紹介しているNEWアイコンの表示方法は以下の通りです。

  1. アイコン用に1行テキスト項目を追加し、その項目にアイコンの種類をアルファベットで記録
  2. 記録したアイコンの種類をCSSのclass属性としてページに書き出す
  3. アイコン画像をそのクラスの背景画像として指定する
「すぐ使えるCGI」のバージョンやカスタマイズ状況によって、アイコン画像の追加や変更の具体的な方法は異なります。もしお手元の製品ファイル内に下記で説明するファイルや記述が見つからない場合は、同様の設定をファイル内検索等で探して下さい。

アイコンの変更と追加、削除

アイコンを変更、追加、削除する場合は以下のように行って下さい。

1.アイコンの準備

このページからダウンロードできる設定済製品をダウンロードした場合、初期設定で webdir/images/ または webdir/parts/img/ ディレクトリにサンプルのアイコン画像が入っています。

追加のアイコンを表示したり表示するアイコン画像を変更する場合は、予め作成して Webサイトにアップロードして下さい。既存のファイルを変更しても、新しい名前で作成しても構いません。なお、後で CSS に設定しますのでアイコンの幅と高さを記録しておいて下さい。また、アップロードする場所は初期設定の場所以外でも構いません。

2.入力画面へのアイコンの追加、変更、削除

NEWアイコン入力欄

アイコンを追加・変更・削除するには、まずはアイコンの入力欄を作ります。templates/admin/2.html を編集して下さい。

アイコン設定済製品をダウンロードした場合、 templates/admin/2.html の中に以下のようなHTMLコードがあります。入力欄部分に対応するHTMLコードで、アイコン用の項目と、その項目にリンクのクリックで選んだアイコン種別を入力するための JavaScript が設定してあります。

アイコン入力欄のHTMLコード

<TR>
<TH CLASS="titem">アイコン※</TH>
<TD CLASS="contents"><INPUT name="linetext1" id="linetext1" type="text" size="80" maxlength="50" VALUE="%_linetext1_%" class="imeauto"><br>
[<a href="javascript: set_value('linetext1', 'new')">NEW</a>]
[<a href="javascript: set_value('linetext1', 'important')">重要</a>]
[<a href="javascript: set_value('linetext1', 'newcategory')">追加カテゴリ名</a>]
<a href="javascript: set_value('linetext1', '')">なし(削除)</a>
</TD>
</TR>
お手元の製品にアイコン表示を追加している場合は、このHTMLコードを既存の項目の間に追加して下さい(※1)。なお、ここではアイコン用にカスタム項目の「linetext1」を追加していますが、既に「linetext1」を使ってしまっている場合は他のカスタム項目を使って下さい。カスタム項目に関する詳細は、下記ページをご覧下さい。

「カスタム項目(自由項目)の追加方法」

※1 既に追加できるカスタム項目が非表示の状態でテンプレートに含まれている場合もあります。「linetext1」というキーワードでファイル内検索をして既に設定が無いかを確認してから編集して下さい。また、製品やバージョンによって周辺のHTMLコードが異なる場合があります。その場合は、周辺のHTMLコードをコピーして同様に設定して下さい。

アイコン設定の調整

このHTMLコードが見つかったら(または追加したら)、1で準備したアイコンに合わせて、青字および黒太字の部分を変更して下さい。また、1でアイコンを増やした場合は、行をコピーして赤字のように追加のアイコンを設定して下さい。不要なアイコンの設定は削除して下さい。青字部分は後で CSS クラスとして指定しますので、半角アルファベットのみで指定して下さい。

製品による違いについて

なお、製品とバージョンによって具体的なHTMLコードが異なります。例えば、Ver. 5.0 からはフォーム項目がテーブル(<tr>など)に入っていません。変更の要点は以下の3点ですので、既存のHTMLコードをうまくコピー&ペーストして設定をして下さい。

  • 「アイコン」の項目名で1行テキスト項目を追加
  • 入力用の JavaScript が設定されたリンクを入力項目のそばに追加
  • 表示したいアイコン種類に応じて入力用のリンクを調整

3.スタイルシート(CSS)の設定

次にスタイルシート(CSS)の設定をします。先ほど青字で示したクラス名に、背景画像を設定していく作業です。

CSSが設定してあるファイルの場所

初期設定のCSSの記述がどのファイルに書かれているかが、製品とバージョンによって異なります。下記の中から、お手元の製品の状況と合致するファイルを編集して下さい。

  • webdir/parts/css/sugu-219-new-icon.css にまとめてある(Ver. 5.0以降)
  • webdir/parts/css/common.css にまとめてある(2014-2015年頃公開のレスポンシブWebデザインのサンプル)
  • 表示が必要なページのテンプレートに直接記載(上記以外。ページとファイルの対応は後述 ※2 の通り。)

ご自身で設定を変更する際に、この設定を保持しても、別の場所に書き換えても構いません。通常のCSS編集で行えることが可能です。

※2 テンプレートとページの対応

CSSの設定が直接各テンプレートファイルに記載してある場合、画面とファイルの対応は下記の通りです。設定変更時は全てのファイルを編集して下さい。新たに追加する場合は <head> 内にある<style type="text/css"> と </style> の間にスタイル設定を追加して下さい。もし既存のスタイル設定が無ければ <style> タグも追加して下さい。

アイコンを表示するページ 編集対象テンプレート
管理画面 一覧 admin/admin.cgi templates/admin/1.html
管理画面 確認画面 admin/admin.cgi templates/admin/3.html
短い一覧(新着情報) webdir/index_short.html templates/article/short_list.html
全一覧(目次) webdir/index.html templates/article/article_list.html
詳細ページ(※3) webdir/1.html、2.html... templates/article/article.html

※3 製品によってはこのページはありません。

CSS編集内容

CSS編集の要点は下記の通りです。

既にアイコンが表示される設定になっている製品の場合は元々のファイルに初期設定のアイコンの設定がある筈です。その設定は下記例とは多少異なる場合がありますので、お手元のファイルの設定の方をコピーしてご自身の設定をして下さい。

共通の設定(手元の製品にアイコンを追加している場合)
お手元の製品にアイコンを追加している場合、以下のCSS設定をまず追加して下さい。

/* 管理画面 */
.icon{
	display: inline-block;
	width: 40px; /* アイコン画像ファイルのサイズに合わせて指定 */
	height: 20px; /* アイコン画像ファイルのサイズに合わせて指定 */
	margin-top: 0.35em;
	background-repeat: no-repeat;
	background-position: left center;
}

/* 記事画面 */
.title {
	background-repeat: no-repeat;
	background-position: left center;
}
アイコンファイルの変更、追加、削除

次に、アイコンファイルの指定をします(下記CSSコード)。青字部分はアイコンのファイル名やJavaScriptに設定したクラス名、ファイルの置き場所を変更した場合に変更して下さい。赤字部分は、アイコンを追加したら既存の設定をコピーして追加して下さい。不要なアイコンの設定は削除して下さい。

※下記はHTMLコード例です。同様の表示を探して変更して下さい。パスの設定はファイルがどこにあるかによって異なりますので、分かっていて変更するのでない限り、元ある設定をコピーして使って下さい。

.new {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/new.png);
}
.important {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/important.png);
}
.newcategory {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/newcategory.png);
}
アイコンサイズの変更

青字部分はアイコンのサイズを変えた時に変更して下さい。

※下記はHTMLコード例です。同様の表示を探して変更して下さい。

.icon{
	display: inline-block;
	width: 40px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
}


.new {
	padding-left: 45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/new.png);
}
.important {
	padding-left:  45px; /* 表示するアイコンの幅+余白 */
	background-image: url(../img/important.png);
}

4.管理画面のタグ設定

お手元の製品にアイコンを追加している場合は、以下の3ファイルの編集も行って下さい。

templates/admin/1.html に追加

以下の赤字部分を追加して下さい。元のファイルのHTMLコードが異なる場合は、赤字部分のみ追加すればOKです。また、製品やバージョンによって周辺のHTMLコードが異なる場合があります。その場合は、周辺のHTMLコードをコピーして同様に設定して下さい。

<TABLE border="0" cellspacing="1" cellpadding="6" WIDTH="750" BGCOLOR="#333333">
<TR>
<TH CLASS="theader">日付</TH>
<TH CLASS="theader" nowrap>アイコン</TH>
<TH CLASS="theader">タイトル</TH>
<TH CLASS="theader">編集</TH>
<TH CLASS="theader">削除</TH>
<TH CLASS="theader" colspan="2">順番</TH>
</TR>

templates/admin/1.txt に追加

以下の赤字部分を追加して下さい。元のファイルのHTMLコードが異なる場合は周辺のHTMLコードをコピーして同様に設定して下さい。<span> - </span> にアイコンが表示されます。

<TR>
<TD CLASS="contents" NOWRAP>%_yyyy_%/%_mm_%/%_dd_% (%_dayname_%)</TD>
<TD CLASS="button"><span class="icon %_linetext1_%"></span></TD>
<TD CLASS="contents">%_subject_%</TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,1,2,%_n_%)" value="編集"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,2,3,%_n_%)" value="削除"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,3,4,%_n_%)" value="上へ"></TD>
<TD CLASS="button"><INPUT type="submit" onClick="set_param(%_d_%,4,4,%_n_%)" value="下へ"></TD>
</TR>

templates/admin/3.html に追加

以下のHTMLコードを既存の項目の間に追加して下さい。製品やバージョンによって周辺のHTMLコードが異なる場合があります。その場合は、周辺のHTMLコードをコピーして同様に設定して下さい。<span> - </span> にアイコンが表示されます。

<TR>
<TH CLASS="titem">アイコン</TH>
<TD CLASS="contents"><span class="icon %_linetext1_html_%"></span></TD>
</TR>

5.アップロード

以上の編集が終わったら、変更したテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。

templates/admin/1.html
templates/admin/1.txt
templates/admin/2.html
templates/admin/3.html

6.入力の確認

管理画面から、新しいアイコンが登録できる事を確認して下さい。

入力できない場合

入力画面のカテゴリのリンクをクリックしても入力欄にカテゴリ種別が入力されない場合は、以下の条件にあてはまるか確認して下さい。以下の条件に全て当てはまる場合、templates/admin/2.html を再度編集して、ページ末尾の script 終了タグ (</script>) の直前に以下の JavaScript コードを追加して下さい。

確認する該当条件
  • お手元の製品にアイコンを追加している
  • 製品のバージョンが Ver. 4.8 以下
追加する JavaScript コード
function set_value(MyName, MyItem, IfAppend){
    var FM = document.forms[0];
    switch(IfAppend){
        case 1: //追記
            eval("FM."+MyName+".value += '"+MyItem+"'");
            break;
        default: //入れ替え(デフォルト)
            eval("FM."+MyName+".value = '"+MyItem+"'");
            break;
    }
}


7.記事ページのアイコン表示

お手元の製品にアイコンを追加している場合は、この段階ではまだ記事ページ側にはアイコンが表示されていません。アイコンを表示させるには、以下の3つのファイルの編集も行って下さい。

templates/article/article_list.txt に追加

templates/article/article_list.txt は「全一覧」(目次)のデザインを設定しています。以下の赤字のように CSS のクラスとして「title」と「%_linetext1_%」を追加して下さい。下記例ではクラス指定用に <span>タグを追加(太字部分)していますが、既存のタグに追加しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

<span class="title %_linetext1_%">%_subject_%</span>

templates/article/short_list.txt に追加

templates/article/short_list.txt は「短い一覧」(新着情報)のデザインを設定しています。以下の赤字のように CSS クラス「title」と「%_linetext1_%」を追加して下さい。下記例では既存のリンクタグに class 属性を足していますが、別途HTMLタグを追加してクラスを指定しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

【注意点】黒太字の href 属性の内容は製品によって異なりますので、このままコピーしないで下さい。

<a href="xxx" target="_top" class="title %_linetext1_%">%_subject_%</a>

templates/article/article.html に追加 ※3

templates/article/article.html は「詳細ページ」のデザインを設定しています。以下の赤字のように CSS クラス「title」と「%_linetext1_%」を追加して下さい。下記例では既存のヘディングタグに class 属性を足していますが、別途HTMLタグを追加してクラスを指定しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

<h1 class="title %_linetext1_%">%_subject_%</h1>

8.記事ページの表示の確認

アップロード

編集が終わったら、変更したテンプレートファイルをサーバの同じ位置に上書きアップロードして下さい。

確認

管理画面の一覧の下にある「再構築(テンプレート変更反映)」ボタンを押して下さい。再構築後はキャッシュをクリア後再読み込みして表示を確認して下さい。

関連リンク

さらに詳しく