ども。めぐ味屋/MEGU-MIYA です。


オリジナル小説 Final Decision の配信を再開しました。

http://www.liolion.info/FINAL/

今回は、ブログツールで有名な、Movable Type でサイトを構築しています。


そんなわけで、更新作業も比較的スムーズ。。 CMSとしてもMovable Type をもっと活用したいですね。

こちらのブログは更新されません。

現在は、以下で活動しています



LULU-LOG るるろぐ2007



LULU-LOG T るるろぐてくにかる。



Let's enfoy MODx



申し訳ありませんがよろしくお願い致します

うちは、マカフィーなんですけど。。。
さっきから、スパムキラーのアップデートをしようとして、ダウンロードを途中で諦めてしまうのよね…（私が、ではない…）。

以前にもあったのだわ。。。それで、２日くらいしたら成功していた。いつのまにか…。 ダウンロードやインストールが失敗する時の対処方法がマカフィーのサポートのページにも書いてあるんだけども、うちの場合はそれでは解決しないのよねん。。。

そして、もしからしたら、原因かも知れないと思われることに…。
さっきセキュリティセンターを起動しようとしたら、スクリプトエラーを起こして正常に起動出来なかった。

これも以前あったのだわ。。。以前は、ウィルススキャンオンラインもスクリプトエラーで起動出来なくて、ちょっと慌てたんだけど、、、その時は、サポートさんに問い合わせて、windows関係のスクリプトをアップデートしてくらはい、と言われた。。。。その通りやったけど、だめだった。。。

でも、直ったんだよね。何をやったかというと。。。

マカフィー製品は、IE の「表示／エンコード」の「自動選択」にチェックが入っていると、画面で文字化けすることがある。そんなんで、マカフィーでは、ここの「自動選択」のチェックを外すように指示しているんだけど。。。

IE でブラウジングしていると、たまにそれだとよろしくない時があって、「自動選択」にチェックを入れるんだけど。。。今回、それを外し忘れていたのよね。。。

うちの環境だと、なんでか、「自動選択」にチェックが入っているとマカフィー製品（セキュリティセンターとウィルススキャンオンライン）がスクリプトエラーを起こして起動しない時がある。そんな時は「自動選択」を外すと、ちゃんと起動するのよねん。。。

スパムキラーのアップデートに失敗したのもコレが理由かも知んない。。。わかんないけど。。。最近、もじってばかりいるので、IE の事は忘れていたのだわ…。
では、アップデートが上手くいきますように...。

るるろぐ
が Movable Type 2.661 から、Movable Type 3.11ja にバージョンアップしました。

何か変わったの…？

…内部的には（MT的にはだいぶ…）。 でも、あまり恩恵（？）は表に出していません。。。ていうか、（まだ）やれてないというか。。。


恩恵１：サブカテゴリが持てる
これは良いんだよね。。。MT はカテゴリのページが巨大になる傾向にあるから。。。なんとかしてカテゴリを分割したいと思っていたのよね。。。プラグイン使えば2.661でも出来るみたいだったけど、mysqlが使えないとダメだったり…（めぐ味屋がMTを置いているisweb はMySql を使えない）。そんなわけで、これはよろしい機能かと...
恩恵２：日本語版になった
2.661では、正規版にmilanoさんの日本語パッチを当てていたのよね。。。それが正規にサポートされるようになった。
恩恵３：コメント投稿関係が強化された
type key に登録してないと、コメント出来なくしたりとか設定できるようになった。もちろん、type key に登録してなくても、コメント出来るようにもMT 側で設定出来る。
あと、コメントを管理者が確認してからページに反映するかどうかを設定出来る。
恩恵４：処理速度が速くなった
これは体感出来るにゃ。。。
恩恵５：ページのダイナミック生成が出来る
管理者がリビルドしてページに反映させるのではなく、ページにアクセスがあった時に、リアルタイムでページを生成するというものらしいのですが、、、いまひとつ飲み込めていません。そして、これは、mysql が使えないとダメらしいので、isweb ではできにゃい機能。。。
恩恵６：予約投稿ができる
…とか…
かにゃ。。。
…にゃんか変なところもあるんだけど…。
全体的に考えて、バージョンアップして良かったかにゃん。。。
今後は、こちらの記事を順次、移行出来ればと思っているデス。るるるん。

　# 下記は、
AutoPage 版めぐ味屋ブログ
からの転載です #

では、いよいよ、Movable Type3.1を起動します。

mt.cgiを実行します。

ログイン画面が出たら、仮ののユーザー名、仮のパスワードでログインします。

...入れました〜。。。成功です。
しかし、ここで安心してはならず、サクサクと自分のアカウントを作ります。

えっと、外部認証トークンて何…？
ま、いっか、後で。。。

次に、WEB-LOGの設定をします。
あら、ずいぶんシンプルになったんですね。。。なる〜。。。
早いって言うのは、この辺りのことも含んでいるのかも…。

ローカルアーカイブパスなどは、以前のMTの設定を参考に指定しました。

再構築してみます。どきどき…。

ででででで、出来ました〜。。。
ページも表示されました（変だけどね　笑。でも今はそんなことは問題じゃないの〜）。

とりあえず、エントリしてみましょう。

あはははは。できた〜。めぐ味屋無敵状態。爆。。。

えっと。後は何をすれば…？うーんと。とりあえず、寝ようっと。。。
テンプレの変更とか、データのインポートとかゆっくりやればいいや。

では、おやすみなさい〜。。。

　# 下記は、
AutoPage 版めぐ味屋ブログ
からの転載です #

mt-check.cgiを実行します。

特にエラーの画面が出なければ問題ないようです。 念のため、画面を保存するか印刷しておくことにします。

mt-load.cgiを実行します。 「System Initialization Complete」が出れば、問題ないようです。

mt-check.cgi, mt-load.cgiのふたつをサーバーから削除します。

　# 下記は、
AutoPage 版めぐ味屋ブログ
からの転載です #

