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

新着情報を IFRAME でホームページに表示する方法

最終更新日: 2015-01-15
インラインフレーム(<iframe>)での新着情報の表示

CMS「すぐ使えるCGI」で新着情報として書き出した「短い一覧」を、<iframe>(インラインフレーム、アイフレーム) でホームページに組み込む方法を紹介します。

基本的な設定方法の他、<iframe> を使った時に起こりがちな問題(スクロールバーの表示、直接アクセスされる、古いものがキャッシュされる、等々)の調整方法もご紹介します。

※ このページでは、新着情報を「組込み表示する方法」をご説明します。新着情報を書き出すツールのご案内は下記ページからご覧下さい。

新着情報更新ツール(CMS)デモ一覧

ホームページへの新着情報の表示方法

ホームページへ「すぐ使えるCGI」から書き出した新着情報を表示するには、下記の手順で設定して下さい。

ホームページへの<iframe>の追加

新着情報を表示させたいホームページ(Webサイトのトップページなど)に以下のコードを追加して下さい。

青字の src 属性の部分は「すぐ使えるCGI」で書き出した「短い一覧」の場所に変更して下さい。src 属性以外も自由に調整して下さい。CSSは style属性の内容を変更しても、style 属性の代りに class属性で指定してもOKです。

<iframe>タグの例

<iframe
    style="border: 0; width: 270px; height: 300px; margin:0; padding: 0;"
    scrolling="no"
    frameborder="no"
    src="webdir/index_short.html"
>(IFRAME 機能を有効にして下さい)</iframe>

これでホームページ内に新着情報(短い一覧)が表示されます。引き続き下の「テンプレート編集」を行って下さい。

「すぐ使えるCGI」側の設定

<iframe> でホームページに新着情報を表示する場合、「すぐ使えるCGI」側にいくつか調整が必要な点があります。下記の3点を調整して下さい。

1. リンクのウィンドウ調整

初期設定のテンプレートのままだと、表示された新着情報(短い一覧)から内容ページへのリンクがインラインフレーム内に表示されてしまいます。この問題の修正のためには、templates/article/short_list.txt を編集して下さい。

リンクのウィンドウ調整の概要

テンプレート内に含まれているリンクに、target 属性(ターゲット属性)を追加して下さい。どのウィンドウに開くか(同じウィンドウまたは新規ウィンドウ)によっても追加するコードが違いますので、下記例からご希望の方を選んで赤字部分を追加して下さい。

【ご注意下さい】使用する製品によって編集前テンプレートが微妙に異なりますので、赤字の部分のみ変更を加えて下さい。

編集前

<!-- 製品の文字コードと同じ で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_% <a href="index.html#%_d_%">%_subject_%</a><br>

同じウィンドウに開く場合の編集例

<!-- 製品の文字コードと同じ で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_%
<a href="index.html#%_d_%" target="_parent" >%_subject_%</a><br>

新しいウィンドウに開く場合の編集例

<!-- 製品の文字コードと同じ で保存して下さい -->
%_yyyy_%-%_mm_%-%_dd_%
<a href="index.html#%_d_%" target="_blank" >%_subject_%</a><br>

2. メタタグの調整(頻繁に更新する場合)

インラインフレームで組み込まれた内容はページ表示時にキャッシュされて古いものが表示されてしまう場合があります。頻繁に新着情報を更新する場合は templates/article/short_list.html を編集してキャッシュを制限するためのメタタグを追加して下さい。赤字が追加部分です。

【ご注意下さい】使用する製品によって編集前テンプレートが微妙に異なりますので、赤字の部分のみ変更を加えて下さい。

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">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>記事一覧</title>
</head>
<body bgcolor="#ffffff">

<!-- article list : generate from short_list.txt -->
%_article_list_%

</body>
</html>

3. 件数の調整(3件以外に設定する場合)

ホームページに表示する新着情報の件数は、初期設定では3件になっています。これを変更するには、admin/admi.cgi の環境変数を変更して下さい。200行目付近に設定場所があります。

admin/admin.cgi の編集箇所

#--------------------------------------------------------[line 200]--
# 短い一覧に表示する件数
#--------------------------------------------------------------------
# 短い一覧に書き出す記事件数を設定して下さい。
# 0 にすると全件を書き出します。

$conf{short_list_no} = 3;


5件表示したい場合は以下のように変更して下さい。

$conf{short_list_no} = 5;


アップロード

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

templates/article/short_list.txt
templates/article/short_list.html (編集した場合)
admin/admin.cgi (編集した場合)

再構築

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

確認

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

<iframe> の利用でよく起きる問題への対応

インラインフレームの利用でよく起きる以下の問題への対応については、それぞれリンク先のページをご覧下さい。

スクロールバーの調整

短い一覧が長くなってしまった場合もインラインフレームのスクロールバーを出さないようにする方法は下記ページをご参照下さい。

iframe のスクロールバーを出さない方法(高さを変更)

<iframe> ページへの直接アクセスを回避する

検索エンジンなどから <iframe> 内のページに直接アクセスされてしまった場合にメインのページにジャンプする方法は下記ページをご参照下さい。

インラインフレームへの直接アクセスを回避する方法

関連リンク

さらに詳しく