XOOPSTips集 - テーマカテゴリのエントリ
はは、今さらなんだけど、ヘマをやったのでメモとして書いておこう。
デフォルトテーマでモジュールコンテンツに#content、xoopsCode（いわゆるxoops書式）のtextareaに#contentsが使われてるよね。
特に後者のことをすっかり忘れていて、サイトの新テーマSemanticにうっかり使ったときの話し。
３月１８日OSC２００６Tokyo/springのホダ塾セッションで、xoopsのアクセスビリティについてプレゼン機会があった。
レイアウトだけでなく、本文からも徹底的にtableタグを排除してみたのだが、時間の関係でそういった技術面はいっさい話ができなかったので、ボチボチとTIPS集で書いていこうかと思う。
先ず１回目はhtmlタイプが許可されてるweblogなどでは、BBコードなど使わずに積極的にhtmlを書いて記事レイアウトを楽しもう編。
サイト検索（search）モジュールのform要素にtabindexを付けるためxoopsFormをばらしていたときの産物。
たとえば、foreach展開の中でform要素にtabindexを振る場合、必要な要素の数が分からないと後続のtabindexを決定することができないね。foreach要素が１０個以内ならiterationを使って適当に処理すれば問題ないけど、これが１０個を超えると桁上がりとなってしまって甚だ都合が悪い。
そこで捻りだしたのが下記のようなコード：
total変数はforeach内または終了後でも有効というのがミソ。
たとえば、foreach展開の中でform要素にtabindexを振る場合、必要な要素の数が分からないと後続のtabindexを決定することができないね。foreach要素が１０個以内ならiterationを使って適当に処理すれば問題ないけど、これが１０個を超えると桁上がりとなってしまって甚だ都合が悪い。
そこで捻りだしたのが下記のようなコード：
total変数はforeach内または終了後でも有効というのがミソ。
以前にも書いたが、pm送信などのポップアップ画面のコントロール（その３）である。
通常xoopsのポップアップ画面ではbodyにはidやclassなどのセレクタは用いられない。したがって、style.cssなどで記述されるbodyのプロパティが適用される。
ここで問題が発生する。
通常xoopsのポップアップ画面ではbodyにはidやclassなどのセレクタは用いられない。したがって、style.cssなどで記述されるbodyのプロパティが適用される。
ここで問題が発生する。
最近、cssによるレイアウトテーマの配布がぼちぼち見られるようになった。いくつかソースを見て感じたことを書いてみる。
特定のブロックについて、IDを付すことができれば、背景色・画を変えたり、特定のときに非表示にするなどスタイルを自由に変えることができる。
ただ、idにはタイトル名をそのまま使えればいいけど、日本語ではいかにも問題がありそうだ。
そこで、ブロックにユニークなIDを付ける方法を考えてみた。
暇に任せてSmartyのマニュアルをじっくり読んでみると、いろいろな機能があってなかなか飽きないものがある。
ということで、懸案だったサブメニューがカレント（active）かどうかの識別をSmartyを使って実現できたので紹介する。
modules/system/blocks/system_block_mainmenu.htmlに以下の色文字部分を追加する。
<{if $smarty.server.HTTPS}>
<{assign var=ex_http_host value="https://"}>
<{else}>
<{assign var=ex_http_host value="http://"}>
<{/if}>
<table cellspacing="0">
<tr>
<td id="mainmenu">
<a class="menuTop<{if !$xoops_dirname}> active<{/if}>" href="<{$xoops_url}>/"><{$block.lang_home}></a>
<!-- start module menu loop -->
<{foreach item=module from=$block.modules}>
<a class="menuMain<{if $module.directory == $xoops_dirname}> active<{/if}>" href="<{$xoops_url}>/modules/<{$module.directory}>/"><{$module.name}></a>
<{foreach item=sublink from=$module.sublinks}>
<a class="menuSub<{if $sublink.url == $ex_http_host|cat:$smarty.server.HTTP_HOST|cat:$xoops_requesturi}> active<{/if}>" href="<{$sublink.url}>"><{$sublink.name}></a>
<{/foreach}>
<{/foreach}>
<!-- end module menu loop -->
</td>
</tr>
</table>
2.0.10JPからカレントのモジュール名、ディレクトリ名が渡されるようになった。
これは、従来テーマ、テンプレートからphpを介して取得する手間をなくしただけでなく、テーマ、テンプレートの作成面で幅広い手段を提供したという点で大きな意味をもつ。
たとえば、トップページとそれ以外でスタイルを変えるということも簡単にできる。例として、
- 文字の修飾
- ヘッダ画像の使い分け
- 背景色の使い分け
- コンテンツ内tableサイズの使い分け
- など。。。
FFでdefaultテーマのメニュー欄をよく見ると、２，３行置きに上下のボーダーが崩れてるのが分かるよね。
これはFFのボーダーバグのようで、各行はborder-topで作成した方がいいとか聞くけど、いい対策がないみたい。
そこで、見た目のボーダーバグを隠す小賢しい技（笑）を紹介。
ulボックスも同じ対策でいける。
td#usermenuも同様にして誤魔化せばよい。
各行にセットされたボーダー、背景色の代わりに：
１．td#maimenu全体にボーダーをセット
２．td#mainmenuに背景色をセット
はぶてるさん、xoops日本ハンドル名T_iwamuroさんから教えてもらってすごく得した気分の話。
フォーラムやb-wikiなどでhtmlやphpなどのコードを書くとき、行当たり字数に注意しないと画面からはみ出すほど横幅がどこまでも広がってしまうことがある。
そういう場合はスタイルシートでoverflowを使うといいらしい。一定文字数を超えるとスクロールバーが出現。こりゃ快適だ。 
具体的には：
テーマ/style.cssのdiv.xoopsCodeとdiv.xoopsQuoteに以下を追記。
具体的には：
テーマ/style.cssのdiv.xoopsCodeとdiv.xoopsQuoteに以下を追記。
width: 600px;
overflow: auto;