マニュアルに従って、ファイルをアップロードします。

アップロードがすんだら、ファイルのパーミッションを変更します。

次に、isweb の場合には、先程ファイルをアップロードしたディレクトリの下に「db」というフォルダを作り、そのパーミッションを変更します。

HTMLを生成するディレクトリを作ってパーミッションを変更します。
めぐ味屋は既に公開の為のディレクトリを作っていますが、テスト的に、別にディレクトリを作りました。

　# 下記は、
AutoPage 版めぐ味屋ブログ
からの転載です #

次に、*.cgi の中の perl のパスを変更します。これは、通常の掲示板設置の時などと同じですね。。。

isweb のマニュアルを見ながらやってみます。
展開したフォルダのルートには、13個の*.cgiがありますが、isweb では、そのうちの１０個だけを変更すればよいようです。

それがすんだら、「mt.cfg」の中身を変更します。

18行目：mt.cgiをどこにおくか。
これは自分で決めてその通りのパスを指定します。

63行目：StaticWebPath：
これはiswebの場合、cgi-binフォルダの中に静的ファイルも置けますので、特に指定しなくて良いようです。

226行目：PublishCharset:
めぐ味屋は、utf-8で運用するのでここは変更しません。

308行目：ImageDriver：
IswebはImageMagickを使うので、ここをiswebのマニュアル通りに変更します。

80行目：SendMailPath：
Isweb では特に変更の必要はないようです。

177行目：EntriesPerRebuild：
弱いサーバーの場合、ここの数字を減らすと良いようです（サーバーへの負荷が減るとか…）。めぐ味屋では、現在「10」にて稼働していますので、今バージョンでもその様にしてみます。

DB関係は、Iswebでは飛ばします。

　# 下記は、
AutoPage 版めぐ味屋ブログ
からの転載です #

Movable Type 3.1日本語版をゲットしました。isweb basicに導入してみます。

めぐ味屋では、既に稼働中の「2.661」があるので、本来なら「アップグレードパック」で良かったと思うのですが、*.pmの中身をいじってたりするので、アップグレードの方が面倒な気がして、フルパックをDLしてみました。

インストール手順は、infoseek isweb で紹介している方法と、milanoさんが紹介して下さっている方法とを照らし合わせながら、やってみます。

うーんと。。。たぶんこれでラストになると思うんですけども…。
今回は、コメント／トラックバックを表示する部分に手を入れてみます。

html の構造をかいつまんで簡単に書くと、

　＜div class="wback"＞
　　＜div class="wback1_tr"＞
　　　　＜b＞記事タイトル＜/b＞
　　　　　　Posted by ブログ名 at 2004/10/20 23:48＜br＞
　　　　　　＜div style="margin-left:30px"＞
　　　　　　　トラックバック記事本文＜br＞
　　　　　　＜/div＞
　　＜/div＞

　　＜div class="wback1"＞
　＜b＞コメントタイトル＜/b＞
　　　　　Posted by 投稿者 at 2004/10/20 23:50＜br＞
　　　　　＜div style="margin-left:30px"＞
　　　　　　コメント本文＜br＞
　　　　　＜/div＞
　　＜/div＞
　＜/div＞


こんなんなので、該当する class に宣言を追加するなりします。
めぐ味屋はこんなんにしてみました。


　．wback ｛
　　　margin:5px 33% 0px 1%;
　　　…略…
　｝

　．wback1_tr ｛
　　　margin:5px 1% 0px 1%;
　　　padding:5px;
　　　border-width:1px 2px 2px 1px;
　　　border-style:solid;
　　　border-color:gray;
　　　…略…
　｝

「wback1」も「wback1_tr」とおんなじ感じです。また、コメントフォームは

　．wback2
　．wback2 table,tr,td
　．wback2 form,input,textarea

を定義してみました。

今度は、サイドバーの各ブロックのとこ。まず、新着エントリ。。。

ヘッダを目立つようにして、後、記事の下にアンダーラインがつくようにしてみました。
ヘッダは orig.css にないので、作るデス。

　．heading_entry ｛
　　　background-color:#aaaa99;
　　　text-align:center;
　　　padding:0.2em 0px;
　　　border:2px ridge #aaaa99;
　　　…略…
　｝

記事一覧はこんな感じ。

　．recententry ｛
　　　margin:0px 1em;
　　　padding:0.3em 0px;
　　　border-width:0px 0px 1px 0px;
　　　border-style:dashed;
　　　border-color:#aaaa99;
　　　…略…
　｝

後、新着コメントのヘッダは、

　．heading_coms

を作って、内容は、「heading_entry」と同じにしました。コメント一覧は、「newcoms 」です。これも記事一覧と同じようにアンダーラインを引いてみたかったのですが、htmlの構造上、無理っぽいのでやめました。。。

後は、

アーカイブヘッダ：
heading_archive
年：
archive_year
月：
archive_month


カウンターヘッダ：
heading_counter
カウンター各要素：
count2


ないものは、作るデスね。。。

うんと。。。

では、次にサイドバーをいじってみます。
サイドバーは大囲いがあるんですよね…これ。。。

　div．guidance ｛
　　　position:absolute;
　　　left:69%;
　　　width:30%;
　　　top:5px;
　　　padding-left:5px;
　　　padding-right:5px;
　　　padding-top:5px;
　　　padding-bottom:5px;
　　　…略…
　｝

これも width をとってこんな風にしてみました。

　　　position:absolute;
　　　left:69%;
　　　top:5px;
　　　padding:5px;
　　　margin:0px 0.1% 0px 0px;
　　　…略…

夢でお告げがありました…。

前回「
のブログスタイルシート…日付部編
」と「
のブログスタイルシート…ブログタイトル部編
」で、それぞれ、

タイトル部：

　．line1 ｛
　　　width:68%;
　　　…略
　｝

日付部：

　．date ｛
　　　width:68%;
　　　…略
　｝

