のテーマ調整
Ver 20080717 以降では、デフォルトで携帯対応レンダー専用のテーマセット(ktai_default)を使用し、各モジュールのテーマ下テンプレートに対応しています。
携帯対応レンダー専用のテーマセットを使用する場合は、テーマの調整は不要です。
一方、携帯対応レンダー専用のテーマセットを使用しない場合は、設定で
// 携帯用テーマセット
$this->k_tai_conf['themeSet'] = '';
とします。その場合は、通常のテーマセットが使用されます。
通常使用するテーマセットが DIVレイアウトの場合は、そのままでもある程度、携帯で見やすい形で表示されますが、TABLE レイアウトの theme では、コンテンツ部分を先に表示したりと、HTMLの再構成をしないと、実用的でない場合があります。
HTML の再構成をする場合は、携帯対応レンダーが適切に部分抽出できるように、簡単なタグを仕込む必要があります。
HTML 再構成用タグの説明
使用できるタグは、設定項目にある「HTML再構築用タグ設定」のキーワードを利用したタグなります。規定値では、次のタグが使えます。
開始タグ | 終了タグ |
---|
<!--headerlogo--> | <!--/headerlogo--> |
<!--headerbar--> | <!--/headerbar--> |
<!--breadcrumbs--> | <!--/breadcrumbs--> |
<!--leftcolumn--> | <!--/leftcolumn--> |
<!--centerCcolumn--> | <!--/centerCcolumn--> |
<!--centerLcolumn--> | <!--/centerLcolumn--> |
<!--centerRcolumn--> | <!--/centerRcolumn--> |
<!--content--> | <!--/content--> |
<!--rightcolumn--> | <!--/rightcolumn--> |
<!--footerbar--> | <!--/footerbar--> |
<!--HypKTaiIgnore--> | <!--/HypKTaiIgnore--> |
"<!--HypKTaiIgnore-->" 以外のそれぞれのタグで囲まれた範囲が、/class/Hyp_common/ktairender/templates/default ディレクトリ内にある
- header.html [ページヘッダ]
- body.html [コンテンツ部分(必要に応じて分割され、ページナビゲーションが付加されます)]
- footer.html [ページフッタ]
各ファイルの該当キーワードタグと置換され、「HTML再構築用タグ設定」の 各キーの 'above' の内容が前方に、'below' の内容が後方に挿入されます。
例外として、"<!--HypKTaiIgnore-->" と "<!--/HypKTaiIgnore-->" で囲まれた範囲は、出力から除去されます。*1
例えば、XOOPS Cube Legasy の "cube_default" テーマにおいて、"leftcolumn" を設定する場合は、theme.html に、次のような箇所があると思います
| <{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
</td>
<{/if}>
|
これを次のようにします。
| <{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
</td>
<{/if}>
|
注意すべき点は、<{foreach ... }> 〜 <{/foreach}> を崩さないようにすることです。
また、携帯対応レンダーを使っている場合は、Smarty変数の $smarty.const.HYP_K_TAI_RENDER が TRUE になりますので、この値で、場合分けができます。
このようにして、携帯対応レンダー用タグを仕込んだ "cube_default" テーマの theme.html が theme.html です。参考にお使いください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
-
|
!
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<head>
<meta http-equiv="content-type" content="text/html; charset=<{$xoops_charset}>" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<meta name="robots" content="<{$xoops_meta_robots}>" />
<meta name="keywords" content="<{$xoops_meta_keywords}>" />
<meta name="description" content="<{$xoops_meta_description}>" />
<meta name="rating" content="<{$xoops_meta_rating}>" />
<meta name="author" content="<{$xoops_meta_author}>" />
<meta name="copyright" content="<{$xoops_meta_copyright}>" />
<meta name="generator" content="XOOPS Cube" />
<link rel="shortcut icon" href="<{$xoops_url}>/favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/.css" />
<{* If you change standard Legacy theme structure removing style*.css from the theme directory, you have to remove the following; *}>
<{if $xoops_themecss != ""}>
<link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<{/if}>
<title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
<{$xoops_module_header}>
<script type="text/javascript">
</script>
</head>
<body>
<div class="outline">
<table cellspacing="0">
<tr>
<td class="headerlogo">
<a href="<{$xoops_url}>/"><img src="<{$xoops_imageurl}>images/logo.gif" width="200" height="100" alt="<{$xoops_sitename}>" title="<{$xoops_sitename}>" /></a></td>
<td class="headerbanner"><{$xoops_banner}></td>
</tr>
</table>
<{if $smarty.const.HYP_K_TAI_RENDER}>
<center>
<{/if}>
<div class="headerbar">Welcome <{if $xoops_isuser}><{$xoops_uname}><{else}>Guest<{/if}> </div>
<{if $smarty.const.HYP_K_TAI_RENDER}>
[ <a href="#leftcolumn">Main menu</a> ]
</center>
<{/if}>
<table cellspacing="0">
<tr>
<{if $xoops_showlblock == 1}>
<td id="leftcolumn" class="leftcolumn">
<{if $smarty.const.HYP_K_TAI_RENDER}><div id="leftcolumn"><{/if}>
<{foreach item=block from=$xoops_lblocks}>
<div class="leftblockTitle"><{$block.title}></div>
<div class="leftblockContent"><{$block.content}></div>
<{/foreach}>
<{if $smarty.const.HYP_K_TAI_RENDER}></div><{/if}>
</td>
<{/if}>
<td id="centercolumn" class="centercolumn">
<{if $xoops_showcblock == 1}>
<table cellspacing="0">
<tr>
<td class="centerCcolumn" colspan="2">
<{foreach item=block from=$xoops_ccblocks}>
<div class="centeroutline">
<div class="centerCblockTitle"><{$block.title}></div>
<div class="centerCblockContent"><{$block.content}></div>
</div>
<{/foreach}>
</td>
</tr>
<tr>
<td class="centerLcolumn">
<{foreach item=block from=$xoops_clblocks}>
<div class="centeroutline">
<div class="centerLblockTitle"><{$block.title}></div>
<div class="centerLblockContent"><{$block.content}></div>
</div>
<{/foreach}>
</td>
<td class="centerRcolumn">
<{foreach item=block from=$xoops_crblocks}>
<div class="centeroutline">
<div class="centerRblockTitle"><{$block.title}></div>
<div class="centerRblockContent"><{$block.content}></div>
</div>
<{/foreach}>
</td>
</tr>
</table>
<{/if}>
<div class="content"><{$xoops_contents}></div>
</td>
<{if $xoops_showrblock == 1}>
<td id="rightcolumn" class="rightcolumn">
<{foreach item=block from=$xoops_rblocks}>
<div class="rightblockTitle"><{$block.title}></div>
<div class="rightblockContent"><{$block.content}></div>
<{/foreach}>
</td>
<{/if}>
</tr>
</table>
<div class="footerbar">
<a href="http://xoopscube.sourceforge.net/"><img src="<{$xoops_imageurl}>images/poweredby.gif" width="287" height="10" alt="XOOPS Cube PROJECT" title="XOOPS Cube PROJECT" /></a><br />
<{if $xoops_footer != 'Powered by XOOPS Cube 2.1© 2001-2006 <a href="http://xoopscube.sourceforge.net/" target="_blank">XOOPS Cube Project</a>'}><{$xoops_footer}><{/if}>
</div>
</div>
</body>
</html>
|