Take It Easy

日々、アンケートに協力している柊太郎です。

マクロミルというアンケートに参加しています。

原田知世さんが、イメージキャラクタなので、知っている人も多いと思います。

「原田知世のちょっとモニタになってミル？」

いま、こんなタイトルで、アンケートメンバーを募集しています。

文章だけの、参加募集の説明だけでは、なかなか分かりづらいのですが、Naviの原田さんが、OLの知世さんに分かりやすく説明してくれます。

普段、このような説明はほとんど聞かない私でも、内容が良く分かりました。

イメージキャラクタに、知っている人が採用されていると、それだけでも安心できます。

ましてや、知的な知世さんなら、なおさらです。

私が、マクロミルに登録してから、もう4年以上になります。

初めは、個人情報に関する心配などもありましたが、新聞やテレビでのアンケート情報の提供先に、マクロミルの名前を見かけることで、利用先などが分かり、こんなところに協力しているのかと、チョッとうれしく感じました。

ポイントの交換先も、最初は特定のインターネットバンクくらいでしたが、今ではいろいろな形で交換可能になりました。

初めは、アンケートも少なく、なかなかポイントもたまりませんが、季節や時期、ニュースなどにより、まとまってアンケートの連絡があったり、高額ポイントのアンケートがあったりもします。

話題性の高い、高額ポイントのアンケートは、募集人員が少ないのが欠点でしょうか・・・何度も、取逃したこともあります。

でも、安定して募集があるので、かなり気に入っています。

連絡のメールも、広告性の高いものはあまり無く、助かっています。

「原田知世のちょっとモニタになってミル？」はコチラから！

http://monitor.macromill.com/tour/intro.html?entry_kbn=560

ちょっと気になったら、クリックしてみてください。

ではでは。

Ｗｅｂページカラーチャート（標準１６色）

色名（英語名）と色指定値（赤(R)、緑(G)、青(B) それぞれを、２桁の１６進数（00～FF）で表現：#RRGGBB）で示しました。



ＷｅｂＳａｆｅカラー（Ｗｉｎ、Ｍａｃなどの機種に依存しない色指定値）

補色は難しいです・・・バックカラーと文字色の対比が悪いので、見づらいかもしれません。

今後の課題ですね・・・



色名の表はまた後日・・・

黒板のＨａｒｂｏｔ大改造

こんなことが、やりたかった・・・

日付・日直の位置（Ｃ２のところ）に、更にテーブル（４×４）を入れて座標を固定して・・・
と考えてみたのですが、追加したテーブル（４×４）の裏の画像が表示されませんでした。

<ｔａｂｌｅ>の中の、<ｔｄ>に対しては、ｂａｃｋｇｒｏｕｎｄ属性が有効なのですが、<ｔａｂｌｅ>や、<ｔｒ>に対しては、ｂａｃｋｇｒｏｕｎｄ属性が有効になってくれません。

ブラウザで確認すると、ＯＫなんですけどね・・・

みんなのコードを見てみると、やはり<ｔｄ>に対してｂａｃｋｇｒｏｕｎｄを指定しています・・・

特定の座標位置に、文字を書いたり、画像を置いたりしたいだけなんですが・・・
要求が難しいのでしょうか？

もうしばらく、調査が必要・・・

コキアさん、ありがとー！

てすてすてす

編集しているうちに、だんだん離れてゆく・・・
現象がつかめていないので、想像ですが・・・

多分こんなことではないのかと思います。
このように設定していますか？

絵文字や色、文字サイズの設定が可能な状態にしてあるのではないでしょうか？
保存のときに、記述しているタグを補正してから保存している（されている）のだと思います。
設定を変えてから、編集状態に入ってみてください。
たぶん、いらないコードが山のように・・・・

保存して、確認が取れたら、設定を元に戻せばＯＫです。
タグを記述しているところの編集は、チョッと注意ですね。

ちなみに私は、この状態のままです。
そのため、チョッと殺風景ですが・・・

てすてす

<img src="画像" style="position:absolute; top:0px; left:500px;
                                      filter:alpha(opacity=50);">
<div style="position:absolute; top:120px; left:300px;">
   当然ですが文字も書けます。</div>

こんな感じです・・・
画像はGIF形式ですけど、あんまり関係ないのでは？
単位の記述ミスは盲点でしたね・・・
気になる点。このWindowをリサイズすると、画像の位置がずれること。
なぜ？当然か・・・両脇のスペースがあるから。
Windowのサイズを変えたときの対応はこうですね。
縦位置：ｔｏｐの指定はａｂｓｏｌｕｔｅで行います。
横位置：２×１のｔａｂｌｅで行います。

<table width="550">
<tr><td width="300"></td><td>
<img src="画像" style="position:absolute; top:0px;
                                      filter:alpha(opacity=50);">
</td></tr>
</table>