とかにしてみたんですけど、「
のブログスタイルシート…エントリ部編
」と同じやり方をすれば、IE でも、もじらでも同じように見えるわけですよね…。

で、こんな風にしてみました。

　．line1 ｛
　　　margin: 0px 32% 0px 0.1%;
　　　…略…
　｝

　．line2 {
　　　margin:0px 32% 10px 0.1%;
　　　padding:6px 1em 3px 1em;
　　　…略…
　｝

　．date ｛
　　　margin:0px 32% 10px 0.1%;
　　　…略…
　｝

うーんと。次は、エントリボディのとこ。。。なんですけど。
やっぱり大囲いがないと、デザインしづらいにょん…。


記事の囲い、デフォルト：

　．article ｛
　　　width:64%;
　　　margin-left:20px;
　　　margin-top:5px;
　　　padding:5px;
　　　…略…
　}

こんな風にして width 取ってみました。。。

　　margin:5px 33% 0px 1%;
　　padding:12px 0.5% 5px 0.5%;
　　border-width:2px;
　　border-style:ridge;
　　border-color:#aaaa99;
　　…略…

記事本文は orig.css にないみたいなので作るデス。

　．article_main ｛
　　　margin:0px;
　　　padding:0px 1em 1em 1em;
　　　background-color:#ffffee;
　　　border-top:2px solid #aaaa99;
　　　border-bottom:2px solid #aaaa99;
　　　line-height:1.7em;
　　　…略…
　｝

記事フッタ：

　．footer ｛
　　padding:0.2em 1em;
　　…略…
}


こんなんかなあ。。。どうなんでしょ…。

　# 中途半端なんですけど。。。今日はおしまいでするるる #

うーんと。。。おなかすいた…笑…。
でも、今、食前の漢方を飲んだばかりなので、後１時間は、食べられにゃいん。。。ということで、もうちょっといじるにゃんんん。

次は日付だにゃ。ていうか、にゃんで今日はずっとにゃん語にゃのだろう…。
…良いけど…。

日付のところ、デフォルト：

　．date ｛
　　width:69%;
　　margin-top:5px;
　　padding:5px;
　　background-color:#DEDFDE;
　｝

はばをちょっと狭くして、枠で囲ってみました。こんなんです。文字はセンタリング。

　　width:68%;
　　border:2px ridge #aaaa99;
　　text-align:center;
　　…略…

うーんと。。。
ヘッダーの大囲いがにゃいのよねん。。。
それがあるといじるのに都合がよいんですけど。。。
あ、その辺のところを、きっと有料版ではいじれるのですね。。。と勝手に想像してみる…。

そいでは、タイトルの部分をいじってみます。

デフォルト：

　．line1 ｛
　　　width:68%;
　｝

line1 をこんな風にして、背景にねこ画像を張り込んでみました。ちょっとは可愛いでしょうか。。。

　．line1 ｛
　　　width:68%;
　　　…略
　　　background-image: url(画像のパス);
　　　background-position:top;
　　　background-repeat:repeat-x;
　　　…略
　｝

後、タイトル文字は、「html」の方を眺めると、こんな風になっているんですが、

　＜div class="line1"＞
　　＜h1 class=line1_hx＞ブログタイトル＜/h1＞
　＜/div＞

orig.css の方に「line1_hx」というクラスがないので、作ることにしました。こんなんです。

　．line1_hx ｛
　　　text-align:center;
　　　color: #330000;
　　　margin:0px;
　　　padding:2.4em 0em 0px 0em;
　　　font-size:22px;
　｝

うーんと、次に、body に関する定義なんですけど。
背景色と背景画像を変えてみようかにゃ。。。

デフォルト：

　body ｛
　　…略
　　background:#F7F3F7;
　　…略
　｝


こんな風にしてみました。

　　background-color:#FFFFE3;
　　background-image:url("画像へのパス");
　　background-attachment:scroll;
　　background-repeat:repeat;


後、デフォルトで

　　font-family:sans-serif;


が、定義されているんですけど、にゃんだかうちの化石マシン（笑…）で見た時、文字化けするというか、文字がちゃんと出てくれないので、こんな風に追加してみました。

　　font-family: Osaka, "Trebuchet MS", Verdana, Arial, sans-serif;
　# にゃってる…？ #

うーんと、まず、リンク関係ですけど。。。
デフォルトでは、

　a:link ｛
　　color:#0000FF;
　　text-decoration:none;
　｝

　a:visited ｛
　　color:#9601FF;
　　text-decoration:none;
　｝

　a:hover ｛
　　color:#0000FF;
　　background-color:#C0FFFF;
　　text-decoration:underline;
　｝


なんですけど、これだけだと、もじらで見た時、「visited」 の「text-decoraton:none」だけが有効になって、未読のリンクのアンダーラインは見えているので、以下を「a:link」の上に追加してみます。

　a ｛
　　color:#0000FF;
　　text-decoration:none;
　｝


できたかにょ…？
後、hover の時もアンダーラインが出ないように、hover の「text-decoration:underline」を「text-decoration:none」にしてみました。


うーんと。。。ついでにcssの最上段におまじないを入れておこうかな…。
これ。

「＠charset "Shift_JIS"；」


　# えへへ。
もじらで懺悔
は役に立ってるかにゃ〜 #


＊便宜上スタイルシートの一部を全角で記述していますが、実際は全部半角にするデスね。

のブログ、無料版でも外部スタイルシートが利用可能になったみたいなんですけど、なぁるるる〜そういうからくりなのか。。。

●「外部スタイルシートの利用」のチェックを外す
　旧式通りheadには以下が記述される
　　＜link rel="stylesheet" href="/blog.css" type="text/css" /＞
　　＜link rel="stylesheet" href="/blog2.css" type="text/css" /＞

●「外部スタイルシートの利用」にチェックを入れる
　headには以下が記述される
　　＜link rel="stylesheet" href="/orig.css" type="text/css" /＞

なる。わかツた。じゃ、今まで自由文言にリンクしていた内容をorig.cssの中身に貼ればいいのかにゃ…？ちょっと怖いけど（笑）やってみよう〜（バックアップとっとから…）

