まずはFacebookやGoogleのスマホ版で使われている横にメニューが隠されていてメニューアイコンをタッチするとヌルっとメニューが出てくるやつ。あれを実装したかったので調べているとこんな奴が。
「スマホサイトにおすすめ。jQueryプラグイン『PageSlide』を使ってFacebook風メニューを再現してみました」
これ良かったのだけど、残念なのがメニューがたくさんあるとメニューだけのスライドができないってこと。つまりアコーディオンにメニューを仕立てた時に伸びたメニューは見れないってことなんですね。これでは自分が狙っていた仕様にはならないので、再度検索。すると
「sp-slidemenu.jsというのを作った。(スマートフォン向けスライドメニューライブラリ)」
ありましたというか、同じような不満を持っていてライブラリを作ってくれた人が。おまけにjQueryのプラグインじゃないところがすごいです。いやjQueryでもうちは問題ないのですが。まあ、使えるのでこれを導入。これがレスポンシブのことは考えていないライブラリなのでこれをPC閲覧時に普通のサイドメニュー化するのに一苦労。CSSを色々といじりました。実際に動かしてどこがどういう部品なのか探らないとわけわかんないですからね。
PCのサイドメニュー化したら縦のスクロールに合わせてメニューが移動してしまうという現象。どうもscriptでpositionが固定化されているみたいだけど、いくらいじってもなんともならぬ。諦めかけたのだか、浮動化させるメニューに対しての本体の枠がおかしいことに気づいてこれを回避。どうやらヘッダーと本体とメニューが微妙な関係で成り立っているみたいだ。で、とりあえず形になったので次はこのメニューの多層化。
色々探してこれ
「slimMenu」
jQueryのプラグイン。入れ子のリストに必要な要素を入れて、scriptを書けば動いてくれます。メニューアイコンをCSSで作ってるのがすごいっちゃすごい。これも実際動かしながら調整。PCでうまく表示できるのにスマホだと変になったりするのが、scriptに書かれているHTMLやCSSだったというオチは気づくのにえらく時間かかりました。
IE8だとメニュー部分がずれてしまうので、ハックで対処。IE8に対処すると9、10がずれてしまったので、それぞれに対処。やっぱりIEだー。
トップページの画像スライダーはこれ
「FlexSlider」
これは仕事で使ったので比較的楽に導入。このプラグインでなんでも出来るので、むしろそのCSSやオプションを見極めないといらないところをいじってしまう。
サイト内検索エンジンをつけたかったので探していたら便利なCGIが。
「多言語対応ホームページ内全文検索エンジンUnicode版msearch」
多言語に対応していなくてもうちはいいのだが、UTF-8に対応しているし、index全文検索なのでindexさえ作ってしまえば後の処理は早い。
設置そのものは比較的楽。index作成にcgiを使うのだが、UTF-8で全ページ作っていないとまず、エラーが出るとのこと。うちは全部UTF-8だったので問題ありませんでした。
むしろ、表示部分のHTMLがXHTMLで出来ているのとテーブルで全体を組んでいたので、これをなじませるのに一旦、テーブルを解体しなきゃいけなかったのが面倒だったかな？

スマホ時にPCサイトを表示させるためのscript。
「スマートフォン対応のためのレスポンシブWebデザイン実用TIPS」
記事も役に立つのですけど、下の方にあるCookieを利用した切替が使えるのでこれを。ちなみにこのまんま使えば間違いなく動くのですど、自分が使っているスマホ用のブラウザ「AngelBrowser」では動かず、こっちのコードをいじっていたのですが、「AngelBrowser」の設定の問題でした。かなり時間を浪費したぞー。

ヘッダー下のナビは
「CSS3で作る可変タイプのナビゲーション」
CSS3のboxプロパティを使えばfloatで流しこむより簡単に可変ナビを作れるのですが、IE8、IE9では使えません。まあ、IE8、IE9は流しこみで対応するとして何故かIE10でもうまくいきません。どこのページを見たか失念しましたが、boxは
display:-webkit-box;
display:-moz-box;
display:box;
display:-ms-flexbox;
display:-webkit-flex;
display:flex;
で、ナビゲーションを可変するには
-moz-box-flex:1;
-webkit-box-flex:1;
-webkit-flex:1;
-ms-flex:1;
flex:1;
box-flex:1;
を設定しておくといいみたいです。box関係は度々変更しているので、それぞれで対応させるには全部書いとけってことですね。IE10が途中のflexboxで対応しちゃったのが、また面倒なことに。webkit系やFirefoxなんかが随時アップデートで対応してるのにね。
(追記）上の情報、「Using Flexbox: Mixing Old and New for the Best Browser Support」や「[CSS3] IE10の一般公開を受けてFlexible Boxの仕様を比較するサンプル書いた」
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
で
-webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1; /* OLD - Firefox 19- */
width: 20%; /* For old syntax, otherwise collapses. */
-webkit-flex: 1; /* Chrome */
-ms-flex: 1; /* IE 10 */
flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
こうすりゃいいらしい。

後はCSSのセレクタの整理やHTMLタグの整理調整。これをやってheadや基本パーツの変更があったので全ページ書き換え。あれ？CSSを外部化すればCSSの変更だけでデザイン変えることができて便利なはずなのになあ？
無駄なタグやセレクタがあって俺、大丈夫か？ッて感じでした。まあ、また無駄が増えた気がするけど。
とりあえず、こんなところです。