こうすれば、横のズレはなくなります。
ｂｌｏｇとしての横幅は７５０ｐｘですが、モニタの解像度によって両脇のスペースが変わります。
ここでは、記事の表示エリア（横幅：５５０ｐｘ）をターゲットにしています。
サイドバーの上は・・・今後の課題ですね。（サイドバーに記述すればＯＫ？）
原点（０，０）の位置が、ｂｌｏｇの左上ではなく、クライアント領域の原点（ブラウザで表示されている本当の左上）を指しているため位置決めが難しいです。

分かったこと

記事の編集に関して
サイドバーの編集であれば［プレビュー］での確認はある程度有効
サイドバーに画像を使用する際には、横幅に注意すること
　広すぎた場合、本文記事の表示が下方向に移動してしまい、訪問者がビックリする
　この状態は［プレビュー］では判断できないし、下書き状態にも出来ないため
本文の編集の場合は、保存のあと編集ページの中央上にある［自分のブログ］で確認するか
　保存のあと、編集ページの右上にある［公開中の記事を見る］で確認をする
［公開中の記事を見る］は、下書き状態であっても確認可能なので、訪問者に影響が出ない
スクリプトを使用するときは、書式ミスがあってもいいように、コードをコメントで囲むこと
　スクリプトに対応できないブラウザがあることを忘れないため
　最悪、編集状態に戻れなくなる事態を招かないようにするため
（完全に回避できるとは思いませんが、被害を最小限に抑えることは出来ると思います）

プレビューに関しては、本当に苦労しました
従来通りに、HTML文書ファイルを作ってブラウザで確認・・・ＯＫになったら、記事に貼り付け
でも、思った通りの表示にならない・・・
一般常識が通じないんですね
で、黒板のＨａｒｂｏｔは、このように作りました

場所が分かるように、Excelのような座標を書いてみました

今回の特徴は、［Ａ４］に置いた月日などを［Ｃ３］の黒板に移動させているところです
<div>タグに、position属性を使って文字の位置を移動させました

ホームページに日付の表示をしたことのある人は、知っていると思いますが
数字を文字に変換する必要があります
それは、曜日も数字で求まるからです
ここでは、月日、曜日すべてを文字型の配列に持たせて
処理を楽にしました
とはいっても、プログラムの経験がないと
なんで楽なのか分からないと思いますが・・・

日直は、乱数を発生させて、やはり文字型の配列から選んでいます
縦書きにするために、一文字ごとに<br>を入れてあります
移動位置を複数持っているわけではありません

ソースは、また後日・・・

ソースコードをコメントで囲む・・・が、よく分からないと言うことなので、以下に説明します。

　ＪＡＶＡスクリプト
01: <script language="javascript">
02: <!--
03: var n=new Date()
04: mm = new Array("１","２","３","４","５","６","７","８","９","10","11","12")
05: dd = new Array("１","２","３","４","５",・・・,"26","27","28","29","30","31")
06: ss = new Array("日","月","火","水","木","金","土")
07: nn = new Array("ハ<br>ボ<br>タ<br>ン",・・・,"柊<br>太<br>郎","","","")
08: d=n.getDate()-1
09: m=n.getMonth()
10: s=n.getDay()
11: h=Math.floor(Math.random()*(11+1))
12: //-->
13: </script>

　スタイルシート
15: <style type="text/css">
16: <!--
17: #IM {margin:0;}
18: -->
19: </style>

このソースで、説明します。
ＪＡＶＡスクリプトの、02行がコメントの開始を示す書式です。で、12行がコメントの終了を示す書式です。
コメントの終了には"//"を付けます。付けないとＮｅｔｓｃａｐｅブラウザでエラーになります。
スタイルシートもほぼ同じ書式なので、16行がコメントの開始で18行がコメントの終了になります。
コメントの終了に"//"は付けません。付けるとエラーになります。
スクリプトはHTMLと違って、プログラムに近いものです。スクリプト未対応のブラウザが、この記述を見た場合、無反応であればよいのですが、記述によってはＨＴＭＬと解釈できてしまうような場合もあります。そうなると、表示が誤動作してしまいます。表示が出来ない・・・画面が崩れる・・・などにつながります。
なので、スクリプト未対応の場合には、記述をコメントと判断してもらえればこのような問題もなくなります。
スクリプトの記述ミスに関しては、完全にはカバーできませんが・・・でも、付けるべきだと思います。

ちょっと、お遊び！

表示ごとに、日直が変わります。

当然、月日と曜日も日付によって変わります。

標準フォントを使用しての、手抜き表示ですが、画像を使用すればもっと雰囲気が出ますよね。

あとは、特殊なイベントを発生させて、時々落書きを書くことも出来ますね・・・

こんなのを、サイドバーに付けたいですね。

記事での確認

左のサイドバーと、同じコードなんですが、記事の中では画像が離れてしまいます。
みんなの情報で、各画像の周りに余白が設定されてしまう為・・・ということが分かりました。
対策としては、<img>タグにスタイルシートのｍａｒｇｉｎ：０を指定するとのこと。

たしかに・・・ＯＫです。
でも、ここの場合、画像が４つ＋Ｈａｒｂｏｔです。
ほかでは、画像が８つ＋Ｈａｒｂｏｔのところもあります。

