CMS「すぐ使えるCGI」の開発者がご質問にお答えします

 

続・記事がない場合の表示のカスタマイズ (No. 1263)

回答日: 2012-11-22
<< 掲示板一覧  >> 質問する

質問

1261のご回答ありがとうございます。

実は、以下のような運用しています。

トップ(A・B・Cからの短い記事を混合)
 |-- A (Aの最新記事のみ表示)
 |-- B (Bの最新記事のみ表示)
 |-- C (Cの最新記事のみ表示)

A-C各ページは、常に1つの記事を上げ下げするように
使っているので、「最新記事」をphpで読み込みしています。

トップでは、混合しているので教えていただいた方法で実装できそうでしたが、
A-C各ページは、元々jsを挟んでません。

<?php
readfile("imgup_webdir/new.html");
?>

という感じにして、読み込みしているだけです。

なので、混合ではなく単体利用で、
何も記事がなかった場合、「お知らせするニュースはありません」のような表示
ができたら良いなぁと考えてます。

可能そうでしたら、教えてください。

※何度か質問させてさせていただいてますが、いつも的確なご返答感謝しています。
御礼を書き込む箇所がないので、こちらに書かせていただきました。
投稿日時: 2012-11-22 18:33

回答

お問合せありがとうございます。ご感想も嬉しく頂戴致しました。

(このご質問は以下の続きです)
http://sugutsukaeru.jp/bbs/1261/


ご質問の件ですが、読み込む対象のファイルが減ってもPHPで読み込むのであれば全く同じ方法で「お知らせするニュースはありません」が表示できます。

3か所編集になってお手数ですが、A,B,C 各ページもトップページと同じように編集して下さい(下記2か所)。

■編集点1:id属性の追加

新着を読み込んでいる部分に id属性「id="mergedlist"」が無かったら追加して下さい。

==============================
<ul id="mergedlist"> <!-- id 属性が必要 -->
<?php
readfile("imgup_webdir/index_short.html");
?>
</ul>
==============================


■編集点2: JavaScript の追加
トップページと同じJavaScript を、</body>の直前に追加して下さい。
先ほどご連絡した内容と同じですが、全体としては以下のようになっていると思います。

==============================
<!-- body タグの終了直前に追加 ここから -->
<script type="text/javascript"><!--

var ListPart = document.getElementById('mergedlist');
var ListIds = new Array();
for (var i=0; i<ListPart.childNodes.length; i++){
    var LItem = ListPart.childNodes.item(i);
    if (LItem.nodeType==1 && LItem.id && LItem.id.indexOf("news",0)==0){
        ListIds.push(LItem.id);
    }
}
for (var i=0; i<ListIds.length; i++){
    document.getElementById(ListIds[i]).style.display = 'none';
}
ListIds = ListIds.sort().reverse();
if (ListIds.length && 0 < ListIds.length){
    for (var i=0; i<ListIds.length; i++){
        var newnode = document.getElementById(ListIds[i]).cloneNode(true);
        newnode.style.display = 'list-item';
        // short_list.txt の編集で class を指定したのが
        // tr や div の時は「list-item」の代わりに
        // 「block」にする。
        ListPart.appendChild(newnode);
    }
} else {
    // short_list.txt の編集で class を指定したタグを指定。(下記だと "li" )
    var newnode = document.createElement("li");

    //下の1行で表示する内容を指定。タグはあっても無くても可
    newnode.innerHTML = '<span style="color: gray;">お知らせするニュースはありません</span>';

    newnode.style.display = 'list-item';
    // short_list.txt の編集で class を指定したのが
    // tr や div の時は「list-item」の代わりに
    // 「block」にする。
    ListPart.appendChild(newnode);
}

-->
</script>
<!-- body タグの終了直前に追加 ここまで -->
==============================
回答日: 2012-11-22

さらに詳しく