MovableType Ver4.1にレベルアップしてから、サイトのデザインをあれこれ触っています。
日記用のブログはい以前のままですが、このサイトのデザインを変更しています。もともとブログではなくＨＴＭＬやＣＳＳの資料を置いていたのでＨＴＭLエディタで作成していたものを、MovableTypeのページデザインに統一したものです。
そこで今回のＭＴのバージョンアップで可能になった「既定のウェイブサイト」というテンプレートを利用して、あれこれ試行錯誤しています。
当分の間ご迷惑をおかけしますのでご容赦ください。
ランダム画像に関しては、JavaScriptによる方法はたくさん紹介されています。その場合、ランダム表示する画像のファイル名を連番にするなど制約があったりします。
そこで探してみました。
rotate.php を使う方法です。
参考ページはhttp://chocobit.com/2007/03/19.php
バナー画像などはＤＩＶなどの背景画像にbackgroundで指定されるので、ＣＳＳファイルでその指定を、
background: url(rotate.php) no-repeat;
などのように指定すればＯＫ
ファイル名は何でもＯＫですが拡張子は、rotate.php のソースを見れば以下のようになっています。
$extList['gif'] = 'image/gif';
$extList['jpg'] = 'image/jpeg';
$extList['jpeg'] = 'image/jpeg';
$extList['png'] = 'image/png'
四方にラインを指定した100pxのボックスでそのままで周囲にたとえ1pxのラインでも左右合わせて102pxになります。
見た目160pxで四方30pxの「padding」と1pxの枠線のボックスのサイズは...といったボックスごとにサイズを割り出すという大変ややこしい事になり、レイアウトが崩れる原因にもなります。
これを回避するには、基本の大きさを指定したボックスの中に「inner」ボックスを作り、そこに余白やラインを指定します。この場合「inner」ボックスには大きさの指定を行いません。
okanowebの静的ドキュメントはすべて左サイドバーの２カラムで作成していますがMovableTypeで作成しているトップページと主要コンテンツのトップおよび投稿記事について３カラムレイアウトに変更しました。
理由はサイドバーのメニューの増加でページの長さが長くなりすぎたので短くしたかったというのもです。
それと、Snap Shots を復活させました。
煩わしいとの批判もありますが、こんなツールもあるよというアピールです。
左のサイバーのメニューを項目毎に、上下に飾りをつけてみました
項目名のバックグラウンドイメージで上部飾りを定義します。
項目自体を、ＤＩＶ要素で囲み、最下段にpadding-bottomで下の飾り余白を取ります。
ＤＩＶ要素の背景画像をbackground-positionで最下段に表示させます。
＋
新しいデザインは、トップページをインストール型ブログツールのMovable Type 3.3
で作成しました。HTMLやCSSの情報にあまり変更が無いため、既存の静的ページを更新する事がなくなっているため、今後はMovable Type 3.3で応用や工夫に関する情報や感想を書いていこうと考えてます。
バナー部分とフッターのデザインを角丸に変更しました。バナーとフッターのイメージを統一させました。
Ｈｎ要素の右余白を無くしました。
Internet Explorer 7 Beta 2におけるサイトの表示確認を実施しています。通常コンテンツでは大きな問題は発生しておりません。サンプルおよび小細工集におけるサンプルページが多々問題が出ています。
順次修正を行ってまいります。