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

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

このページの内容

製品には、既に初期設定でアイコン表示機能が追加されているものもあります。このページでは、以下の内容を並行してご案内します。

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

必要な知識

このページの説明は、「すぐ使えるCMS」の基本的な設定ができる方を対象にしています。このページをお読みになる前に、以下の事を一通り試して下さい。

「すぐ使えるCMS」の設置

「すぐ使えるCMS」製品を設置していない方は、ダウンロードして設置して下さい。

テスト登録

テストデータとして記事を1件登録して、管理画面が正常に動作して記事の登録ができることを確認して下さい。

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

「すぐ使えるCMS」のデザイン変更は全て「テンプレート」と呼んでいるHTMLファイルの編集で行え、表示幅、色、フォントなども変更できます。「すぐ使えるCMS」を始めてお使いになる方は、先に「デザイン変更方法」をご覧下さい。

NEWアイコン表示の原理

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

  1. アイコン用に1行テキスト項目を追加し、その項目にアイコンの種類をアルファベットで記録
  2. 記録したアイコンの種類をCSSのclass属性としてページに書き出す
  3. アイコン画像をそのクラスの背景画像として指定する

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

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

１．アイコンの準備

表示するアイコン画像は、予め作成して Webサイトにアップロードして下さい。なお、後で CSS に設定しますのでアイコンの幅と高さを記録しておいて下さい。

初期設定のある場合

アイコン表示機能が追加されている製品をお使いの方は、初期設定で webdir/images/ または webdir/parts/img/ ディレクトリにサンプルのアイコン画像が入っています。既存のファイルを変更しても、新しい名前で作成しても構いません。また、アップロードする場所は初期設定の場所以外でも構いません。

２．入力画面へのアイコン欄の追加

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

アイコン設定済製品をダウンロードした場合、既に設定がファイル内に含まれているはずですので、この追加作業は不要です。

アイコン入力欄の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コードを既存の項目の間に追加して下さい。

項目名に関する注意点

ここではアイコン用にカスタム項目の「linetext1」を追加していますが、既に「linetext1」を使ってしまっている場合は他のカスタム項目を使って下さい。

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

カスタム項目に関する詳細は、下記ページをご覧下さい。
「カスタム項目（自由項目）の追加方法」

製品による違いについて

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

  • 「アイコン」の項目名で1行テキスト項目を追加
  • 入力用の JavaScript が設定されたリンクを入力項目のそばに追加

３．入力画面でのアイコン設定の追加、変更、削除

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

４．スタイルシート（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に設定したクラス名、緑字部分はファイルの置き場所を変更した場合に変更して下さい。赤字部分は、アイコンを追加したら既存の設定をコピーして追加して下さい。不要なアイコンの設定は削除して下さい。

なお、下記はCSS設定例です。既にアイコンが表示される設定になっている製品の場合は、初期設定は下記例とは多少異なる場合がありますが、変更する必要はありません。既存の設定をコピーして使って下さい。パス（緑字部分）の設定はファイルがどこにあるかによって異なりますので、分かっていて変更するのでない限り、元ある設定をコピーして使って下さい。

コピー 
.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);
}
アイコンサイズの変更

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

※下記はCSS設定例です。同様の表示を探して変更して下さい。

コピー 
.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);
}

５．管理画面のタグ設定

お手元の製品にアイコンを追加している場合は、以下の3ファイルの編集も行って下さい。管理画面にアイコンを表示する設定です。

templates/admin/1.html に追加

以下の赤字部分を追加して下さい。表の見出し行に「アイコン」列を追加するのがポイントです。

製品やバージョンによって周辺の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>

６．アップロード

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

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

７．入力の確認

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

入力できない場合

入力画面のカテゴリのリンクをクリックしても入力欄にカテゴリ種別が入力されない場合は、以下の条件にあてはまるか確認して下さい。以下の条件に全て当てはまる場合、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;
    }
}

８．記事ページのアイコン表示

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

全一覧（目次）にアイコンを追加

「全一覧」（目次）のデザインは templates/article/article_list.txt で設定しています。このファイルを編集し、以下の赤字のように CSS のクラスとして「title」と「%_linetext1_%」を追加して下さい。

下記例ではクラス指定用に <span>タグを追加（太字部分）していますが、既存のタグに追加しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

コピー 
<span class="title %_linetext1_%">%_subject_%</span>

短い一覧（目次）にアイコンを追加

「短い一覧」（新着情報）のデザインは templates/article/short_list.txt で設定しています。このファイルを編集し、以下の赤字のように CSS クラス「title」と「%_linetext1_%」を追加して下さい。

下記例では既存のリンクタグに class 属性を足していますが、別途HTMLタグを追加してクラスを指定しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

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

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

詳細ページにアイコンを追加 ※3

「詳細ページ」のデザインは templates/article/article.html で設定しています。このファイルを編集し、以下の赤字のように CSS クラス「title」と「%_linetext1_%」を追加して下さい。

下記例では既存のヘディングタグに class 属性を足していますが、別途HTMLタグを追加してクラスを指定しても構いません。元のファイルのHTMLコードは製品によって異なりますので、適宜サイトのデザインに合わせて追加して下さい。

コピー 
<h1 class="title %_linetext1_%">%_subject_%</h1>

９．記事ページの表示の確認

アップロード

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

確認

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

関連記事

記事のカテゴリー分け方法

応用マニュアル CMSサイト設計
Webサイトのページに「カテゴリー」分類を付けたい場合に、「すぐ使えるCMS」ではどのような構成が可能かをご紹介します。

広告