記述が多くなるのはあまり好みでなく、ちょっと面倒なので、他の手段を考えてみます。

　なかなか、思うようにいきません。　　何とかなりました。

スタイルシートのＩＤで属性指定をしています。

01: <style type="text/css">
02: <!--
03: #IM {margin:0;}
04: -->
05: </style>
　：
xx: <td><img id=IM src="画像"></td>
　：

０１～０５行が、スタイルシートの指定です。
０２、０４行は、コメントの開始と終了です。記述した指定が間違っていたり、対応していないブラウザであっても、支障が出ないようにするためのものです。
で、０３行に設定する内容と、その定義名称を記述します。この場合は、ＩＭというＩＤに、ｍａｒｇｉｎ：０を設定します。｛・・・｝のカッコと、セミコロンが重要です。
これを、ｘｘ行のｉｍｇタグのＩＤとして使用してみました。
定義のときに、タグを指定していないので、なんにでも使用できます。
これによって、各imgタグにｍａｒｇｉｎ属性を付けるわけです。
１６文字　style="margin:0"
　５文字　id=IM
じゃっかん、節約になりました。

上記のソースです

01: <style type="text/css">
02: <!--
03: #IM {margin:0;}
04: -->
05: </style>
06: 
07: <table border="0" cellpadding="0" cellspacing="0" align="right">
08: <tr>
09: <td colspan="3"><img id=IM src="画像うえ.gif" width="177"></td>
10: </tr>
11: <tr>
12: <td><img id=IM src="画像ひだり.gif" width="25" height="201"></td>
13: <td><img id=IM src="画像中央.gif"></td>
14: <!-- 上の１行は、サンプル用の画像。下の１行がＨａｒｂｏｘの書式（コメントにしてます）。
15: <td><script language="JavaScript" src="ＨａｒｂｏｘＩＤ"></script>
16: -->
17: <td><img id=IM src="画像みぎ.gif" width="25" height="201"></td>
18: </tr>
19: <tr>
20: <td colspan="3"><img id=IM src="画像した.gif" width="177"></td>
21: </tr>
22: </table>

いろんなパターンがあります。

いつも訪問してくださるコキアさんの、Harbot枠が、チョッと特殊だったのでそんなときの設定方法を説明します。
（コキアさん、勝手にサンプルにしてごめんなさい）

01: <table border="0" cellpadding="0" cellspacing="0">
02:  <tr>
03:   <td><img src="左上の画像" width="35"  height="35"></td>
04:   <td><img src="中上の画像" width="117" height="35"></td>
05:   <td><img src="右上の画像" width="35"  height="35"></td>
06:  </tr>
07: </table>
08: <table border="0" cellpadding="0" cellspacing="0">
09:  <tr>
10:   <td><img src="左の画像" width="30" height="201"></td>
11:   <td><script language="JavaScript" src="Harbox-ID"></script></td>
12:   <td><img src="右の画像" width="30" height="201"></td>
13:  </tr>
14: </table>
15: <table border="0" cellpadding="0" cellspacing="0">
16:  <tr>
17:   <td><img src="左下の画像" width="35"  height="20"></td>
18:   <td><img src="中下の画像" width="117" height="20"></td>
19:   <td><img src="右下の画像" width="35"  height="20"></td>
20:  </tr>
21: </table>

サイドバーの一番下・・・に、サンプルを置いています。
記事の中に、設置してみたのですが・・・テーブルフレーム枠が０になりませんでした・・・なぞ？
なので、サイドバーに設置・・・２つ置くのは違反かな？（画像にしました）
対策は、[実験結果３]に書きました。

境界線を 入れてみました

今回は、１段のテーブルを３つ作って、縦に並べています。
このようにしたのは、四隅の画像のサイズがチョッと大きい画像のためです。縮小すると、リンゴマークが崩れたり、右端の曲線の影が上手く出なかったり・・・という問題があります。
テーブルの横幅が１８７ピクセルまではＯＫと言うことなので、両サイドには３０ピクセルの空きがあります。でも、四隅を縮小しないで使用すると、３５ピクセル×２の７０ピクセルが必要です。そうすると、中央は１１７ピクセルになり、Ｈａｒｂｏｔの横サイズの１２７ピクセルが取れません。

そこで、問題を解決するために、上中下段を別のテーブルで管理します。
上段の横は、３５＋１１７＋３５＝１８７ピクセル。
中段の横は、３０＋１２７＋３０＝１８７ピクセル。
下段の横は、３５＋１１７＋３５＝１８７ピクセル。
と、しました。
縦に関しては
上段：３５ピクセル。
中段：２０１ピクセル。
下段：２０ピクセル。
です。

元の画像サイズをそろえるのが、一番素直なやり方でしょう。でも、融通の利かない場合があると思います。発想の転換で、ここまでできます。
いや・・・まだまだ、いろんなことができると思います。
ぜひ、挑戦してください。

質問などあれば、コメントしてください。