サイトトップページにインデックスを追加

jQueryをアップデートしたついでに、jQueryプラグイン「ColorBox – customizable lightbox plugin for jQuery」で実装練習をかねてサイトトップページに今まで書き溜めたドキュメントへのインデックスメニューを追加しました。まだ、「実装しました」くらいの出来映えなので温かい目で見てやってください。

サイトトップページを開くと、左側に「menu」と書かれたタブがありますのでクリックすると menu-index.html ドキュメントをインクルードしてインデックスが開くような仕組みにしてます。変更があっても1ドキュメントを書き換えるだけでいいので楽かなぁと採用してみました。ただ、iPhoneレイアウトも同じページで行っているので、iPhoneで読み込む際にJavaScriptが一緒に読み込まれてしまうので表示速度が落ちてしまいます。同居させるといろいろと制限ができてしまうので、別居させる方向で検討しなければならないのかもしれません。

iPhone のツールバーを隠す

サイトトップページの表示を iPhone に対応させているのですが、iPhone でサイトページを表示させるとツールバー(検索フィールドなどがあるところ)が邪魔に感じてきました。というのも、他のサイトを眺めているとサイトページ読み込みと同時にツールバーが隠れているサイトを見かけたからです。じゃ、うちでも採用しようと調べてみると head 要素に以下の JavaScript を入れればいいようです。

これでページ読み込みと同時にツールバーが隠れるようになりました。

ズームアイコンを付ける方法

スタイルシートの positon プロパティを使って、画像を編集することなく左上隅にズームアイコンを配置する方法を書いてみました。以前、どこかで書いたような気がするんだけど見つけることができませんでした。なので、再び同じような内容を書いてみたという訳です。

.zoom { 
    position: relative; 
} 
img.zoom_icon { 
    position: absolute; 
    top:-10px; 
    left: -7px; 
}