あう〜。

前回の懺悔で内心、もう完璧だね。あはははは…と思っていたのですが、実際、そ〜んなわけはないのであります。。。

ということで、今日の懺悔は、

　●background-attachment:fixed の恐怖！

です。。。


以前、ネスケユーザの方に、（テーブルなどの）ボックス内の背景画像が見えてないと言われたのですが、原因がわからなかったんですよね。で、諦めていたのですが、、、。
たぶん、ネスケで見えなかったのもこれが原因ではないかと思う。。。


んね。。。やっぱり自分で見てみないとソレがどんなに怖い現象なのかもわからないのであります。。。

背景画像を固定したい時、スタイルシートに background-attachment:fixed を入れますよね。。。あれ？なんか前に書いた気がする…。あったここだ…「
外部スタイルシートを再度適用してみました　懲りないヤツ　笑
」。
なんか変なタイトルですけど…。

で、ページの背景画像を固定するのは上記の記事でよいと思うのですが、ボックスの中に背景を張り込む場合（
こんなんです
）、上記の記事のようにするとよろしくないんですね。。。もじらで見てはじめてわかりました。

表現が難しいのですが、、、ボックスの中だろうが、fixed にした部分はページに対して固定されるのですね。。。で、ページをスクロールすると、絵だけが固定されて、他の部分が動く…。

う…。考えてみればその通りなのですが、IE5.5では、ボックスの中の背景も一緒に動いていたのです。。。て、それって fiexed じゃないじゃん〜。。。IE5.5もエエカゲンなんでしょうが、これに気づかないめぐ味屋のエエカゲンさ…。

あぁ...。
今、
るるろぐ
（Movable Type版プライベートブログ）をいじろうと思ったんですけど、先にショップの方を片づけようと思って、見直していたんですね。。。

そんなわけで、やっぱり？懺悔は続くのでありました…。
う〜ん。がんばるぞー。

なんかね…。すごく安く手に入っちゃったんですよね。タイミング良かったかなあ。。。

先日、
DAZ
からDMがきて、「マイケルお安くしておきまっせ？通常、39.95ドルのところ、今ならなんと！27.97ドル〜！」と言われ、そそられていたんですが、色々忙しいやらで、今日まで買わずにいたんですよね（←買うとなったら、腰をすえて英文と格闘しなくてはならない）。

そしたら、今朝、またDMが来ていたのですね。で、内容ははっきり言って良くわからなかったんですが（笑）、マイケルの安売りが10月19日までなので、じゃ今日辺り買いに行こうという気になったのです。

下調べはしてあったので、カートに入れるまでは良かったんですけど、その後がよくわかんな〜い。以前にも１度、DAZ でお買い物をしてるんですけど、やっぱり英語は大きな壁だ〜。。。

支払いにPayPay を選んだから余計わかんなくなっちゃったのかなあ…。DAZ はクレジットカードも使えるんですけどね、、、でも、せっかく（？）PayPalの会員なんだから、機会があったらどんどん使いたいよね〜とか思って。。。てか、うちのショップ、PayPal払いでもオーケーよって言ってないっけ…？（汗笑…）。

要するに（笑）、
　１．カートに入れる
　２．会計にすすむ
　３．支払い方法を選ぶ
　４．完了
　５．ダウンロード
という手順なんだけども、「３．支払い方法」でPayPalを選ぶと、PayPalのページ（支払い代行）に行くのよね…。日本でもそうじゃん…。

でも、PayPal に行ったら amount （総計）が＄15.94だったんですよね。
え…？なんで…？ だってマイケル27.97ドルじゃん。ビッキーも同じ値段じゃん…？
ふたつで55.94ドルじゃん…。だってそゆふうに書いてあったじゃん…？？？


頭空転…爆。
う…？そういえば、クーポン券がどうのとか、商品券がどうのとか書いてあったような…？

それで、DAZ のページとPayPal のページを行ったり来たりしてしまったんですね…。しかしながら、なんでこんなにも英語が苦手なのに、英語圏で買い物をしようなんて無謀なことを考えるのでしょう…。

まあ、そんな風に紆余曲折はあったのですが、、、。
結局のところ、今日DAZ から来たメールにクーポン券ががついていたらしく、それで40ドル引きになったというわけ…のようなんですね（10ドルのクーポン券と30ドルの商品券と書いてあった…。違いは良くわからない　笑）。

そうそう。PayPal の画面は、ところどころ（笑…）日本語になっていて、便利そうな気もするのですが、なんだか訳がちがうんじゃねいの？と思うところもあって、混乱しました…。ですから、日本語訳は、参考程度に読んで、確実なところは、原文の方がわかりやすいのかも知れません。。。日本語に訳されると、かえってわかりづらいことありますよね。。。PayPal の英語は親切にわかりやすく書いてあると思います。

PayPal での支払いが完了すると、「さんきゅぅ」というメールが来て、アカウントのページから製品のダウンロードが可能になります。ダウンロードには有効期限があったりするので、ダウンロード可能になったらサクサクとダウンロードします。

ビッキー　約 8MB !!
マイケル　約 6MB !!

ISDN で、、、まあ、30分くらいですかね…。インストーラーがついているので、基本的には、ダブルクリックするだけです。

英語圏のposer系のツールは、インストール先に、「poser.exe」がないとインストールできない時があるんですが、「poser.exe」はなぃっちゅうの…。日本語版の「poser」は「poserj.exe」なんだよ〜。。。

…でも、マイケルとビッキーは問題なくインストールできました。poser 上のフィギュアライブラリから呼び出せます。

しかしそのままだと、テクスチャが適用されていません。なんかつるんとした感じです。ポーズライブラリに、P5 用、P4 用、PPP 用のMAT Pose ファイルが格納されていますので、それを適用すると、簡単にマイケル、ビッキーにテクスチャを与えることが出来ます。。。

