デザインの最近のブログ記事

ランダム画像に関しては、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」ボックスには大きさの指定を行いません。

左のサイバーのメニューを項目毎に、上下に飾りをつけてみました
項目名のバックグラウンドイメージで上部飾りを定義します。
項目自体を、ＤＩＶ要素で囲み、最下段にpadding-bottomで下の飾り余白を取ります。
ＤＩＶ要素の背景画像をbackground-positionで最下段に表示させます。

　　　　　　　＋

新しいデザインは、トップページをインストール型ブログツールのMovable Type 3.3で作成しました。HTMLやCSSの情報にあまり変更が無いため、既存の静的ページを更新する事がなくなっているため、今後はMovable Type 3.3で応用や工夫に関する情報や感想を書いていこうと考えてます。

ブラウザーから当サイトを印刷する場合に、再度メニューおよび、ヘッダーのバナー広告・フッターのバナー広告が印刷されないようにスタイルシートを変更しました。

ただし、文中に挿入されているバナー広告は表示されてしまいます。ご了承ください。

SSI化をさらに進めて、広告の表示もSSI化いたしました。

現在以下の項目をSSIでインクルードしています。

サイドメニュー
トップナビゲーションメニュー
ヘッドバナー
フッター
フッターバナー
ランダムメッセージ