すると問題になったのが、テーブルデザインでよくある左右の隣り合うブロックとの間のボーダー（ではなくて幅1pxのtd）です。単純にdivなどのボーダーを設定しても、隣同士の高さが合わないとラインが下まで伸びません。
背景などを使って見た目を整えるのが正当なのでしょうが、画像を用意したりするのが面倒… と思っていたら、こんなやり方を見つけました。
高さの異なるカラムを揃えるスタイルシート
これはいいですね
早速リニューアルサイトに取り入れました。ところが、ページ内にジャンプするリンクをクリックすると、ページの上の方がちょん切れたような変な表示になってしまいます。どうやら、overflow:hidden; が悪さをしているようです。包容要素にoverflow:hidden;を使う際の注意点メモ
いろいろ試しましたが、スタイルシートやHTMLで逃げるうまい方法はなさそうでした。そこで、JavaScript でスクロールさせる方法ならどうだろう、と試してみました。
スムーズにスクロールさせる方法は調べるとたくさんあります。その中で、こちらの方が最近「決定版！」とされている方法を試してみることにしました。
ページ内をスクロールするスクリプトの決定版 | WINGHEART
「jQuery」を使うスクリプトです。MODxのassets/js/にjquery.jsとjquery.page-scroller.jsを入れ、テンプレートに記述するだけで動作します。リンクタグやアンカー用idに手を加えなくていいところが素晴らしい。
[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
「高さの異なる…」の記事を書かれた方が作者さんなのかな？
ただ、MODxの必須タグといわれている<base href="[(site_url)]" />のせいで、単純に<a href="#abc">と書くとトップページに飛んでいってしまいます。リンクがページ内の#abcではなく、http://www.ドメイン名/#abc となってしまうんですね。
仕方がないので、「外部ページのページ内リンクへスクロール」する方法を試してみました。元々の問題はこれでめでたく解決！ ジャンプ後に表示がおかしくなる件は修正することができました。JavaScriptを切ってしまうと元のおかしな動作になってしまうのですが、それは目をつぶることにしましょう。
あと、細かい問題で、外部ページへのスクロールとしているためか、動きがスムーズではないんですね。せっかくスムーズ・スクロールを導入したんだからきれいに動いて欲しいところですが、これも現在のMODxの仕様ということで仕方がないかな。
ジャンプ後、ブラウザのリンク欄に外部ページへのリンクのために付けた「?pScabc」というのが残ってしまうのも気になるけど、まあいいでしょう。
追記
このように試用させていただいた「Page Scroller ver.3」ですが、ライセンス条件を見ると「非商用に限り無料」なんですね。残念ながら今回使おうとしたお客様のページは歯医者さんのページなので、非商用とは言えません。あきらめて別の方法を探すことにします。
