動画が表示されていない方はFlash Playerをインストールしてください
2ba動画が表示されていない方はFlash Playerをインストールしてください
2009 年 4 月 3 日
2009 年 3 月 30 日
先日、犬の体重のグラフのページを作っていて横スクロール
しなければならないページができました。
でも、メニューが横スクロールすると、見えなくなってしまいます。
そこで、メニューをレイヤーとして、いつでも画面の中央にいるように
しました。
パピヨンの体重グラフ
CSS
<style type="text/css">
#body{width:<?=$hababody ?>px;}
/* $hababody はデータベースから行数を取得して、
それにあったようなbodyの幅になるようにする。*/
#Layer1{width:900px;height:80px; left: 50px; top: 2px;
position : absolute;line-height : 0px;
padding-top : 5px;padding-left : 5px;padding-right : 5px;padding-bottom : 5px;
background-color : #ffffff;}
</style>
Java Script
<script type="text/javascript">
c_X = 50; // ←メニューの左からの位置 X座標
c_Y = 0; // ←メニューの上からの位置 Y座標
function init() {
scr_X = document.body.scrollLeft;//横方向のスクロール値
scr_Y = document.body.scrollTop;//縦方向のスクロール値
document.getElementById("Layer1").style.left= scr_X + c_X;//スクロールしたときの現在の左からの位置
/*document.getElementById("Layer1").style.top = scr_Y + c_Y;// スクロールしたときの現在の上からの位置 今回は縦には動かさないのでコメントアウトしておく*/
}
</script>
IE用のハック スタイルシートはIEの為の物も作る。
HTML
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-all-papi-style.css" media="all" />
<![endif]-->
2009 年 3 月 22 日
Plain Text
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="520" height="34" align="middle"> 子犬が産まれて、子犬の生まれてからの日数をMTブログに、 貼り付けた時のコード。 SWFは、パラフラでフラッシュビデオのように作った。 <param name="allowScriptAccess" value="sameDomain" /> <param name="movie" value="koinu-tannjobi.swf" /> <param name="quality" value="high" /> <embed src="koinu-tannjobi.swf" quality="high" width="520" height="34" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> <div id="satooya-title">里親募集中<a href="http://dogs-c.net/mu-papi/postmail/postmail.html">（可愛がってくれる方、こちらから連絡ください）</a></div>
koinu-tannjobi.swf は、任意の場所に置く。
2009 年 3 月 15 日
ワードプレスのログイン画面で、エラーになりました。
ｐｈｐのコードを、ちょっと変えてＦＴＰで、送ったわけですが、それが悪かったようです。
カウンター用の Counterize II の counterize.php です。
そしてこれは大変と、元に戻そうとして手をつけていない
counterize.php をアップロードしました。
管理画面を開こうとしたら、ログイン画面になり名前とパスワードを求められました。
名前は良いのですが、パスワードはブラウザに、記録されているはずのものが
そのまえに、何かのときに間違ってブラウザの記録を削除してしまっていたのです。
普通、ここまでだったら別になんともなく、メールアドレスを送って、パスワードを
送ってもらえばよいだけの話なのですが、
何回メルアドを送っても、メールが入ってこないのです。
そこで、私の場合はサーバーが、XREAなのでコントロールパネルから
phpadminn でデータベースを開いて見ました。
データベースの、 wp_users を表示させれ見てびっくりしました。
最初の登録のとき、アドレスを間違って書いていたようです。
これでは、メールが入ってこないわけです。
user_email のアドレスを直して保存してから、
ログイン画面で、パスワードを忘れたをクリックして
上記表示の開き
メールアドレスを入力
メールで新しい、パスワードを受け取り
パスをードを、入力してログインできました。
なんとも、ばかなことをやってしまいました。
2009 年 3 月 14 日
「WP-lightpop を使う」を前に書いたのですが、
よく考えてみたら、ムーバブルタイプで作っているブログのほうで、
前から使っていました。
こちらは、一枚だけを拡大するわけですが、
ホームページやＭＴブログのほうでは、ｐｈｐで呼び出し（下記のように）
＜?php require (’http://アドレス/fogefoge.php’);?＞
クリックで次から次へと表示きます。
ワードプレスでは、うまく表示しません。
ダウンロードLightbox2
上図の画面の左メニュー、Download をクリック
そして、Lightbox v2.04 をクリックするとダウンロードが始まります。
（2009年3月ころのものです）
ダウンロードしたものを解凍すると、4個のフォルダがあります。
index.html : 使い方が書いてあります。（英語版）
images : このソフト用の、画像が入っています。
js : ｊｓファイルが5個入っています。
css : このスタイルシートを変更して、自分用にします。
使い方
HTML
<head>~</head> の中に記載する。 <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
js と css は、表示するページと同じフォルダに入れた場合です。
違うフォルダに入れるときは、src と href 以下をそのアドレスにします。
次は、画像の用意です。
自分で、表示したいサイズに、画像処理のソフトで編集します。
最初に表示する、サムネイル用もひとつ作ります。
HTML
<html><head><title>画像サンプル</title> <script type="text/javascript" src="http://fogefoge/lightbox2/js/prototype.js"></script> <script type="text/javascript" src="http:/fogefoge/lightbox2/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://fogefoge/lightbox2/js/lightbox.js"></script> <link rel="stylesheet" href="http://fogefoge/lightbox2/css/lightbox.css" type="text/css" media="screen" /> </head> <body> <div class="photo-set"> <div class="photo-up"><a href="http://fogefoge/lightbox2/2008-8-8/7-31/c1124.jpg" rel="http://fogefoge/lightbox2/js/lightbox[888]" title="7月31日 今日の「もも」は。"> <img src="http://fogefoge/lightbox2/2008-8-8/7-31/c1124-s.jpg" width="120" height="80" alt="" /></a></div> <div class="photo-date">2008.7.31-8.10 </div> <div class="photo-comment">ももちゃん出産</div> <a href="http://fogefoge/lightbox2/2008-8-8/7-31/c1127.jpg" rel="http://fogefoge/lightbox2/js/lightbox[888]" title=" そろそろかな？。"></a> <a href="http://fogefoge/lightbox2/2008-8-8/7-31/c1131.jpg" rel="http://fogefoge/lightbox2/js/lightbox[888]" title=" だいぶ目立ってきました。"></a> <!--長くなるので省きます。 fogefoge のところは御自分のアドレスです。--> </div> サンプルです。<br />クリックして下さい。 </body> </html>
スタイルシート
CSS
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 18px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 30px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #;ffffff }
#top-photo{ width:120px; height:auto;float:left; margin:3px 4px 0px 8px;}
/*ここからは、自分用*/
.photo-set { width:120px; height:120px; margin:0px 0px 0px 0px;}
.photo-up { width:120px; height:82px; margin:2px 0px 0px 0px;}
.photo-date { width:120px; height:15px; margin:3px 0px 0px 0px;padding:0px ;font-size:14px;letter-spacing:0.1em;
color:#666666;
border-bottom:1px solid; border-color:#66ff33;}
.photo-comment { width:120px; height:16px; margin:2px 0px 0px 0px;padding:0px ;font-size:12px;color:#666666;
border-bottom:1px solid;border-color:#99ff66;}
img{border:0px;}
[ 注意 ]
それぞれ環境が違うので、このままコピーされても、動かないと思います。
あくまでも、参考程度にしてもらえれば幸いです。
2009 年 3 月 8 日
ブログに貼り付けた、画像をきれいに拡大したいと思いネットで探したら
WP-lightpopをいうのがあることを、知りました。
ここのページに、詳しい説明がありましたので、
その説明に従って、おこなったらうまく表示できるようになりました。
2009 年 3 月 7 日
最初は、画像をアップロードしていても、どのフォルダにどういうふうに、
保存されていくのかよくわかっていなかった。
ダッシュボードの、下のほうその他の設定を開いて見た。
アップロードするファイルの保存場所 ： デフォルトではwp-content/uploads
となっているのが、ここを変えればどこにでも入れれる。
自分の場合は、ページを作ってそこに画像を載せる時は、そのページとわかるような
フォルダ名にして、そこに保存する。
そうすれば、あとで移動したいときもわかりやすい。
ブログ用としては、
アップロードしたファイルを年月ベースのフォルダに整理 ：
ここにチェックをかけておけば良いようである。
ＦＴＰで、見ると下図のような感じ
2009年を開くと、
2月分は「０２」に入っているし、3月分は「03」に入っている。
あとまた、ページを作って保存したいときは、フォルダを作り
保存する場所を変え
「年月ベース・・・」のところの、チェックをはずして、アップロードする。