普通のポーズもいくつか添付されていました。前回の記事「
DAZ でマイクェル買ってみました（ビッキーもね）
」の２枚の絵は、今回買ったマイケルについてきたポーズです。

めぐ味屋をよく知ってる人は、前回のマイケルを見て、「またやってるし…」とか思ったかも知れませんが、あれはDAZから来たヤツなのです。めぐ味屋が作ったんじゃないのよ。でも真っ先に使ってみたのはやっぱりめぐ味屋だから…かな…笑。

MT（モーフターゲット（Movable Type の事ではない　笑））もいっぱいついているんですけど、まだ遊んでいません。色々遊んだら、「
ともくん日記
」に書いてみたいです。ともくんも１年くらい更新してないしね、ネタが出来てうれしいわ…。

ところで、マイケルはだいぶ「あっさり系」の顔になったのね。。。以前はもっと、こゆかった気がするけど…。ビッキーは濃いけど。。。笑。。。

Michael 3 Reduced Resolution
めがねは自前　笑






Victoria 3 Reduced Resolution


　# 後で、もう少し詳しく書きます。たぶん… #
　# とりあえず（笑）ご飯食べます。おなかすきました。 #

やっっっと、できた…。
めぐ味屋数字苦手なのに…。

いつもやり方を忘れるので、書いておくことにしました…。








4D 54 68 64 〜 ヘッダ
4D 54 72 6B 〜 トラック１のデータ
00 FF 03 曲タイトル

26 データ長 38(Deci)
83 5C 〜次の 00 曲タイトル実データ

00 FF 02 著作権情報

16　データ長 22(Deci)
28 63 29 32 30 30 34 20 53 74 75 64 69 6F 20 4C 69 6F 4C 69 6F 6E
(c)Studio LioLion

00 FF 58 拍子
00 FF 51 テンポ





