ブログ人のサイドバーの画像枠

サイドバーの画像枠を消す方法として面倒なJavaScriptを紹介していましたが、12月12日のブログ人のバージョンアップで、cssのカスタマイズが可能になったので、もっと簡単になりました。（ただ、はじめの一歩コースはカスタムcssに対応していませんので、従来のscriptしか方法がありません)

カスタムcssの設定で以下を設定し、私リストのHLMLにclass名を設定するだけです。

カスタムcssの設定

.img-border0 img {
  border: 0px ! important;
}

私リストの設定

<div class="img-border0">
  私リストの設定
</div>

ブログ人のテンプレート設定はIDに対しクラス設定している為に優先順位が一番高く、いくらカスタム設定しても自分の設定が有効になりません。
ポイントは"! important"を設定しカスタムcss設定の優先順位を上げてやる事です。
画像枠だけで無く、もちろんその他のクラス設定にも利用可能です。

ブログ人のバージョンアップ後、私のページは「実行しましたが、ページでエラーが発生しました」というJavaScriptのエラーが出る様になってしまいました。
いつ直るのだろう……

マウスオーバーで画像を入れ替える

マウスを乗せたときに画像を入れ替えます。

Javascriptを知っている人には大した事ではありませんが、コピペできると楽なのでのせておきます。

<img src="マウスをはずしたときの画像(はじめに表示させる画像)"
  onmouseout="this.src='マウスをはずしたときの画像'"
  onmouseover="this.src='マウスを乗せたときの画像'" />

ただ、これだけだとマウスオーバーの画像はマウスをのせた時に、初めてWEBサイトから読み込まれます。
それではあまり都合が良くないので、画像を先読みさせた方が良いです。

あらかじめ画像を読み込ませておく

<SCRIPT type="text/javascript">
<!--
imglist = ["画像1", "画像2"];     //先読みさせる画像
preImage = new Array();
for (i=0; i<imglist.length; i++) {
  preImage[i] = new Image();
  preImage[i].src = imglist[i];
}
//-->
</SCRIPT>

ホームページビルダがブログ人に対応

2005年12月に発売されたホームページ・ビルダー10がようやくブログ人に対応しました。更新プログラム（HPB1003F）をあてるとメニューにブログ人が表示される様になります。
とりあえず投稿してみましたが使い勝手はいまいち？文書だけなら直接WEB上で書いた方が良いかもしれません。
文字に色を付けたり表を作ったりする様な場合には便利かも。

まだ機能自体を理解していないのでホームページビルダならではの便利さがあると良いのですが・・・しばらく使ってみます。

カレンダーの背景画像

ブログ人のカレンダーに背景画像をつけてみました。

以下のスクリプトの背景画像のURLを編集して私リストに追加して下さい。(ブログ人専用です）
追加した私リストはカレンダーよりも後に配置する必要があります。

<SCRIPT type="text/javascript">
<!--
// background-image of calendar
var calImg_url = "url(背景画像のURL)";
var calTbl_obj = null;
var calTbl_flt = "alpha(Opacity=50)";

for(var i=0; i < document.getElementsByTagName("DIV").length; i++ ) {
  var obj = document.getElementsByTagName("DIV")[i];
  if( obj.className.match("module-content")) {
    if ( obj.parentNode.className ) {
      if( obj.parentNode.className.match("module-calendar module")) {

        //background image
        obj.parentNode.style.backgroundImage = calImg_url;
        obj.parentNode.style.backgroundRepeat = "no-repeat";

        //calender table opacity
        if ( document.all && obj.firstChild.nodeName == "TABLE" ) {
          calTbl_obj = obj.firstChild;
          calTbl_obj.style.filter = calTbl_flt;
        }

        // mouse event
        obj.parentNode.onmouseover = function() {
          this.style.backgroundImage= "none";
          if ( calTbl_obj ) {
            calTbl_obj.style.filter = "alpha(Opacity=100)";
          }
        }
        obj.parentNode.onmouseout = function() {
          this.style.backgroundImage= calImg_url;
          if ( calTbl_obj ) {
            calTbl_obj.style.filter = calTbl_flt;
          }
        }
        break;
      }
    }
  }
}
//-->
</SCRIPT>