Pega Weblog

個別リンクやカテゴリー表示等のページのTOP画像もランダムに変えるようにしました。

N@Blogさんのドガキューをお借りして、Main IndexのページのみTOP画像をランダムに表示させる（その記事）ようにしましたが、今回はMain Indexページ以外のページ＝Category Archive、Individual Entry Archive、Date-Based Archiveの各ページのTOP画像をランダムに表示させるようにしました。N@Blogさんのサーバの負荷を考えて、その画像もpega Originalです。今後これらの画像を増やす予定です。乞うご期待！！

自分の備忘録を兼ねてその設置方法を以下に記します。

JavaScriptを使えば、画像はランダムに表示できますが、画像を入れ替えたり、増減させたりするのにその都度、Category Archiveなどのソースを書き換え＆再構築　は煩雑に思えたので、cgiで制御することにしました。

津田ふみかの日記さんのこうさぎの背景画像をランダムに変更するを参考にして（そのままだろ！！）randam.cgiを作成しました。

#!/usr/bin/perl

my $base = 'http://自分のサイトのURL/img/topbanner/';　#画像の配置ディレクトリ
my @files = ('000.jpg', '001.jpg', '002.jpg'); #表示させる画像名
my $count = @files;
srand();
my $url = $base . $files[rand($count)];
print "Location: $url\n\n";

これをcgi実行可能なディレクトリに置きます。
#!/usr/bin/perl　と改行コードはサーバの環境に合わせて下さい。
このファイルに実行権を与えることを忘れないでください（通常、パーミションは705にします）。

ブラウザからこのcgiを実行して画像がランダムに表示されればＯＫです。

MovableTypeの設定に移ります。
スタイルシートに以下を追加します。

/* ◆タイトル名のある段落３(画像－当サイトオリジナル用）◆ */
#banner3 {
font-size:x-large;
font-weight:bold;
font-family: verdana, arial,"Osaka", "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐ ゴシック", sans-serif;
color:#333333;
background-positon:left;
background-repeat:no-repeat;
background-image: url(http://自分のサイトのURL/cgi-bin/topbanner/randam.cgi);
height:70px;
padding:15px;
}

/* ◆タイトル名の文字のリンク色３－当サイトオリジナル用◆ */
#banner3 a:link {font-size: x-large;color: #ffffff; text-decoration: none; background: none;}
#banner3 a:visited{font-size: x-large;color: #ffffff; text-decoration: none; background: none;}
#banner3 a:active{font-size: x-large;color: #003366; text-decoration: none; background: none;}
#banner3 a:hover {font-size: x-large;color: #ffff00;text-decoration: none; background: none;}

最後に、Category Archive、Individual Entry Archive、Date-Based Archiveの各ページを編集します。
<div id="banner">.....</div>の箇所を以下の通り変更します。

<!--Banner Start--->
<div id="banner3">
<span style="position: absolute; filter: Shadow(color=#696969, direction=135)">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</span>
</div>
<!--Banner End--->

画像によってタイトル文字が見えなくなるのを防ぐため、タイトル文字などに影をつけました。その指定が<span style="position: absolute; filter: Shadow(color=#696969, direction=135)">です。

なお、画像サイズはドガキューと同じ　800 × 100 ピクセル　が良いでしょう。

＜＜多謝、津田ふみかの日記さん！！＞＞

Posted by pega at 2004年07月11日 21:50     
| | | | ⇒English | ⇒大阪弁 | Clip!!