お蔵入り
カテゴリ毎にアーカイブのレイアウトを変えたい
上のサイトに書かれている「カテゴリーの記事一覧」をあるカテゴリ(cat1)に対してのみ適用し、それ以外のカテゴリ(cat2-5)についてはデフォルトのままとしたい場合、どの様に行えばよろしいのでしょうか。
カテゴリアーカイブページ内でjavascriptを用いて、カテゴリ名のタグ
<$CategoryName ESCAPE$>
がcat1と一致したか否かで
<CategorizedArticlesLoop>～</CategorizedArticlesLoop>内の記述を分岐させる、といった風にすれば良いのかな。。。と考えているのですが、どうもうまくいきません。
どうかご助言宜しくお願いいたします。
回答
コメント(7)
方針はいいと思いますが、どの辺りがうまくいかないのでしょうか？
そうですね。
あと、どのようにデザインを変えたいのかも教えてください。
コメントいただきながら返信が遅れ申し訳ございません。
以下、補足です。
■ アーカイブのデザイン
カテゴリ１：日付とタイトルを一覧表示、クリックで詳細記事へ
カテゴリ２：デフォルトのまま
■ デザインの変え方
アーカイブのHTMLテンプレートにて以下の関数を呼び出し、
<CategorizedArticlesLoop>～</CategorizedArticlesLoop> 内のデザインを変更する
<SCRIPT Language="JavaScript">
function chgHTML(){
var name = "<$CategoryName ESCAPE$>";
var tmp;
if(name != "カテゴリ１"){
tmp = '<CategorizedArticlesLoop><$ArticleTitle ESCAPE$><$ArticleBody$></CategorizedArticlesLoop>';
} else {
tmp = '<CategorizedArticlesLoop><$ArticleDate$><a href="<$ArticlePermalink$>" target="_parent"><$ArticleTitle ESCAPE$></CategorizedArticlesLoop>';
}
AAAA.innerHTML = tmp;
}</SCRIPT>
■ うまくいかない点
<script>～</script>内に書かれた <$ArticleBody$> などが空白になってしまう
■ 暫定策
<script>～</script> の外で無理矢理に
<div id="tmp2" name = '<CategorizedArticlesLoop>～</CategorizedArticlesLoop>'>とし、(この場合は<$ArticleBody$>内が空白にならない)
関数chgHTML内で
if(name != "カテゴリ１"){
tmp = tmp2.name;
} else {
:
:
としている暫定策は、IEでは期待通りに表示はされるのですが、当然(？)ながらブラウザによっては全く表示されません。
私自身javascriptに明るくないため、根本から勘違いしている可能性もあるのですが。。。
今更な返信にてまことに恐縮ですが、ご助言/ご指摘などいただければ幸いです。
宜しくお願いいたします。
申し訳ございません。単に私の勉強不足だった様です。。。
IE以外のブラウザでは getElementById と innerHTML を組み合わせる必要がありました。
■ chgHTML内
if(name != "カテゴリ１"){
tmp = document.getElementById("tmp2").innerHTML;
} else {:}
document.getElementById("AAAA").innerHTML = tmp;
■ HTML内
<div id="AAAA">
</div>
<div id="tmp2" style="visibility:hidden;">
<CategorizedArticlesLoop>:
</CategorizedArticlesLoop></div>
これで、id:AAAA のdivタグ内に<CategorizedArticlesLoop>～</CategorizedArticlesLoop>のテキストが表示されました。
(もしかしたらまだ問題が残っているかもしれませんが。。。)
次回からはもう少し勉強してからお伺いします。
失礼いたしました。
解決されたのならいいのですが。。。
全容が見えないのでアレなのですが、必要なものはidつきで全部divに書き出して、display/visibilityを書き換える方がトラブルは少ないような気がします。これだとたぶんシングルクォートとかあるとアレだったりしますよね。いえ、まぁ、現状でいいとは思います。。。
アドバイスいただき有難うございました。
シングルクォートによる文字化け/誤動作はテストした限りでは見つかりませんでしたが、display:noneの方がレイアウトの崩れもない様ですし、ご指摘いただいた方法でも試してみます。
拙い知識のため聊か呆れさせてしまったかもしれませんが、今後習熟を重ね、独力にて解決出来る様に尽力いたします。
重ねて、ご回答いただき有難うございました。
