XOOPSTips集 - スタイルシートカテゴリのエントリ
画像回り込みにひと味加えるの続編。前回の例では、画像を左に、本文は右。そのために、本文のクラスblogBodyには左マージンが必要という風にかなり面倒であった。
今回は、左右どちらでも融通のきくマークアップとスタイリングを紹介する。もちろん、img、figタグ、いずれにも対応する。
幅が固定のボックスならセンタリングするのはわけがない。margin-left:auoto; margin-right:auto;
width: 100px;しかし、このコーディング例ではボックスの幅長が100pxを切ったりすると完全な中央寄りとはならないし、超えたらあふれた要素が段落ちしたりもする。このように、ページナビやアルバムなどで、ボックスの要素がいくつあるか分からなくて長さが特定できないものをセンタリングするにはどうすればいいか。
前号の「ファンシー・ページナビゲータ」をセンタリングする例で紹介する。
ビジネスブログなどを購読していると、毎回の記事が複数ページにわたるものが多い。そこで、スムーズにページ間を渡るための使いやすいページナビゲータが用意されてるのが一般的だ。
一方、Xoopsのページナビゲータはどうかというと、スタイルシートなどを適用しないデフォルトのままでは、マウスでポイントしようにも「文字が小さい」「文字間が狭い」などから、老眼鏡が必要となってきた世代にとってはとても辛いものがある。
そこで、スタイルが適用しやすく、かつsemanticなマークアップに変更するためのsmartyプラグインmodifier.xoops_pagenavi_markupを作り、例として、ここのXOOPS関連TIPS集、hodaぶろぐる、フォーラムに適用してみた。
そろそろ重い腰を上げてIE7対策に取り組む時期なんだろう。
weblogD3の基本機能についてはそろそろバグも取れてきたので、テンプレートのsemanticコーディングに向けて仕上げの段階に入ってきた。
当初から眼中にあったのは、floatを使う以上、2段以上になるとieでは絶対うまくいかないカテゴリーツリー。これは自分のブログでは使わないので先延ばしにしてきたが、公開する以上は機能するよう最低限の対策を行った。結論は、やはり段別にボックスをクローズする方法しかない、ということ。つまり、
知人から聞いた耳より必殺技。
国内限定だと思うが、前後を全角の（と）で囲むといいらしい。他の文字ではどうか、テストしてないので分からない。
で、今回weblogD3に採用したチケットもどきキー付きトラックバックping送信アドレスだが、このキーの長さが12桁。テーマによっては、ieで大きくレイアウト崩れしてしまうので、トライしてみてはいかが？
配布版では全角ものを採用するわけにはいかないので、手を入れる部分を紹介しておく。
js/tbkey.jsの17行目を：
document.getElementById('weblogTrackbackURL').innerHTML = [em]'（'[/em] + tbURL + [em]'）'[/em];euc-jpではおかしくなるかもしれない。その場合はutf-8、あるいはshit-jisで保存してみてください。
mylinks系モジュールには大抵カテゴリーツリーボックスというものがある。デフォルトではtableレイアウトなので、smartyのcycleプラグインを使えば横に納めるツリーの数も簡単にコントロールできるメリットがあるのだが、いかんせんsemanticではない。
そこで、weblogをD3化するにあたって採用した、リストタグとスタイルシートで実現する方法を紹介する。そうすればjsなどと組み合わせて折りたたみカテゴリーツリーなどがいとも簡単に「はい、一丁できあがり」。
xoops2を使っていていつも汚いなあと思うのは、コアでレンダリングされる部分。特にカテゴリーナビは目を覆うばかりだ。class/xoopstrree.phpのgetNicePathFromId()のことだが。ページナビはあれで一つの表現方法だから許せるけど、カテゴリーナビときたらまるでいけない。要するに親子の関係を示すレベルが表示できてないのだ。
具体的にいうと、問題は親と子をコロン「:」で連結しているところにある。コロンというのは同列を象徴するのだから親子ではなく兄弟を意味してしまう。知人に言わせるとあれは複合カテゴリーかと誤解させる元になる。ここはコロンではなく、見た目にも親子を示す「>」「»」などのほうがよい。
で、仕方がないので手を入れることになる。
ホダ塾サイトリニューアルで使った小技。
ブロックにidをつけて識別する方法の派生だけど、付けられたブロックのIDが仮に「BlockMultimenu1」だとすると：
#BlockMultimenu1 { display:none; }はは、今さらなんだけど、ヘマをやったのでメモとして書いておこう。
デフォルトテーマでモジュールコンテンツに#content、xoopsCode（いわゆるxoops書式）のtextareaに#contentsが使われてるよね。
特に後者のことをすっかり忘れていて、サイトの新テーマSemanticにうっかり使ったときの話し。