上図のように、「00 FF 02 16 ウンヌン」がないので、「00 FF 03」と次の「00 FF nn」の間に入れる。
「00 FF 03」のデータ長「40（64dec）」は次に来る「00 FF nn」までのバイト数を表す。
著作権を挿入する時は、「00 FF nn」の「00」の前から「noiLoiL oidutS 4002(c)」のように逆さまに入れていく。
「(c)」の「(」の直前から「00 FF 03 40」の「40」の前までのデータ長を数えてHexにして「40」のところに入れる。
できあがり。
ちなみに、「00 FF 02 16」の「16」は、「(c)2004 Studio LioLion」22byteをhexで表した数字。これで、QTやMedia Playerなどで再生した時、著作権情報が出る…はず

やっと、音楽ネタです。。。といっても、小説の挿入曲なんですけど。。。 DNAの塩基配列（AGCTってヤツね）で音曲を作ってみました。

大野乾先生がやってらっしゃったようです。そちらの方はよく知らないのですが、、、。 私の場合、AGCTを眺めているうちに、これって音楽じゃん。。。と思って、作ってみました。 ネタあかし？は、小説で。笑。。。

譜面も作ったんですけど、なんでそうかは、もう覚えてないかも。。。あの時は、インスピレーションでバンバン作ってしまったので。。。

あと、音曲に関するイメージです。
これらは、今手がけている小説「Final Decision / PRELUDE」の中に出てくるサウンドメッセージです。他にメッセージは、後４曲あるんですけど。。。

書き下ろしならいっぱいあるので、それを先に出してしまえ…とお友達は言うんですけども、、、でもやっぱり、めぐ味屋としては、最初に「創世史」である「PRELUDE」を出したいんですよね。創世史は、聖書なら「創世記」にあたるところですし、、、。その後は順番？でなくてもいいのかもしれないけど…。

というわけで、PRELUDE サウンドメッセージより、DNA 塩基配列により音曲とイメージです。



音曲「
GA（ソラ）の意志
」を再生します（midi形式）



音曲「
深き祈り
」を再生します（midi形式）



音曲「
12の星〜継代〜
」を再生します（midi形式）

上記ファイルは、環境によって、音質が大きく異なる場合があります。ご了承下さい。尚、製品収録時には、MP3形式で収録する予定ですので、CD並のクォリティでご視聴頂けます。

Music and pictures are a copyright of
Studio LioLion
1995-2004

さて、ちょっと間が開いてしまいましたが、「もじらで懺悔」のコーナーです。決してあきらめたわけじゃありませんよ。あはははは…汗…。

今日の懺悔は、「
ソースの丸出し
」に匹敵するくらい大罪に値するのではないかとめぐ味屋自身思うのであります…。

　●clear プロパティ抜けによるレイアウト崩れ


です。。。しかしこんな馬鹿者、私だけでしょうか…（ネタじゃないのよ〜涙笑〜）。
…では、以下に、簡単な例を書いてみます…。


　＜div style="width:100%;">
　　＜img src="イメージのパス" alt="ねこアイコン"
　　　　width="150" height="150" style="float:left;" ＞
　　　　ここに文字を入れると文章が回り込むの。
　　　　ちょっとうれしいわ…
　　　　うふふ…
　＜/div＞
　ここにも文字を書く。

これをIE5.5 ともじらで見てみます。

IE5.5


mozilla


…うへぇ…。

作者（私　笑）は、IE5.5で見えてるようになるよう意図していたので、あ、ちゃんとできてる。るるるる〜と思い、そのままでありました…。でも、もじらで見ると＜/div＞の後の「ここにも文字を書く」は、floatが生きている限り、どんどん（この場合絵の右に）回り込んでいくのです。画像の高さが終わるまで…。で、これは文字だけでなく、画像であろうが、どんどん回り込みます。。。

この場合、
「うふふ…」の後、＜/div＞の前に＜br style="clear:left;"＞を入れてやって、float で定義した回り込みを解除します。そうすることによって、ああ、ここで回り込み終わりなんだなってブラウザが理解してくれて、ちゃんと意図したとおりに表示できるようになります。


2004/10/13 19:44追記：
例によって
WEB標準普及プロジェクト
からですが
…略…CSS2仕様書でのHTML4.0の定義例でbr要素はインライン要素となっています。 clearプロパティ自体は本来、ブロックレベル要素にしか適用されません。…略
…とありました。しかし、また続きの下りに以下のようにもありましたので、
…略…今回は空のブロックレベル要素でclearに指定を行うのもあまり適当ではないと考え、…略
このページでも上記の例では、＜br style="clear:left;"＞を使っておくことにします。後述にブロックレベル要素で clear プロパティを使った例が出てきます。

引用参考記事：
heightプロパティの注意点〜内容がfloat要素の場合



んでは、もっと実際問題としての、悲惨な状態を簡単に書いてみます。

IE5.5



mozilla




これは、まったく同じHTMLソース、そしてスタイルシートの定義なのですね。。。

　：HTML ソース：
　　＜div id="bodylay"＞
　　　＜div id="lay01"＞
　　　　■＜br＞
　　　　ここはfloat:left＜br＞
　　　　文字を入れてみます。ちゃんと出来てる？
　　　＜/div＞
　　　＜div id="lay02"＞
　　　▼これは悲惨なんてモンじゃないです。
　　　＜/div＞
　　●
　　＜/div＞

　：スタイルシート：
　．bodylay　｛
　　　width: 20%;
　　　padding: 0px;
　　　margin: 0px;
　　　…省略
　｝

　．lay01　｛
　　　float:left;
　　　padding: 5px;
　　　margin:6px;
　　　…省略
｝

　．lay02　｛
　　width:98%;
　　padding: 5px;
　　margin: 6px;
　　…省略
　｝

です。で…。


もう、おわかりかと思いますが、これは、「lay02」に「clear:left;」を追加すればちゃんと表示されます。例によって、「padding」「margin」を定義する場合は、「width」は取ります。。。るるる。。。

めぐ味屋ブログ内参考記事：

もじらで見る！ #2 width, padding 編


もじらで懺悔…width, padding, margin 編


もじらで懺悔…#2…width, padding, margin 編#2


…さて、いよいよ、懺悔に一区切りついたでしょうか？（本当？汗…）。今後は、自分のサイトを実際に直しながら、「うへぇ〜」と気がついたことがあれば、記事にしてみたいと思います。

　# まず手始めは、「
るるろぐ
」だ〜 #

DAZに問い合わせのメールを書いてみました。 久々の英文です（たいした長さではない　笑）。

ダン（めぐ味屋の英語の先生　笑）に聞いてからの方が良かったでしょうか。。。 でも、もう送信してしまいました。 まあ、通じなかったら、何か言ってきてくれるでしょう…。

ぁあ。最近、ダンに全然メールしてない。。。
懺悔の意のを込めて（？）リンクしておこう（＜--意味不明…）。

いや。そうだよ。紹介すれば良いんだ。
んね。。。

ダンは、POSER で利用できる便利なツールや、他にも、グラフィック系のソフトをたくさん作っているのです。そしてめぐ味屋は彼が作ってるソフトのテスターってわけです。。。

ダンのサイトはここ（英語です）。

ZENWARE ONLINE


あとで、サイドにもリンクしておこうっと。
めぐ味屋、ZENWARE のチュートリアルとかも書いてるんですけど、、、。
でもそちらは、もじらで懺悔のめどがついてっから…宣伝することにします。。。

ところで、英語のサイト（海外）にアクセスすると、KDDIから請求が来るんですか？と聞かれたことがあるんですけど、そういうことはないです。。。

思わず自分の歌でパロってしまいたくなります…。

●オリジナル●
♪君がぁ笑ってぇいるからぁぁぁ　それでいいと思っていたあぁぁ
　だから君が泣いたらあぁぁ　何も出来なくなったぁぁ♪
♪言ってしまえば良かったのかぁぁ　僕だけの君だとぉぅぅ
　かんじがらめに　閉じこめてぇえぇぇ　離さなければ良かったのかぁぁぁ…
　（後悔続く　笑）♪


●パロ●
♪IEでぇ見えているからぁぁぁ　それでいいとぉ思っていたあぁぁ
　だからもじらで見たらぁぁぁ　何も言えなくなったぁぁぁぁ...♪
♪言ってしまえば良かったのかあぁぁ　僕はゲイツのしもべだとおぉぉ
　がんじがらめにページ固めて　他をはじけば良かったのかぁぁぁ...
　（懺悔続く…爆）♪


う〜ん。。。まだ頭うんでますね…。

では、今日の懺悔ですが。
例によって「
web標準普及プロジェクト
」からの引用です。


img要素のalt属性に値を設定しておくと、その画像の上にマウスカーソルを乗せた時にポップアップによってその画像の説明が出る、またはalt属性そのものがそういう役割の属性であると認識している人がいるようですが、このような考え方は間違いです。
…中略
と、仕様書上にもあるように、ツールチップとしてポップアップするべきはtitle属性に指定された内容です。 Mozillaも、そしてOpera6でもalt属性はポップアップせずに、title属性がポップアップするようになっています。

上記の記事の参考ページ：
img要素でalt属性の内容がポップアップしない




がぁ〜ん…。
そうだったのか…。それでもじらで見た時、画像にマウスを載せてもツールチップが出なかったんですね。。。titleの存在は知ってましたけども、altはtitleの代わり（？）もしてくれるんだと思っていました。。。ですからIEはそうだから…。


上記の「
web標準普及プロジェクト
」を読んでいて思うのですが、どうやらめぐ味屋は典型的な（？）IEユーザだったようです。こちらに書かれている内容がほとんど自分に当てはまるので。。。

そんなわけで（これも得意かも…笑）、alt と title ですが、 alt は必須項目となっていますし、めぐ味屋でもその様にしてきたので、今後もそのようにしていくわけですが、title は必須とはなっていません。。。
でも、自分の環境がISDNなので、ページが重たくて表示が困難な時、画像を非表示にして閲覧することもあるのですね。そんな時、alt があれば確かになんとなく様子はわかるのですが、でも例えば、画像がすごくちんまい時、alt では読み取れない時があるのです。そんな時には、ツールチップが表示されると、とても助かると思ったので、今後めぐ味屋は 画像をページに置く際には、alt の他に tltle もつけるようにしたいと思いました。。。
また、title は色んな要素に使えるようです。。。上手に使って訪れてくれるヒトに優しいページにしたい…。

　#
文字の部分にtitle を使っています（マウス載せてみてね）
#

追記：
同「のブログ」内の「
お目だるいオオカミさん
」が「
ツールチップを活用しよう！
」でリンク＜a ref=""＞を使った「title」の使い方を説明して下さっています（めぐ味屋、説明手抜き…？汗笑…）

さて、みなさま。今日も「もじらで懺悔」のお時間です。

…いや…。ホントは違うネタを書きたかったのですが、そのネタに使おうと思った自分のサイトをもじらで見たら、またしてもとんでもないことを発見してしまい、そちらのネタを先に書こうと思ったわけです。。。

で、今回の懺悔は。

　
うわっ。ソースを表示しているぞ…？？？


…です。

ここ「
ともくん日記
」。。。
ここは、めぐ味屋のプライベートサイトのひとつなんですけど。POSERという3DCGソフトとそれを使いこなすためのツールのチュートリアルなどを書いています。いや、今はそれは良いんですが…。

んね。ここのサーバーは、isweb light と言って無料スペースなので、広告が入るんですけど、めぐ味屋はフレームをふたつに切っているので、その両方共に広告が入らないように、小さいフレームの方の拡張子を「shtml」にしてあるのです。このようにして二つ目以降のフレームの広告を消去する方法は、iswebで許可されているのですが（全部を消したら規約違反です）、、、。ですから、例によって、IEで見て平気だったのでそのままだったんですよね。

それで今さっき、もじらで見たら、あはははは…。ソース表示している…。

拡張子をshtmlにしている方のフレームがちゃんと表示されず、ソースが出ているじゃありませんか。ギョッとしますよね（たいしたソースじゃないけどさ。いや、たいしたソースでないからこそギョッとするのですね　笑）。。。

で、先日からお世話になっている、「
Web標準化Tips
」に行ったんですけど、それに関する記事が出ていました。


Content-Typeエンティティヘッダフィールドは適切なものを指定してください

　…略
HTML文書の場合、それをブラウザでHTML文書として表示したい場合、text/htmlを送信します。 これでWebブラウザは中身がHTML文書であると分かるのです。
　…略
問題なのは*.shtmlのように普段使用しない拡張子のファイルです。 このようなファイルはtext/plainとして扱われる可能性があります。


むむむ。どうやらこれらしいぞ…？
で、shtmlの方のソースを見てみたんですけど…。
あり...？ちゃんと、

　"Content-Type" content="text/html; charset=Shift_JIS"
　"Content-Style-Type" content="text/css"

が、指定してあるぞ…？むむむむむ。。。

うーん。。。頭がしばし空転…笑。。。


で、気づいたんですけど、めぐ味屋、拡張子を「shtml」でなくて「shtm」にしてありました。もしかしてこれ…？

アタリ。。。

拡張子を「shtm」から「shtml」に変更したらちゃんと表示できました。。。
これって懺悔以前の問題（？）ですね…でも、IEはへっちゃらなんですよ。。。

（後はね、他にもあったんですけど、とりあえず（また…？笑）、ここだけ直してみました。。。）

なんか書くのも恥ずかしかったんですけど、同じようにハマる方もいらっしゃるかと思って書いてみました。


あ、でもね。

AutoPage（版めぐ味屋ブログ）
の方に、もじらネタ書いてみたんですけど、さっそく、「もじらで見た〜」というコメントを頂いたよ。なんかうれすぃです。。。

　# もじらで懺悔シリーズは、現在このプログの #
　# 「
スタイルシート
」カテゴリに分類されています #

　# でも、このネタはスタイルシートネタじゃないね　笑 #

さて、みなさんこんにちは。「もじらで懺悔」のコーナーです（…開き直り　笑）。
（「もじらで懺悔」は現在、めぐ味屋のこのブログ内で「
スタイルシート
」カテゴリに分類されています）。

では、早速、今日の懺悔ですが。
めぐ味屋は今まで、

ブロックレベル要素をtext-aling:centerでセンタリングしていました。こんな風に。

　＜div style="text-align:center;
　　background-color:#ff6600;width:100%;"＞
　　　ここの文字はセンタリング
　　　＜div style="text-align:left;
　　　　background-color:#999999;width:80%;"＞
　　　　　ここの要素は、センタリングで文字は左寄せ
　　　＜/div＞
　ここもセンタリング
　＜/div＞


で、これをIE5.5で見ると、子要素もセンタリングして見えるのです。ほら。
●IE5.5でみた。


ですから、それで良いと思っていました。。。
しかし、、、

●もじらで見てみた


ブロックレベル要素はセンタリングしていない

…う…。

確かにブロックレベル要素を「text-align」で配置するのは、なんか変だな…？とは思っていたのですが（だってテキストって言ってるし…）、でも、やっぱり、（IEで）ちゃんと見えてるからいいや。と思ってたんですよね。。。（しかし、これってすごい落とし穴だよなあ…）。

で、先日、
お目だるいお話のオオカミ
さんに教えて頂いた「
Web標準化Tips
」というところにインライン要素とブロックレベル要素についてのわかりやすい説明があって、そこんところに、ちゃんと


text-alignプロパティはインライン要素の位置揃えを指定するためのもの

と書いてありました。そして、text-alignでブロックレベル要素が配置できてしまうのはIEだから…（涙笑…）だということも。。。

ですから、ブロックレベル要素をセンタリングしたい時には、

　＜div style="margin:auto;widht:80%"＞

…などというように、「auto」を使えば良いそうなのですが、しかし、IE5.5はこれを理解しないのであります

では、IE5.5でも、もじらでもちゃんと見えるように、ブロック要素をセンタリングしたい場合はどうしたら良いんでしょうか？「
Web標準化Tips
」にもそのノウハウが書いてありましたが、めぐ味屋では、それとは違う方法にしてみました。。。

　＜div style="background-color:#ff6600;width:80%;"＞
　　＜br＞
　　＜div style="background-color:#006666;margin:0px 25%;"＞
　　　ここの要素は、センタリングで文字は左寄せ
　　＜/div＞
　＜br＞
　＜/div＞

IE5.5でも、もじらでもダイジョブになった…。
●IE5.5で見た


●もじらで見た


しかし。。。

なにやらこれには落とし穴があったのです。

　＜div style="margin:0px 25%;background-color:#999999;"＞
　　親要素で margin を左右に25%
　　　＜div style="background-color:#006666;
　　　　　margin: 0px 10%;padding:0.5em;"＞
　　　　　　子要素で margin を左右に10%
　　　＜/div＞
　　　＜br＞
　＜/div＞

こんなふうなのをIE5.5で見てみます。
●IE5.5で見た



これはいくらなんでも、変です…。いくら私がいいかげんな性格でも、子要素のマージンは親要素の10％ではありません。。。IEは何をしたいのでしょう…？もしかすると、親要素のmargin25%と子要素のmargin10%を足しているんでしょうか…？

…もう良いです（＜--？）。。。原因はわからなくても良い。。。
これは、もじらでは意図したようにちゃんと見えるので、
●もじらで見た



…ですから、IE5.5でもまともに見える方法を考えます。。。
こんな風にしてみました。

　＜div style="margin:0px 25%;background-color:#999999;"＞
　　親要素で margin を左右に25%
　　　＜div style="background-color:#006666;
　　　　　margin: 0px 1em;padding:0.5em;"＞
　　　　　　子要素で margin を左右に1em
　　　＜/div＞
　　　＜br＞
＜/div＞

…解決法ではありませんが、こうするとうちのIEでもちゃんと見えるようです。。。




　# スタイルシートが普及しない理由がなんとなくわかってきました… #

　# …なんだか報われない努力をしているような気がしてきましたが #
　# 途中でやめるのも性に合わないので、さらに懺悔は続くのであります… #

さて、前回（
もじらで懺悔
）に引き続き、「もじらで懺悔」第２回です。

いったい、何回懺悔すれば、ゴール（？）につけるのか、ちょっと予想がつきませんが、がんばってやっていきましょう。そうしないと、
るるろぐ
（Movable Type版のプライベートブログ） がとんでもないままです…。

幸い、同じのブログ内の
お目だるいお話さん
がもじらに関する情報を書いて下さっていますので（
目次のページ
から辿れます）、そちらの方なども参考にさせた頂きながら、ひたすら懺悔するのであります…（しかし、なんで懺悔したい気持になるのか…？笑）。

前回は、px 指定で要素の width を指定してみましたが、ホームページを作る時、例えば、divでレイアウトをしようと思う場合、width を px で指定することはあまりないかも知れません。というか、めぐ味屋は width を % で指定する方が好きなので、今回は、width に % を指定した場合の、IE と もじらの見え方の違いを書いてみます。。。

●子要素に marigin をとってみる
親要素：width 20% / margin 0px / padding 0px
子要素：width 100% / margin 2% / padding 0px


　IE

　mozilla


IE5.5



mozilla




IEは子要素 100% から margin 2%（4%）を引いた値が子要素の width になった。つまり 96 %。
mozilla は、子要素 100% はそのままで margin 2% をとろうとする。その際、親要素にwidth が指定してあれば、親要素を押し広げることはしないので、その分、子要素が飛び出す。


●子要素に margin をとったぶん 子要素から width を減算する
親要素：width 20% / margin 0px / padding 0px
子要素：width 96% / margin 2% / padding 0px


IE5.5



mozilla




IEは子要素 96% から margin 2%（4%）を引いた値が子要素の width になった。つまり 92 %。
mozilla は、子要素の width 96% をキープ


●親要素に padding をとってみる
親要素：width 20% / margin 0px / padding 2%
子要素：width 100% / margin 0px / padding 0px


IE5.5



mozilla




IE5.5 子要素から、親要素の padding 2%（4%）を引いた値が子要素の width になった
mozilla は、親要素の width に 親要素のpadding 2% （4%）が加算される。

…頭、ウニです…。


んが、しかし、要するに（また？爆）、親要素は親要素、子要素は子要素に対する padding なり margin なりをちゃんと把握していればよい。。。ということにやっと気づく…。

親子関係があった場合、子要素に width を指定すると、mozilla では padding や margin が子要素の width に加算されるが、子要素の width を指定しなければ、子要素の width から　padding や margin の値を削ってくれるのだ。。。。ということにもやっと気づく…。

光が見えてきました…笑。。。


●子要素の width 指定はなしにして、子要素に margin をとってみる
親要素：width 20% / margin 0px / padding 0px
子要素：width 指定なし / margin 12px / padding 0px


IE5.5


mozilla



やっと同じになった…

では、前述してきた現象が、実際どのようにめぐ味屋の「のブログ」で影響していたかというと、例えば、タイトルヘッダの部分ですが、メインインデックスhtmlで、ブログの概要を書く部分は

　＜div class="line2"＞
　ここに概要書いてるの＜br /＞
　＜/div＞

…なのですが、このスタイルシートの定義をめぐ味屋は以下のようにしていたのです。

　．line2 ｛
　　　width:68%；
　　　margin:0px 0px 10px 0px；
　　　padding:6px 1em 3px 1em；
　　　...省略
　｝

それでこんなふうになっていました。

●IE5.5 で見た


ちゃんと見えていたので、安心していた…

●もじらで見てみた


paddingの分がはみ出していた…

そして、はみ出しはここだけじゃなかったのでありました。。。るるるる。

では、今日の懺悔はここまでです…。また次回…